How to capture a whole page through Ajax

vasilis · #1 June 26th, 2009, 01:51 PM

I have a list box in a site with which I capture a selected value with the onChange event using the capture_value() function (code listed below).
This function passes 2 arguments, i.e., 'str' which is the selected list box value and 'passed_url' which is a passed url for running a php script (which contains some url query parameters, e.g. 'somescript.php?var1=value1&var2=value2&var3=value3').

The capture_value() function actually sends a Ajax request with the GET method and a URL which is formed by appending the captured list box value to the 'passed_url' url value (i.e. the 'passed_url' is changed to 'somescript.php?var1=value1&var2=value2&var3=value 3&str=value4'.
Now, what I want to do is to capture the whole generated page from running the final 'passed_url' in the same window (as if I entered 'somescript.php?var1=value1&var2=value2&var3=value3 &str=value4' in the location
field of the browser and pressed <Enter>).

In other words, I want to output in the same window the generated page from running the 'somescript.php?var1=value1&var2=value2&var3=value3 &str=value4' url address.

Below is the code listing of the Javascript file I use.
----------------------------------------------------------------------------------

Expand|Select|Wrap|Line Numbers

 var xmlhttp;
 
function capture_value(passed_url,str)

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

  {

  alert ("Browser does not support HTTP Request ");

  return;

  }

//var url="http://www.test.local/ach_handcrfts/product.php";

passed_url=passed_url+"&drawing_style="+str;

passed_url=passed_url+"&sid="+Math.random();

//alert ("url: " + url);

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open("GET",passed_url,true);

xmlhttp.send(null);
 
}
 
function stateChanged()

{

if (xmlhttp.readyState == 4) {

        if (xmlhttp.status == 200) {

           window.open(xmlhttp.responseXML,"_self");
 
        } else {

            alert("Response Error:n" + xmlhttp.statusText);

        }

    }
 
}
 
function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

  {

  // code for IE7+, Firefox, Chrome, Opera, Safari  

  return new XMLHttpRequest();

  }

if (window.ActiveXObject)

  {

  // code for IE6, IE5

  return new ActiveXObject("Microsoft.XMLHTTP");

  }

return null;

}

Now, when I select a value in the list box, the desired page is not generated (nothing happens). When I check
with Firebug, I can see that I have no errors, and
I get the expected GET response in the Firebug console, and when I click on it's console link with the right
button and then click on "Open in New Tab", a new browser window opens with the expected page, but this page is not generated by selecting a value in the list box, i.e. somewhere in the end of the code I need to add some code to output the whole page in the same window.

I am sure it's something simple missing or needing modification.
Could you please somebody help?

acoder · #2 June 26th, 2009, 04:13 PM

Why are you using window.open()? Try something like:

Expand|Select|Wrap|Line Numbers

document.getElementById("container").innerHTML = xmlhttp.responseText;

where "container" is the containing element, e.g.

Expand|Select|Wrap|Line Numbers

<div id="container"></div>

vasilis · #3 June 26th, 2009, 05:23 PM

ok, I had a clue that I was not using window.open method correctly. Now, I want the container to be the browser window itself (the same one). In other words I want to output the page generated from the 'passed_url' script in the same browser window and not in a page element.
Could you please specify the code for this?

acoder · #4 June 26th, 2009, 06:37 PM

If that's the case, then there's no need for Ajax. Just link to the page, e.g. via a form submit, or by changing the location.href property.

vasilis · #5 June 26th, 2009, 07:57 PM

ok acoder, thanks for the help.
I just erased everything having to do with Ajax and added the line:

Expand|Select|Wrap|Line Numbers

window.location.href=passed_url;

and left the rest of the code intact.
So the job is done by refreshing the page.

What though, if I didn't want to have a page refresh and I wanted to capture into the <body> element the part from the xmlhttp.responseText or the xmlhttp.responseXML that is contained in the <body> element in the server response?

The thing is that 'passed_url' generates a page with not only updated values in the list box but also with some generated Javascript code (array values, etc) which I would want to capture with Ajax. So if I captured the whole <body> element content and left the rest intact (<head>, etc) I would get all the generated source for the updated page.
I am not sure if I am correct in my logic....

acoder · #6 June 28th, 2009, 10:37 PM

If I'm following this correctly, what would be best for you is to make an Ajax request to a simple PHP page which simply returns the part that needs changing and change that in the page. If the change doesn't require PHP, then use JavaScript, e.g. if you could store the info. in an array.

To better understand this, post the rest of the relevant code.

How to capture a whole page through Ajax

re: How to capture a whole page through Ajax

re: How to capture a whole page through Ajax

re: How to capture a whole page through Ajax

re: How to capture a whole page through Ajax

re: How to capture a whole page through Ajax

/bytes/development

/bytes/it

/bytes/about