AJAX Auto Complete with sql look-up

Ok he's the thing,

I have the following auto complete on a aspx page for a seach function, im wanting it to look-up the names using the sql on line 20

1<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">2 <Services>3 <asp:ServiceReference Path="AutoComplete.asmx" />4 </Services>5 </ajaxToolkit:ToolkitScriptManager>6 <h1>7 Search Page</h1>8 <table>9 <tr>10 <td>11 <asp:TextBox ID="searchTextBox" runat="server"></asp:TextBox></td>12 <td style="width: 100px">13 <asp:Button ID="searchButton" runat="server" Text="Search" /></td>14 </tr>15 </table>16 <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="searchTextBox"17 ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="2"18 CompletionInterval="1000" EnableCaching="true" CompletionSetCount="12">19 </ajaxToolkit:AutoCompleteExtender>20 <asp:SqlDataSource ID="autoCompleteSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:autoCompleteConnectionString%>" SelectCommand="SELECT [fishName] FROM [tblFishTypes]"></asp:SqlDataSource>

Then i've the following code in the asmx file...

1Imports System.Web2Imports System.Web.Services3Imports System.Web.Services.Protocols4Imports System.Collections.Generic56<WebService(Namespace:="http://tempuri.org/")> _7<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _8<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _9<System.Web.Script.Services.ScriptService()> _10Public Class AutoComplete11 Inherits System.Web.Services.WebService1213 <WebMethod()> _14 Public Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer) As String()15 Dim c1 As Char16 Dim c2 As Char17 Dim c3 As Char1819 If (count = 0) Then20 count = 1021 End If2223 Dim rnd As New Random()2425 Dim items As New List(Of String)2627 For i As Integer = 1 To count2829 c1 = CStr(rnd.Next(65, 90))30 c2 = CStr(rnd.Next(97, 122))31 c3 = CStr(rnd.Next(97, 122))3233 items.Add(prefixText + c1 + c2 + c3)34 Next i3536 Return items.ToArray()37 End Function3839End Class
 
Now i know i need to swap out the lines 23-33 and point instead to my sql connection string... right? but how? The random chaaters work but i want to limit the autocomplete to my database
 Thanks Dooie

The data source declared on the ASPX page is out of the scope on the web service. Create a SQL Data Reader and create an array of fish names from within the method.

Nope sorry, im still lost, could explain a little further?

Hi,

You can replace them by creating a SqlDataAdapter to fetch data from database.

Hereis an example of using SqlDataAdapter.

AJAX and window.open dos not work

Hi,

I Have Page that uses AJAX Update panel and with in the panel i have button that contans the following

Response.Write("<script>window.open('default2.aspx',target='new');</script>")

when i click the button exception will happen saying that can not parse from the server.

any one out there that can help me solve this problem..

Thanks

If AJAX is used in your webpage, that script doesn't work anymore.

I guess you could do like below:

<asp:Button ID="btn1" runat="server" Text="OpenNew" OnClientClick="OpenNew();"></asp:Button><input type="hidden" id="hidFlag" runat="server" value="False"/><script type="text/javascript">function OpenNew(){ setInterval('Open()', 100);}function Open(){ flag = document.getElementById('hidFlag'); if (flag) { if (flag.value !='False') { window.open('default2.aspx', target='new'); flag.value ='False'; } }}</script>Code Behind:Protected Sub btn1_Click(byval sender asObject, byval e as EventArgs)Handles btn1.Click hidFlag.value ="True"End Sub

JasonMDLi:

If AJAX is used in your webpage, that script doesn't work anymore.

I guess you could do like below:

<asp:Button ID="btn1" runat="server" Text="OpenNew" OnClientClick="OpenNew();"></asp:Button><input type="hidden" id="hidFlag" runat="server" value="False"/><script type="text/javascript">function OpenNew(){ setInterval('Open()', 100);}function Open(){ flag = document.getElementById('hidFlag'); if (flag) { if (flag.value !='False') { window.open('default2.aspx', target='new'); flag.value ='False'; } }}</script>Code Behind:Protected Sub btn1_Click(byval sender asObject, byval e as EventArgs)Handles btn1.Click hidFlag.value ="True"End Sub

I've got the same issue asazuomar. What if the url for the new window is not fixed but has parameters, let's say, window.open('default2.aspx?query=4323',target='new'), and the "query" parameter has the value from some calculation that occurs inside the event btn1_Click (in your sample). What then?

nistam:

I've got the same issue asazuomar. What if the url for the new window is not fixed but has parameters, let's say, window.open('default2.aspx?query=4323',target='new'), and the "query" parameter has the value from some calculation that occurs inside the event btn1_Click (in your sample). What then?

You can pass the value to the hidden control "hidFlag" or to another hidden control.

