doPostBack then view source not updated

Hi,

I am landing on a page which lists a few thousand entries. When you land on the first page you get to see the first 20 items and then to navigate through the rest you have lots of next page links.

Internally these are navigated to by postbacks of the form below:

href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgSearch','Page$3')">


When i say click on 'Page 3' the browser view is updated with fresh data for page 3 but when I then view source, what i see is still page 1 data. So the view has updated but view source has not been updated?

Can anybody explain to me whats going on here?

Thanks.

That's because it's using AJAX. Your computer is sending a request for data. Then, JavaScript updates the HTML contents. However, the page's source is not changed.

Quote:

---

Originally Posted by PeejAvery

That's because it's using AJAX. Your computer is sending a request for data. Then, JavaScript updates the HTML contents. However, the page's source is not changed.

---

Ok.

But is there a way underneath programatically to get at this new data as it must be there for when i then click on subsequent links that are only in the new page?

I am using the document object model I say retrieve the body page element after each download but its still just the first page?

Thanks.

Using responseText or responseXML you can see what information the server has sent back. No matter what, it won't update the actual source of the page, because the source hasn't changed.

Or using DOM will always give you the actual, current structure.

Quote:

---

Originally Posted by PeejAvery

Using responseText or responseXML you can see what information the server has sent back. No matter what, it won't update the actual source of the page, because the source hasn't changed.

Or using DOM will always give you the actual, current structure.

---

Thats what I mean I am using the DOM. But when i get the main body element and then get the html\text from this it is still the first page. Where is it hiding the updates?
Does anyone know how to get this from the DOM?

Thanks.

Are you sure you are looking at the DOM nodes which were updated?

Quote:

---

Originally Posted by PeejAvery

Are you sure you are looking at the DOM nodes which were updated?

---

I think it must be something to do with this, as it must be in there somewhere.

I assumed by taking the body element that would include all its children( including any that have been changed) and then taking the full text from this? That it has derived its text from iterating through all its children. Maybe for performance it has cached the source?

You should walk the DOM if you want all child nodes. Here's a simple example.

Code:

---

function walkDOM(obj) {
  // obj is the current DOM object
  alert(obj.innerHTML);

  node = node.firstChild;
  while (obj) {
    walkDOM(obj);
    node = node.nextSibling;
  }
}

// call the walk function
walkDOM(document.getElementsByTagName('body')[0]);

---

Certianly you leading me onto AJAX is a big help.
Here is a good article on the subject although taken more from the perspective of a web-developer needing to debug the generated source

http://ericappel.net/blog/ViewHTMLSo...tedByAJAX.aspx

It certainly is there as when viewing the page with the update but where 'view source' still only returns the original page, you can enter the following into the address bar

javascript:'<xmp>' + window.document.body.outerHTML+ '</xmp>'

Which then gives you the generated source.

I have something working now. By taking the text from the main body element after each internal navigation via the doPostBack.

But have some problem with events, as the document is not downloaded no DocumentComplete event is being fired and its not clear what event to intercept for when its finally downloaded.

I am comparing current source with previous source(with some optimisations) inbetween DoEvents and its working nicely but im aware this is not the proper way to do it. Ok for proof of concept.

Im not familar with the DOM up till now just always overridden the stock events that come with the browser control wrapper.

For these internal updates I really would like to just get at the element being updated. I assume an element within the html page has an id of 'ctl00$ContentPlaceHolder1$dgSearch'

Is there not a search function to return a HTMLElement with this id, or must you traverse all the nodes comparing each one?

Thanks for your help so far

To get an element by ID directly, you can use document.getElementById('ID_HERE'). But, I'm guessing that ctl00$ContentPlaceHolder1$dgSearch is part of a reference to a JavaScript framework. The only other place I have seen a naming scheme similar to that is on MySpace.

Ok, that id is used on the server side it seems, i found the corresponding one for the client side and am able to retrieve the element successfully.

My one problem now is how do you determine using the DOM when this AJAX update has completed?

I have update problems now, of when exactly i can go and retrieve the latest text for this element?

Thanks.

You need to wait until the readyState has changed.

Sounds to me like you should go brush up a little more on AJAX from W3Schools.

Quote:

---

Originally Posted by PeejAvery

You need to wait until the readyState has changed.

Sounds to me like you should go brush up a little more on AJAX from W3Schools.

---

Thanks for that.. im not actually a web-developer it working out how to do that in my client app via the DOM.

I am using the WebBrowser control and handling events this way. I am using the ready state for detecting when a document download is complete but for AJAX these events are not 'bubbling' up to the webbrowser control.

So i guess in this context the readystate is only firing for this specific element?

If you're attempting to handle this through a control, then you are severly limited. The WebBrowser control cannot directly access JavaScript events...which is what readyState is.

Out of curiosity, are you writing this in VB.NET? C#? What language?