Saturday, March 24, 2012

load page in div using ajax --> ajax functionality lost :s

Hi all,

I found some javascript on the net to load a page in a div. Now the problem is that the loading of the page in the div works, but then when I use ajax-functionality in the page loaded in the div, the page just refreshes.

Here I found the code:http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Here is a simular thread (his issue got resolved but mine not. On his site things seem to work just fine :s):http://forums.asp.net/t/1163067.aspx

Here is my working demo showing what goes wrong:

This is my situation:

    I have 2 pages: Default and Content.Default loads Content on it's page (using the "loading a page in a div"-logic)Content has basic ajax functionality which works from Content itself.Content's ajax func. won't work when it's loaded on Default.
The Default.aspx page (no codebehind to keep it simple):
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Default</title><script type="text/javascript">var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)var loadedobjects=""var rootdomain="http://"+window.location.hostnamevar loadstatustext="<img src='img/loading.gif' /> Requesting content..."function ajaxpage(url, containerid){var page_request = falseif (window.XMLHttpRequest) // if Mozilla, Safari etcpage_request = new XMLHttpRequest()else if (window.ActiveXObject){ // if IEtry {page_request = new ActiveXObject("Msxml2.XMLHTTP")} catch (e){try{page_request = new ActiveXObject("Microsoft.XMLHTTP")}catch (e){}}}elsereturn falsepage_request.onreadystatechange=function(){loadpage(page_request, containerid)}page_request.open('GET', url, true)page_request.send(null)}function loadpage(page_request, containerid){if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))document.getElementById(containerid).innerHTML=page_request.responseText}function loadobjs(){if (!document.getElementById)returnfor (i=0; i<arguments.length; i++){var file=arguments[i]var fileref=""if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceedingif (file.indexOf(".js")!=-1){ //If object is a js filefileref=document.createElement('script')fileref.setAttribute("type","text/javascript");fileref.setAttribute("src", file);}else if (file.indexOf(".css")!=-1){ //If object is a css filefileref=document.createElement("link")fileref.setAttribute("rel", "stylesheet");fileref.setAttribute("type", "text/css");fileref.setAttribute("href", file);}}if (fileref!=""){document.getElementsByTagName("head").item(0).appendChild(fileref)loadedobjects+=file+" " //Remember this object as being already added to page}}}
</script></head><body> <form id="form1" runat="server"> </form> <p> <a href="javascript:ajaxpage('Content.aspx', 'contentarea');">test</a> </p><div id="contentarea"></div></body></html>

The Content.aspx page (also no codebehind to keep it simple):

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" %><script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadMe.Label1.Text = DateTime.Now.ToString End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)Me.Label1.Text = DateTime.Now.ToString End Sub</script><%@dotnet.itags.org. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Content</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><asp:Label ID="Label1" runat="server" Text="" Width="138px"></asp:Label><br /><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </ContentTemplate></asp:UpdatePanel> </div> </form></body></html>

Could anyone please give it a try? I don't know what's going on.
The code above should work! Just make the 2 pages and copy the entire code into it.Thanks!

Kind regards,
Wim

My guess would be that your Content.aspx page contains some sort of window.onload event-handler to wire-up the Ajax stuff, but when you load in Content.aspx into Default.aspx using Ajax its window.onload event will not fire (the window.onload event will already have fired when Default.aspx was loaded).


ijoxley:

My guess would be that your Content.aspx page contains some sort of window.onload event-handler to wire-up the Ajax stuff, but when you load in Content.aspx into Default.aspx using Ajax its window.onload event will not fire (the window.onload event will already have fired when Default.aspx was loaded).

Hi ijoxley,

Thanks for your reply ...

But when I look at my code that's posted above, I don't see anything unusual happening in any onload event.


deblendewim:

But when I look at my code that's posted above, I don't see anything unusual happening in any onload event.

That's true - but its probably hidden away somewhere in the JavaScript generated by the ScriptManager tag.

It might be an idea to add a ScriptManager to the Default.aspx page then writing some JavaScript to handle the DOMNodeInserted event (for when you load Content.aspx into your <div> tag).


Anyone?


hello.i'm not sure on what you're trying to do here, but the approach you're using isnot the best to use if you're using asp.net ajax. ok, regarding your problem, i agree with the previous answeres you've received: the client portion of the asp.net ajax platform needs to run several pieces of code during the load event of the page. when you load a page like that, you're not getting that event and this means that your updatepanel won't be ready for patial postbacks.in my opinion, you should use only one page and if you need to change the contents of the page, then you can use one or more usercontrols to achieve that (instead of having several pages that are loaded into the center of your main page).

No comments:

Post a Comment