<asp:Button ID="btn1" runat="server" Text="OpenNew" OnClientClick="OpenNew();"></asp:Button><input type="hidden" id="hidFlag" runat="server" value="False"/><input type="hidden" id="hidFlagValue" runat="server" value=""/><script type="text/javascript">function OpenNew(){ setInterval('Open()', 100);}function Open(){ flag = document.getElementById('hidFlag'); flagvalue = document.getElementById('hidFlagValue'); if (flag && flagvalue) { if (flag.value != 'False') { window.open('default2.aspx?query='+flagvalue.value, target='new'); flag.value = 'False'; } }}</script>

Code Behind:
Protected Sub btn1_Click(byval sender asObject, byval e as EventArgs)
Handles btn1.Click
hidFlagValue.value = 4323
hidFlag.value ="True"
End Sub

Yes this works, but its not a good way of doing it, with this i will keep the client PC checking on the flag always.

if there is no other way then i will be forced to use it.

But thank you for the help, you code give me many ideas... Thanks

It works fine for me too! I just need to create as many hidden values as the number of parameters.

Thanks.

azuomar:

Yes this works, but its not a good way of doing it, with this i will keep the client PC checking on the flag always.

if there is no other way then i will be forced to use it.

But thank you for the help, you code give me many ideas... Thanks

I knew it's not the best way. However, you could declare a handle variable returned from method "setInterval" and dispose it in method "Open()".

Thanks

Hi,

hope the follwoing will help without setting up the any client side flags :)

string

openPopupJS ="openpopup();";

ClientScript.RegisterStartupScript(

this.GetType(),"openPopupJS", openPopupJS,true);

Cheers,

venky

AJAX and web server controls

Please some one explain me the following in ajax.

1) Is it necessary that I have to use html controls instead of web server control in order to support AJAX in my web page?. (I know we can use Magic AJAX – penal control to do the same. But I don't want to use any third party component or library).

2) As per my understanding in AJAX like technology I can send some information to the server and I can get some info from the server based on the info sent. But if I want to add a new row to my web server datagrid control. How can we do this with AJAX. I mean if I add a blank row to my collection class then how will I reflect that in UI.

3) Is there any simple code sample available in the net that demonstrates the web server control manipulation with AJAX.

Hi,

you can use normal web controls when you use Atlas, which is the AJAX implementation/framework from Microsoft.

For more information and quickstartsplease take a look here.

Grz, Kris.

AJAX and user controls

Hi

First of all, I use AJAX 1.0. I have bumped into following problem. I have aspx page (Default.aspx) with ScriptManager on it. It has header, left menu and content layout. On each of those I have UpdatePanel in which I have PlaceHolder. I use those placeholders to load uc controls.

What I want to acheive is to load default uc-s in every ph on Page Load which works ok. Menu ph will always have default uc loaded. When I click on menu item (which is in menu control on menu uc in menu ph), I want to change header uc and content uc -> load new uc-s in their ph-s. This also works ok but I doubt my method in acheiving this.

My page load code:

