AJAX output html

alphacooler · Jul 28, 2006

So in AJAX I want to call a php page that will output a table in a particular order. Then I would simply want to pop that table output into a DIV. Is this possible with responseText or do I need to do something with XML?

I am VERY noobish when it comes to AJAX.

Thanks.

snowboardr · Jul 29, 2006

I know how you feel, but AJAX is pretty easy. Heres how to do it...

create your php file, if you have you won't need <html> and body tags on this file, because the page you are showing it has them...

create a javascript file called

ajax.js

add this code to it:

Code:

var xmlHttp

var LoadHTMLHttp = null;
function LoadHtml() {
    LoadHTMLHttp = createRequestObject();
    var url="yourfile.php"
    LoadHTMLHttp.open('GET', url, true);
    LoadHTMLHttp.onreadystatechange = getLoadHTMLHttpResponse;
    LoadHTMLHttp.send('');
}


function getLoadHTMLHttpResponse() {
    if (LoadHTMLHttp != null)
        if (LoadHTMLHttp.readyState == 4)
            if (LoadHTMLHttp.status == 200)
                document.getElementById('TheCellId').innerHTML = LoadHTMLHttp.responseText;	
				
}



function createRequestObject() {
    var ro;
    /*@cc_on
    @if (@_jscript_version >= 5)
        try {
            ro = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ro = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                ro = false;
            }
        }
    @else
        ro = false;
    @end @*/
    if (!ro && typeof XMLHttpRequest != 'undefined') {
        try {
            ro = new XMLHttpRequest();
        } catch (e) {
            ro = false;
        }
    }
    return ro;
}

then put this code on an html or php page this is where we will test the ajax and you can mess with it after this...

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/ajax.js"></script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td><a href="#" onClick="LoadHtml();">Do Ajax </a></td>
  </tr>
  <tr>
    <td id="TheCellId"></td>
  </tr>
</table>
</body>
</html>

And we are done...

Let me know how it works out for you.

snowboardr · Jul 29, 2006

ps. I forgot to note that the php file you are calling is named yourfile.php in the ajax.js file if you didnt see it... so change that if you need to..

alphacooler · Jul 29, 2006

Snowboadr,

So (it is late here so forgive me if I am missing this) doesn't this just take the outputted test from "yourfile.php" and drop it inside one TD?

"yourfile.php" in my case will be outputting multiple rows worth of data with each row having 3 fields.

The part I am confused about is how do I turn my output from "yourfile.php" into multiple rows of a table when each row has multiple fields (i.e. row1: username, dateJoined, points, etc, then row2: etc).

When you output text on "yourfile.php" and it is returned it isn't HTML code for a table, but just all of my data appended upon itself.

Thanks so much for taking the time to help.

snowboardr · Jul 29, 2006

It will work fine. Whatever you put inside "yourfile.php" will be output in the main page.

so in reality your ajax'd page will look like this: But if you look at the source code after you click "do ajax" you will not see this html in there... but its there

Just do a test run of what i put above, and you will understand...

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/ajax.js"></script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td><a href="#" onClick="LoadHtml();">Do Ajax </a></td>
  </tr>
  <tr>
    <td id="TheCellId">[COLOR=#ff0000]
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>row1</td>
        </tr>
        <tr>
          <td>row2</td>
        </tr>
        <tr>
          <td>row3</td>
        </tr>
      </table>
      [/color]</td>
  </tr>
</table>
</body>
</html>

alphacooler · Jul 29, 2006

Worked! Thanks so much.

Now I just need a script to change a tab sort image so users can have some feedback on which sort they are viewing.

snowboardr · Jul 29, 2006

Im not sure what you mean? Can you explain in more detail?

alphacooler · Jul 29, 2006

So I have my table with all my data in it. At the top of the table I have 3 tabs to change the query. The tabs read "Top Today" | "This Week" | "All Time". I would like it so that when a user clicks on one of the tabs (i.e. "this week") that tab image changes (to a white background to signify that it is selected). Then when a user clicks a new tab, the previously selected tab ("this week") is now back to the original image and now the newly clicked tab has a new image signifiying that it is selected.

I hope this is clear. And thankyou so very much for the help. I have never worked with Javascript before.

snowboardr · Jul 29, 2006

http://stilbuero.de/jquery/tabs/tabs.zip

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

AJAX output html

alphacooler

Programmer

snowboardr

Programmer

snowboardr

Programmer

alphacooler

Programmer

snowboardr

Programmer

alphacooler

Programmer

snowboardr

Programmer

alphacooler

Programmer

snowboardr

Programmer

Similar threads

Part and Inventory Search

Sponsor