CODEWITHSUNDEEP
phpajaxxmlhttprequest
Milaan
Milaan

Reputation: 245

Ajax request with Javascript

I have a page on which I want to show a couple of MySQL tables.
There is one table on the right that may only change when a different person is selected.
De second table is the main table in the center. I have a dropdown box with contains every person. The results from the selected person is showed in the middle table. There are multiple results for each person so there is a second dropdown box to choose which of these results you want to show. This is al done by a Ajax XMLHTTP request.

The problem is that the right table uses some javascript. I know this is not possible with Ajax in combination with a XMLHTTP-request. But without the javascript I can't make what I want. Is there a way, to show the right table after the javascript is finished doing his work?

I now use frames. This is not very nice. Because I have to style both pages to look nice together, and that's not so easy as said. But this way it is doing as I want it to be.

So I searched the internet (a long time) and just a few minutes before I wanted to give up i found this piece of code (coming from http://www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml): 

function HttpRequest(url){ 
var pageRequest = false //variable to hold ajax object 
   /*@cc_on
      @if (@_jscript_version >= 5)
         try {
         pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
         }
         catch (e){
            try {
            pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e2){
            pageRequest = false
            }
         }
      @end
   @*/

   if (!pageRequest && typeof XMLHttpRequest != 'undefined')
      pageRequest = new XMLHttpRequest()

   if (pageRequest){ //if pageRequest is not false
      pageRequest.open('GET', url, false) //get page synchronously
      pageRequest.send(null)
      embedpage(pageRequest)
   } 
} 

function embedpage(request){ 
   //if viewing page offline or the document was successfully retrieved online (status code=2000)
   if (window.location.href.indexOf("http")==-1 || request.status==200)
      document.write(request.responseText)
   }
}

HttpRequest("external.htm") //include "external.htm" onto current page

This code works perfectly... The first time. As soon as you change the person the whole page disappears and only the table shows up and firefox keeps "loading" the page (you see that circle going round). I do know how to edit the code above to fit my needs but I have no understanding of Ajax or how to fix this problem. Hopefully someone can help me and give me a good solution! And tell me why the code above isn't working properly?

Thanks in advance!

Milaan

Upvotes: 0

Views: 173

Answers (4)

rgin
rgin

Reputation: 2311

jQuery should make things easier for you. Your code should look something like this. 

$.post("somepage.php", function(data){
   $("#divID").html(data);
});

<div id="divID"></div>

And somepage.php could be something like this:

<?php
   // get table content
   echo "<table>...</table>";
?>

Upvotes: 0

Spliffster
Spliffster

Reputation: 7209

You might want to use dom functions to add your downloaded content to the existing document, like:

document.getElementById('mypanel').innerHTML = '<html code goes here>';

The best idea probably would be to use a slim javascript framework lie jquery which helps you with browser compatibility.

Upvotes: 0

jeroen
jeroen

Reputation: 91734

It´s been a long time since I´ve seen code like this, but one problem I can see, is that you don´t include any kind of variable in your XMLHttpRequest; no user ID or anything. Is it just supposed to load a static page?

And is there any reason you can´t use a library like jQuery? It´s no magic bullet but it will make your life and ajax requests a lot easier.

Upvotes: 0

The Scrum Meister
The Scrum Meister

Reputation: 30111

document.write only works when the page is loading for the first time, Once the page rendering is done, calling document.write will clear the page first.

https://developer.mozilla.org/en/document.write

What you might want to do instead is:

if (window.location.href.indexOf("http")==-1 || request.status==200) {
    var elm = document.createElement('div');
    elm.innerHTML = request.responseText;
    document.getElementsByTagName('body')[0].appendChild(elm);
}

Upvotes: 2

Related Questions