1using System;2using System.Data;3using System.Configuration;4using System.Web;5using System.Web.Security;6using System.Web.UI;7using System.Web.UI.WebControls;8using System.Web.UI.WebControls.WebParts;9using System.Web.UI.HtmlControls;1011public partialclass _Default : System.Web.UI.Page12{13#region UC ViewState14public string currentUCM15 {16get17 {18if (ViewState["currentUCM"] !=null)return ViewState["currentUCM"].ToString();19else return null;20 }21set { ViewState["currentUCM"] =value; }22 }23public string currentUCH24 {25get26 {27if (ViewState["currentUCH"] !=null)return ViewState["currentUCH"].ToString();28else return null;29 }30set { ViewState["currentUCH"] =value; }31 }32public string currentUCC33 {34get35 {36if (ViewState["currentUCC"] !=null)return ViewState["currentUCC"].ToString();37else return null;38 }39set { ViewState["currentUCC"] =value; }40 }41#endregion4243 protected void Page_Load(object sender, EventArgs e)44 {45// menu46if (currentUCM !=null)47 {48 phMenu.Controls.Add(LoadControl(currentUCM));49 }50else51 {52 currentUCM ="~/uc/uc_m1.ascx";53 phMenu.Controls.Add(LoadControl(currentUCM));54 }5556// head57if (currentUCH !=null)58 {59 phHead.Controls.Add(LoadControl(currentUCH));60 }61else62 {63 currentUCH ="~/uc/uc_h1.ascx";64 phHead.Controls.Add(LoadControl(currentUCH));65 }6667// content68if (currentUCC !=null)69 {70 phMainContent.Controls.Add(LoadControl(currentUCC));71 }72else73 {74 currentUCC ="~/uc/uc_c1.ascx";75 phMainContent.Controls.Add(LoadControl(currentUCC));76 }77 }78}

Code in my uc_m1.ascx (menu) is as follows:  

1using System;2using System.Data;3using System.Configuration;4using System.Collections;5using System.Web;6using System.Web.Security;7using System.Web.UI;8using System.Web.UI.WebControls;9using System.Web.UI.WebControls.WebParts;10using System.Web.UI.HtmlControls;1112public partialclass uc_uc_m1 : System.Web.UI.UserControl13{14protected void Page_Load(object sender, EventArgs e)15 {1617 }1819protected void mnuMain_MenuItemClick(object sender, MenuEventArgs e)20 {21string currentUCM ="~/uc/uc_m" + e.Item.Value +".ascx";22string currentUCH ="~/uc/uc_h" + e.Item.Value +".ascx";23string currentUCC ="~/uc/uc_c" + e.Item.Value +".ascx";2425// setting ViewState on page26 Page.GetType().GetProperty("currentUCM").SetValue(this.Page, currentUCM,null);27 Page.GetType().GetProperty("currentUCH").SetValue(this.Page, currentUCH,null);28 Page.GetType().GetProperty("currentUCC").SetValue(this.Page, currentUCC,null);2930 PlaceHolder phH = (PlaceHolder)this.Page.FindControl("phHead");31 phH.Controls.Clear();32 phH.Controls.Add(LoadControl(currentUCH));3334 PlaceHolder phC = (PlaceHolder)this.Page.FindControl("phMainContent");35 phC.Controls.Clear();36 phC.Controls.Add(LoadControl(currentUCC));3738// debug39 lblClicked.Text = (Convert.ToInt32(lblClicked.Text) + 1).ToString();40 }41}42

...here I set what gets loaded and override Page Load-s loaded controls, and then use reflection to set ViewState on Page through public property. I tried
to use ViewState directly, but didn't work. Can I update ViewState somehow?
Anyway, when I do this, I get "Failed to load viewstate...control tree doesn't match...".

Is there a way to go arround this? Another solution? Because I would like to use those similar to windows forms, just open form I need. And those uc I load
will have forms on them.

Thanx

If I remove reflection, leave ViewState as is and simply put another update panel in each UC, can I then refresh page only inside UC's update panel and refresh *global update panel based on condition?
Ok, I solved ViewState problem by simply using Session instead. It works better but not correct yet. Also there might be bug in AJAX, I have script error on page saying 0.cells is not object. Problem that remains is how to postback on uc control. My first postback doesnt work, only next ones do. I think it is because of event registration happening too late.

Ajax and JavaScript Arrays

Does anyone know why a new Array Contains data when just created when a script manager is running on the page... I do the following code:

<script language="javascript">
var myArray = new Array();
for (x in myArray)
{
document.write(myArray[x])
}
</script>

And get the output: function (index) { this.splice(index, 1); }

WHY!?!?!??!!?

Hi,

this happens because Array is extended through the prototype object, i.e.

Array.prototype.splice = ...

The solution is to extend Array using "type" methods:

Array.splice = ...

I believe this will be fixed in the next release.

hello.

As always, Garbin is correct. btw, i'd just like to add that, in my opinion, the for each usage in arrays which expects to get only the elements is just a side effect of the way foreach works (in other words, i think that even though everyone uses that for getting the elements of an array, it's not what it was meant for)

Actually you are absolutely right. I have solved the problem and what i did was just remove the:

for (x in Array)

and replace it with:

for (x = 0; x < Array.length; x++)

this seemed to fix it right up. It wasn't the fact that the array actually had those values in it. It's just somehow they array accessed those things when used in the for each statement... As gabin said it has to do with prototyping, which i was not familiar with. Thanks for the help guys, and the explanation.

hello again.

btw, i do believe that if you go the other way around, you'll have amore performant solution (ie, instead of goin from 0 to length, do it the other way around - if you can, of course).

I can't. It seems to always be populated with that data otherwise... I don't see why it would cause better performance. My array lengths are exact and not allocated longer then there last bit of information.

hello.

well, it all dependes on the number of items. check this and let me know:

http://www.devpro.it/examples/loopsbench/

AJAX and ASYNC Pages

All,

I'm looking to implement the following scenario:

1. User clicks on a link.

2. A panel is raised indicating that a long running operation is about to begin.

3. A request to open a new window which will host an async page that will stream a pdf is made.

4. When the callback from the async page returns, I want it to trigger an action on the parent page to hide the progress panel.

Basically any examples of incorporating async page callbacks and ajax update panel callbacks.

Ariel

hello.

why do you need async pages to do this? is the server processing making a long web service call or perfomring an expensive db query?

The popup

http://ajax.alpascual.com/ModalPopup/ModalPopup.aspx

and then the PDF

http://alpascual.com/search/SearchResults.aspx?q=pdf

Hope that helps you finish the project

AJAX acting inconsistently

I have the following scenario:

Default.aspx -- start page (2 drop down lists)

I kept these 2 drop down lists under update panel ...but when i select drop down 1...it is also calling SelectedItemIndexChanged for Drop Down list 2...

When i commented out Updated Panel...then it is working properly...

How can i solve this situtation??

I phared the question in wrong way...

the thing that is happening is:

When i changed the Drop Down List 2, it is first calling SelectedItemIndexChanged of drop down list 1, then it is going to drop down 2 SelectedItemIndexChanged.

When i commented out Update panel...then it is working properly... How to tackle this situtation?