Problem in AJAX Autocomplete

Hi i am using Autocompletion feature in my project for loading cities with matched keys in textbox using AutoCompleteExtender of Ajax Toolkit. Its working fine but when i use the same code in User control (.ascx) file, then i can't work. and also when i use the same code for autocompletion in URL Friendly Urls then the page hang out can any one told me why this happen and how i use AutoCompleteExtender efficiently in my project. My complete coding is shown below.

.aspx page.

<asp:TextBox ID="txt_search_city" Width="130px" runat="server">

<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="txt_search_city"
ServiceMethod="GetCompletionListWithContext" UseContextKey="true" MinimumPrefixLength="2"
EnableCaching="false" CompletionSetCount="20" CompletionInterval="2000" FirstRowSelected="true"
DelimiterCharacters=";," />

Code behind Section:

<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetCompletionListWithContext(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
If Not contextKey = Nothing Then
Return "this is a total of fifteen words that will be returned when we use context".Split(" ")
End If
If count = 0 Then
count = 20
End If
Dim items As New System.Collections.Generic.List(Of String)
'get data from database
Dim _loc As New Locations
Dim str As String
Dim ds As DataSet = _loc.Load_Cities(prefixText, count)
If ds.Tables(0).Rows.Count > 0 Then
Dim i As Integer
For i = 0 To count - 1
str = ds.Tables(0).Rows(i).Item("city").ToString()
If ds.Tables(0).Rows(i).Item("StateProvince").ToString() = "Rentals" Then
str = ds.Tables(0).Rows(i).Item("city").ToString() & " - " & ds.Tables(0).Rows(i).Item("CountryCode").ToString()
Else
str = ds.Tables(0).Rows(i).Item("city").ToString() & " - " & ds.Tables(0).Rows(i).Item("StateProvince").ToString()
End If
items.Add(str)
Next
End If
Return items.ToArray()
End Function

Waiting for some helpful response.

Thanks.

You may need a ScriptManager or a ScriptManagerProxy control in the user control.

Hi thanks for your reply...

I have already place Script manager on page rather than user control. is it not ok, and also when i am using auto complete on User Friendly URL Like http://www.abc.com/categories/232/auto.aspx then complete page is hang out. what will be the possible cause here for autocomplete control.

Thanks.

media_1408:

when i use the same code in User control (.ascx) file, then i can't work.

The code in a user control can't be accessed from client side directly, that's because request for file extension .ascx is blocked.

media_1408:

also when i use the same code for autocompletion in URL Friendly Urls then the page hang out

The ajax extension uses the virtualPath of current page to get an instance of the corresponding object and invoke a method on it with Reflection, and it's likely to fail to work when url rewriting is enabled. Since the a file can't be found with the user friendly URL.

In my opinion, a better idea is to use Web Service rather than a Page Method. And don't apply any rewriting rules to .asmx file extension.

Thanks a lot for your wonderful help, as user control problem is not solved and also it is not big issue, but by using Web Service rather than a Page Method, page hanging problem due to auto completion is also solved on URL Friendly Urls.

Thanks.

Problem in finding dynamically loaded user control in javascript when using ASP.Net AJAX

Hi,
I am loading user controls dynamically in an update panel. User control loads smoothly, but when i viewsource the page, the current loaded user control can't be found there. What I found is old user control which loads when page is loaded for the first time. I have a grid view control in that user control which i want to validate using javascript, but this grid view control can't be found by javascript 'getElementById' function. How can i access grid view and other controls in javascript?

Thanks in advance.
Regards

Amjad Paracha, MCP
Software Engineer.

Seehttp://forums.asp.net/t/1149634.aspx

My guess is that your ID is incorrect when you are trying to access the control.

-Damien

amjad.paracha:

Hi,
I am loading user controls dynamically in an update panel. User control loads smoothly, but when i viewsource the page, the current loaded user control can't be found there. What I found is old user control which loads when page is loaded for the first time. I have a grid view control in that user control which i want to validate using javascript, but this grid view control can't be found by javascript 'getElementById' function. How can i access grid view and other controls in javascript?

Thanks in advance.
Regards

Amjad Paracha, MCP
Software Engineer.

What you are experiencing is the reality of how a browser actually works. The source code that you download on page load is not fixed. Its image in browser computer memory can be altered dynamically (especially by Ajax updates) and that is why the source does not reflect it. If you want to see much more closely what is going on in the page, download and install the IE Developer Toolbar (or another browser DOM viewer). This will show the current DOM and you may in fact find that the Id you are looking for is either not there or it is set as a ClientID (a property of most controls) which does not match the original ID. This would be true for instance of any ordinary control in a tab panel. They will not have the same ID you assigned on the server. As well any control in a repeating control will be assigned a new client id.

AFAIAC every develper that develops without a tool that can see the DOM as it exists is working blind. As a bonus, the IE Developer Toolbar has the ability to modify styles on the fly so you can see what they do, trace styles and a few other things.

Problem in Speeding Up First Load of this page...

Improving Response Loading

Hi,

Is there a guide in improving loading performance when using atlsa controls liek update panel, tabcontainer and tabpanels, multiview and view, Gridview, composite controls, web user controls, updateprogress and other asp.net web controls together in a web user control. I have this user control that contains 2 tabcontainers, first, has 3 tabpanels, second,
is contain as child tabpanel of one of outer tabpanels, has 6 tab panels, currently 3 of these tab panels has usercontrols, 2 outer tabpanels has gridview in them.

Is there a way to speed up loading for first time? Any ideas, I time first load of this page, it time between 4 to 6 seconds, sometimes even 9 seconds.

Basically AddButtonAttribute(), GetPostBackAugument(), GetGlobalParameter(), PopulateFilterDropDown(), PopulateFilterDropDown(), and RestrictTabs() and base.OnLoad(e) are executed when this page is loaded for first time.

protected override void OnLoad(EventArgs e) { AddButtonAttribute();//Add Attribute javascript functionstring args = GetPostBackArgument();//Get _PostBack(control, argument)string tabPage = GetGlobalParameter();//Get a global hidden field valueif (!Page.IsPostback) {if (tabPage !=string.Empty && args !="Redirect") RedirectTabPage(viewPage);//Where a TabPanel speciifc function is handled including loading usercontrol to this usercontrol }else {if (tabPage !=string.Empty && args !="Redirect") RedirectTabPage(tabPage);//Where a TabPanel speciifc function is handled including loading usercontrol to this usercontrolelse if (args =="ContentRedirect") PopulateFilterDropDown();//Populate 3 Dropdownlist controls } RestrictTabs();//Restrict Tabpanelsbase.OnLoad(e); }

Structure like this xml:

4 usercontrols

<hiddenfields = 14>
<UpdatePanel>
<TabContainer>
<TabPanel>
<MultiView>
<View>
<UpdateProgress></UpdateProgress>
<control></control>
<GridView></GridView>
<control></control>
</View>
<View>
<Table>
<control>
</control>
<control>
</control>
</Table>
</View>
</MultiView>
</TabPanel>
<TabPanel>
<MultiView>
<View>
<UpdateProgress></UpdateProgress>
<control></control>
<GridView></GridView>
<control></control>
</View>
<View>
<Table>
<control>
</control>
<control>
</control>
</Table>
</View>
</MultiView>
</TabPanel>
<TabPanel>
<TabContainer>
<TabPanel>
<Table>
<control>
</control>
<control>
</control>
</Table>
</TabPanel>
<TabPanel>
<Table>
<control>
</control>
<control>
</control>
</Table>
</TabPanel>
<TabPanel>
<Table>
<control>
</control>
<control>
</control>
</Table>
</TabPanel>
<TabPanel>
<UserControl></UserControl>
</TabPanel>
<TabPanel>
<UserControl></UserControl>
</TabPanel>
<TabPanel>
<UserControl></UserControl>
</TabPanel>
</TabContainer>
</TabPanel>

</TabContainer>
</UpdatePanel>

Thabks in advanced.

I was wondering using Session to replace HiddenFields to speed up loading, and put controls found inside tab into a user control and loading them when it is needed, will this speed up loading process a lot?

Try this set

<% @.Page Trace="True" %>The trace information will show you exactly how large your ViewState is for that page.

try to figure out which controls you can disable the ViewState for (EnableViewState="False") or what might be causing your ViewState bloat.

Check debug="false" is et or not in web.config, it will improve some performance

Problem loading AJAX in login page

Hi All

My system uses Forms Authentication and in the Login page (first page) I get error in AJAX:

'Sys' is undefined
Sys.Application.initialize();

BUT after I enter, the next page (using AJAX too) opens correct without error AND if I return to login page, works too!
I think that is because after login, the other page create javascript files.. but the code of this pages is the same

So I want to know if this is a permission problem (because forms authentication maybe deny) or I need to do something for Login page create ajax files.

thanks! Oscar.

Could you mind posting your login page code.

LOGIN.aspx.Vb Code:

<formid="form1"runat="server"> <asp:ScriptManagerID="ScriptManager2"runat="server"></asp:ScriptManager> <asp:LabelID="Label1"runat="server"Font-Names="Verdana"Font-Size="Smaller"Style="position: static; top: 0px"Text="Username:"></asp:Label><asp:TextBoxID="txtUsername"runat="server"Style="position: relative;"></asp:TextBox><asp:LabelID="Label2"runat="server"Font-Names="Verdana"Font-Size="Smaller"Style="left: 0px; position: static; top: 0px"Text="Password:"></asp:Label><asp:TextBoxID="txtPassword" runat="server"Style="position: relative;"TextMode="Password"></asp:TextBox> <asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><asp:ButtonID="btnSignIn"runat="server"Style="position: static"Text="Sign In"/><asp:PanelID="Panel1"runat="server"Height="50px"Style="position: static"Visible="False"Width="368px"><asp:TextBoxID="txtEmail"runat="server"Style="position: relative"></asp:TextBox> <asp:ButtonID="btnRecover"runat="server"Style="position: relative"Text="Send"/></asp:Panel>

</ContentTemplate> </asp:UpdatePanel></form>

***************************************************************************************

My web.Config:
<?xmlversion="1.0"?><configuration> <appSettings/> <connectionStrings/> <system.web> <compilationdebug="true"> <assemblies> <addassembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addassembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/> </assemblies> </compilation> <authenticationmode="Forms"> <formsloginUrl="BackOffice/Login.aspx"defaultUrl="main.aspx"name="Passacaille"timeout="30"path="BackOffice/"/> </authentication> <authorization> <denyusers="?" /> </authorization> <pages> <controls> <addtagPrefix="asp"namespace="Microsoft.Web.UI"assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addtagPrefix="asp"namespace="Microsoft.Web.UI.Controls"assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </controls> <tagMapping> <addtagType="System.Web.UI.WebControls.CompareValidator"mappedTagType="Microsoft.Web.UI.Compatibility.CompareValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addtagType="System.Web.UI.WebControls.CustomValidator"mappedTagType="Microsoft.Web.UI.Compatibility.CustomValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addtagType="System.Web.UI.WebControls.RangeValidator"mappedTagType="Microsoft.Web.UI.Compatibility.RangeValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addtagType="System.Web.UI.WebControls.RegularExpressionValidator"mappedTagType="Microsoft.Web.UI.Compatibility.RegularExpressionValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addtagType="System.Web.UI.WebControls.RequiredFieldValidator"mappedTagType="Microsoft.Web.UI.Compatibility.RequiredFieldValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addtagType="System.Web.UI.WebControls.ValidationSummary"mappedTagType="Microsoft.Web.UI.Compatibility.ValidationSummary, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </tagMapping> </pages> <httpHandlers> <removeverb="*"path="*.asmx"/> <addverb="*"path="*.asmx"validate="false"type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addverb="GET"path="ScriptResource.axd"type="Microsoft.Web.Handlers.ScriptResourceHandler"validate="false"/> </httpHandlers> <httpModules> <addname="WebResourceCompression"type="Microsoft.Web.Handlers.WebResourceCompressionModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <addname="ScriptModule"type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </httpModules> </system.web> <locationpath="BackOffice/Login.aspx"> <system.web> <authorization> <allowusers="?" /> </authorization> </system.web> </location> </configuration>

I believe that the problem still in web.config

The Problem is in your Login.aspx page, You forgot to put a ScriptManager.

There's a ScriptManager there.

My guess is that the deny authorization means the scripts (WebResource.axd, ScriptResource.axd) aren't being loaded. Try allowing those resources to get through?

You can easily tell if that's the problem by using Fiddler or Nikhil's Web Development Helper to monitor the HTTP traffic to see which request is failing.

Steve,
You're right, when I allow resources page works

This is the code that I added and now always generate javascript for asp.net

<locationpath="ScriptResource.axd">
<system.web>
<authorization>
<allowusers="?" />
</authorization>
</system.web>
</location>

thank you all

Problem loading saved data back into dropdownlist

I'm completely new to ASP.NET and Ajax, having quickly inherited a project from a consultant who is no longer with us.

Have a form with C# codebehind, and all this is running inside some Ajax components (tabcontainer and update panels). One dropdownlist (SystemID) determines the filtered values in a second dropdownlist (TypeID). In the page, there's the following to determine the source for each list:

<asp:SqlDataSourceID="sqlSystem"runat="server"

SelectCommand="Select Distinct '0' As SystemID, '(Select)' As Description From CMSSystem UNION

Select SystemID,Description From CMSSystem Where Active='1'">

</asp:SqlDataSource>

<asp:SqlDataSourceID="sqlType"runat="server"

SelectCommand="Select Distinct '0' As TypeID, '(Select)' As Description From CMSType UNION

Select TypeID, Description from CMSType Where SystemID = @dotnet.itags.org.SystemID">

<SelectParameters>

<asp:ControlParameterControlID="cboSystem"Name="SystemID"PropertyName="SelectedValue"/>

</SelectParameters>

</asp:SqlDataSource>

When I complete an empty form, the linking between the lists is fine. Select a value from SystemID, then I can select a value from TypeID that has been filtered.

The problem is on trying to load existing data. I have a procedure call inside Page_Load that loads existing values onto the form. Text boxes and checkboxes are just fine, and standalone dropdownlists are fine. I can load SystemID from a dataset row, but when I try to do the same for TypeID (trying to lookup the saved value in the list of filtered items), I find that the items collection is completely empty - and therefore, I get a null selectedvalue. What I'm guessing is that the SqlDataSource isn't "firing" (?) for the TypeID for some reason at the time of Page_Load, so I have no data to bind to the control.

Is that a good assumption, and if so, how can I get around this? I've been floundering around for a couple of weeks with this, and need any assistance I can get.

How about using the Page's Prerender event for that, instead of Load? Alternatively, you could handle theSqlDataSource's Selected event.

Didn't see any change with Page_PreRender instead of Page_Load.

I have this hunch that the SqlDataSource isn't being re-evaluated when I manually set the first dropdownlist's SelectedIndex (based on the previously saved, now retrieved, data). It must be a matter of timing or something. Trying to execute this codebehind:

if (dsRequestDetails.Tables[0].Rows[0]["SystemID"].ToString() !="")

{

liFind = cboSystem.Items.FindByValue(dsRequestDetails.Tables[0].Rows[0]["SystemID"].ToString());

cboSystem.SelectedIndex = cboSystem.Items.IndexOf(liFind);

}

if (dsRequestDetails.Tables[0].Rows[0]["TypeID"].ToString() !="")

{

liFind = cboType.Items.FindByValue(dsRequestDetails.Tables[0].Rows[0]["TypeID"].ToString());

cboType.SelectedIndex = cboType.Items.IndexOf(liFind);

}

populate the second dropdown at the ondatabound event of the first drop down. This will solve your problem

Problem Loading URL into Div

On a website I am working on I am trying to load another page into a div on the the page the user does his work from. What I have works correctly in FireFox, but not in IE. I've rummaged Google for quite a bit and found similar problems, but no set solutions.

Here is the JavaScript I have to load a URL into a Div:
function setResponseHtml(pUrl, pDiv) {
var lHttp = getHTTPObjectHtml();
var lUrl = pUrl;
lUrl = lUrl.replace("+","%2b");
if (isBusy) {
lHttp.onreadystatechange = function () {}
lHttp.abort();
}

lHttp.open("GET", lUrl , true);
lHttp.onreadystatechange = function() { getHttpResponseText(pDiv, lHttp); };

if (window.XMLHttpRequest) { // Mozilla check
if (!isBusy) {
isBusy = true;
lHttp.send(null);
}
} else { // IE Check
isBusy = true;
lHttp.send(null);
}
}

function getHTTPObjectHtml() {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return http_request;
}

function getHttpResponseText(pDiv, pHttp) {
var lHttp = pHttp;

if (lHttp == null) // just in case!
lHttp = gHttp;

if (lHttp.readyState == 4) {
isBusy = false;

var status = "";
try {
status = lHttp.statusText;
if (lHttp.status == 200) {
var htmlDocument = lHttp.responseText;
document.getElementById(pDiv).innerHTML = htmlDocument;
}
} catch(e) {
status = "Trouble accessing it";
document.getElementById(pDiv).innerHTML = e.message;
}
} else {
if (getAjaxLoadingMessage() != '' && getAjaxLoadingMessage() != null) {
// only display a loading message if it is defined
setVisible(pDiv, true);
document.getElementById(pDiv).innerHTML = getAjaxLoadingMessage();
}
return;
}
}

var gAjaxLoadingMessage = '<b>Loading...</b>';

function setAjaxLoadingMessage(pMessage) {
gAjaxLoadingMessage = pMessage;
}

function getAjaxLoadingMessage() {
return(gAjaxLoadingMessage);
}

This is called from the HTML via: setResponseHtml(urlString, divString);
urlString is a string containing the URL that I wish to load in the div, and divString a string containing the id of the div I wish to load the URL into.

I've tested my code on IE before and it worked properly with a very small file with nothing in except for a couple words. I think the problem may go back to these pages, both the one the users calls the function from and the page to be loaded, contain SharePoint Web Parts. That is the only difference I can think of between the original pages I used to test the code and the pages I am working with now.

An error occurs in IE when trying to load the Div, the error being "[object Error]" and the error message being "Unknown runtime error" if I print e and e.message respectively from the getHttpResponseText function.

This is the section of code where the error occurs:
try {
status = lHttp.statusText;
if (lHttp.status == 200) {
var htmlDocument = lHttp.responseText;
if (gAjaxForeground) {
setVisible(pDiv, true);
}
document.getElementById(pDiv).innerHTML = htmlDocument;
}
} catch(e) {
status = "Trouble accessing it";
document.getElementById(pDiv).innerHTML = e.message;
}

I can't figure out exactly why the error is happening, nor how to correct it. If I change the line "document.getElementById(pDiv).innerHTML = htmlDocument;" to "document.getElementById(pDiv).innerHTML = 'Any text here';" I recieve no errors, so apparently IE doesn't like setting the innerHTML of the page to be loaded to the statusText. Why that is and how to fix it is what I'm hoping to find out.

Just a quick question... why aren't you using IFRAME (or whatnot) for something like this. If you're loading an entire page, you're going to have issues like duplicate HTML and BODY tags.

-Damien

The main reason behind using a DIV is because the content from the page being loaded into the div is dynamic content, and the DIV will resize automatically if needed. One other thing to note is that this DIV tag isn't always visible on the page. When the user mouses over an item on the page a pop-up comes up displaying additional information about the object, as well as allowing the user to edit such information, which is where the AJAX comes in - allowing the user to edit the information without straying away from this page, and the page being loaded into the pop-up is the page that has done the update and is displaying the results. I haven't worked with IFRAMEs that much, but from my understanding all of this is not that possible with them - correct me if I'm wrong. I have thought about about duplicated tags, but in the past and during my testing I've never experienced any problems by having such.

Well, you can't push an HTML string into an IFRAME, but you can load a URL. Think of an IFRAME like your DIV; it's a container. You can perform client-side logic with it (e.g. show/hide) and it's the way to host another page inside a page (like you are doing).

Seehttp://en.wikipedia.org/wiki/IFrame andhttp://msdn2.microsoft.com/en-us/library/ms537627.aspx.

Using the DIV and having duplicate HTML and BODY (not to mention HEAD, etc) will cause issues; plus it's not well formed at all.

Hope this helps you.

-Damien

With a bit of help from someone and a bit more searching online I discovered the cause of my problem. Thought I'd post the actual reason for the problem and my resolution here for anyone that might be having similar issues.

The reason for the Runtime Error were Element Prohibitions within the HTML. The DIV that I was trying to insert into was surrounded by FORM tags and the page I was trying to insert into the DIV had FORM tags within it. To put it simply: You cannot have a FORM inside of a FORM.

See this URL for more information: http://www.w3.org/TR/xhtml1/#prohibitions

IE upholds this, where as Firefox doesn't care and just renders it on screen how it thinks the output should look which is why I was having this problem only in IE.

I couldn't remove the FORM tags because the website I am working on is a SharePoint site that uses Web Parts (which are required to have FORM tags around them - if I removed them I got errors that bluntly said FORM tags were needed). So, to overcome this I modified the function getHttpResponseText() (See my first post to view the code). Rather than dump the repsonseText straight into the innerHTML of the DIV tag I used indexOf to find the start and end of the data that I specifically wanted (in my specific case one table on the page) and used a substring to cut that out from the responseText and dump that into the innerHTML of the DIV, thus eliminating the FORM tags.

No iFrames involved and everything works splendid. :p

On a side not, I went to set my thread to 'Resolved' and it was already set at that. I definitely never did that since I didn't have a resolution until today. If code in the forum did that, I would correct it ASAP. If a person did that, I would smack him/her for not reading the thread properly. Suggesting to use an iFrame as an alternative was never a solution. It was just what I said - an alternative where the original problem still remained. The reason for the error, nor a solution to fix it never existed in this thread until the post I am making now.