Ajax request with Javascript

Question

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

The Scrum Meister · Accepted Answer · 2011-01-25 18:21:47Z

2

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);
}

answered Jan 25, 2011 at 18:21

The Scrum Meister

30.2k8 gold badges69 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Milaan Over a year ago

Wat should i change it into then? I tried: <code> document.getElementById('maintable').innerHTML = response Text; </code> But that didn't work either... Or did I make a mistake?

jeroen · Accepted Answer · 2011-01-25 18:24:12Z

0

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.

answered Jan 25, 2011 at 18:24

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

5 Comments

Milaan Over a year ago

Well this was an example I used from internet, I thought my version which includes some variables didn't made any difference. I know jQuery, but is that better? Is it easier? I know some basics from it, so I would have to learn everything (including Ajax?).

jeroen Over a year ago

@Milaan, I think it would be good to get rid of the frames (with or without jQuery) and you could use the most basic ajax request to put the output of your php scripts directly where you want it using .load(): api.jquery.com/load

Milaan Over a year ago

Thanks jeroen! That is indeed a better way than my frames (I never use them myself but it seemed the only solution). Should I do the middle table also with jQuery? It might be better if I did, right?

jeroen Over a year ago

@Milaan I would use the same methods for everything, that makes things easier to maintain in the future.

Milaan Over a year ago

Thank you very much! :) This definitely helps me al lot! I'll get started on it asap!

Spliffster · Accepted Answer · 2011-01-25 18:29:21Z

0

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.

answered Jan 25, 2011 at 18:29

Spliffster

7,2592 gold badges27 silver badges21 bronze badges

1 Comment

Milaan Over a year ago

Jeroen said the same thing. So the best thing for me is to see how jQuery works with AJAX-requests. So I let jQuery run an Ajax request, which returns the tables and then let the jQuery run an Javascript over the returned table?

rgin · Accepted Answer · 2011-01-25 19:32:56Z

0

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>";
?>

answered Jan 25, 2011 at 19:32

rgin

2,3014 gold badges24 silver badges33 bronze badges

1 Comment

Milaan Over a year ago

Thanks for you answer! This is indeed a lot better. I knew jQuery already but not that it could do all this. This is indeed much handier. Thanks!

Collectives™ on Stack Overflow

Ajax request with Javascript

4 Answers 4

1 Comment

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related