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?

Quote:

---

Originally Posted by PeejAvery

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?

---

The specifics are its a C++/MFC application.

Its a prgram that monitors a bunch of websites within a particular business domain for any changes at most once a day.

Previously the operators had to goto each site manually and try to work out if anything new had been added or anything taken away. Most sites it seems are not written using AJAX and each page has it owns url and can just use CInternetSession to download them as files and compare with the last one downloaded. Huge time saving and operators can now scan lots more.

Problem is now there is an important site written using AJAX that we want to monitor.
So when we add a site using AJAX the above is overridden to download via CWebBrowser control. Initially am deriving from CHTMLView.

Thanks to your help I can now traverse the 'next' links via executing

Navigate2("javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgSearch','Page$12')")

For each page in the set. The current way im detecting when its ready is when the element text
is different from the previous with a sleep and doevents etc. Not confident with this approach and just want an event when download is complete. So then looked like could receive events for individual elements.

Now the problem initially for me was using this language how do you register an event handler
This article explains it.
http://support.microsoft.com/kb/q253915/

Its a little long winded if you look at the internals buts it really just a copy and paste excersise with a few modifications relative to your class.

Against the element receiving the update im executing

_variant_t varFO =
CFunctionObject<CViewHTMLCrawler>::CreateEventFunctionObject(this, &CViewHTMLCrawler::MyEventCallback, DISPID_READYSTATECHANGE);

hr = lpElem2->put_onreadystatechange(varFO);
ASSERT(hr == S_OK);


But the events never fire. Iv added it to the body element too. No events occur in CFunctionObject either, its not just readystatechange not occuring.

Thats where im at, would love to nail this one, one way or the other.

Hope this makes some sense.

[ redirected ]

Quote:

---

Originally Posted by PeejAvery

[ redirected ]

---

What does that mean?

Its nothing to do with the language, that does not matter.
Regardless the client side dom underneath is the same. Its an AJAX and DOM problem?

I redirected this so that it resides in the Visual C++ forum. However, a link to it still remains in the Client-side Scripting forum as well.

This will give you better coverage...and possibly from some people who have influence in both.

Ok thanks PeejAvery.
Others things are getting behind, going to leave it for a day or two then go back and try an isolate why im not receiving any events.