...

View Full Version : AJAX page call and document.write



rswyatt
01-09-2007, 02:51 PM
I'm having a perplexing problem and perhaps could use some help.

Here is the deal... I have a site that needs to be JavaScript and non-JS friendly.

In one particular place I have a radio button group. I have 'onClick' for each element which calls an AJAX routine to display data in a <div></div>

That all works great. I also have a <noscript></noscript> button which submits a form to do the same thing for non-JS users.

That all works great.

Now - in the data in the div is another form... That form has a button which I'd like to write with an onClick to refresh that <div>. However - I'd also like to write a non-JS friendly button to refresh the whole page via a form submit.

I was thinking of doing that by writing the JS friendly button with document.write and then a <noscript> in the page for non-JS.

document.write'ing the button in doesn't work. Can anybody articulate to me how I might accomplish what I'm trying to do?

(I'm attempting as few total page refreshes as possible for JS-friendly browsers)

Much thanks!

nikkiH
01-09-2007, 03:13 PM
document.write is the very old way of doing things, and had a lot of problems (as you're noticing). Use the DOM methods of createElement and appendChild instead. Or you can "cheat" with innerHTML, which is not a DOM method, but last I checked, works pretty well in most browsers.

HTH

rswyatt
01-09-2007, 04:03 PM
Where would I implement these?

Within the AJAX routine where I assign the AJAX response to the innerHTML for the DIV or can I do that within the page being called (to get the response from)?

It seems that any javascript within the page being called by the AJAX does not work (alert, etc)...

ALSO - I ran into something strange... In FireFox 2.x - if I right-mouseclick within the area that the AJAX div is written - it freaks out and adds all kind of white space and in effect places everything above to below a big white block. Any thoughts?

nikkiH
01-09-2007, 05:10 PM
Where would I implement these?

They mostly replace document.write.
So, wherever you had that.
Hard to say without seeing your code.




It seems that any javascript within the page being called by the AJAX does not work (alert, etc)...


I've seen many implementations of AJAX behavior, so I'm not sure what you're doing. In general, all javascript will run on the client. So, it may be that you're trying to do something before it has hit the client, or perhaps your references are incorrect.

Need to see code (enough to debug, like a test page that illustrates the problem) or it's all just me guessing at things you might not even be doing.

Test pages are great, as they help isolate issues. Sometimes one piece of code makes another piece get wonky, and you assumed it was piece 1 causing the problem when it was actually a problem only when you put the 2 pieces together.

Pyth007
01-09-2007, 05:10 PM
Not sure about your second problem (strange...)

As to the first, the responseText to an AJAX call is simply that -- text. You could do something like:


document.getElementById('responseDiv').innerHTML=ajaxCall.repsonseText;

which will simple put the text returned by the server into the <div>

Or if you wanted to actually run JS code, you could use the JSON-like method of eval'ing the responseText:


eval(ajaxCall.responseText);


In the latter case, the server could spit back the text "alert('Hello World!');" and the eval() function will run the string as though it were an actual JS code.

rswyatt
01-09-2007, 05:19 PM
Not sure about your second problem (strange...)

As to the first, the responseText to an AJAX call is simply that -- text. You could do something like:


document.getElementById('responseDiv').innerHTML=ajaxCall.repsonseText;

which will simple put the text returned by the server into the <div>

Or if you wanted to actually run JS code, you could use the JSON-like method of eval'ing the responseText:


eval(ajaxCall.responseText);


In the latter case, the server could spit back the text "alert('Hello World!');" and the eval() function will run the string as though it were an actual JS code.

Ok - I tried 'eval'ing the response text and that gave me a 'syntax' error.

Here is what I'm doing..

This is my 'ajax.js':



var theresponse = "";

function parseSettings(divName,addButton){
//alert(addButton);

var thediv = document.getElementById(divName);
//alert(theresponse);


if(addButton == 'true')
{
var srchstart = theresponse.search("<script type='text/javascript'>document.write");
var srchend = theresponse.search("</script>");
//alert(theresponse.substring(srchstart,srchend));
// let's get the onClick setting
var onclkstart = theresponse.search("onClick=");
var onclkend = theresponse.search('\\); />"\\);</script>');

// now - get the first part of the response
var thepageresponse = theresponse.substring(0,srchstart);

// now add in the onclick
thepageresponse = thepageresponse+'<input type="button" value="Go" onClick="'+theresponse.substring(onclkstart+8,onclkend)+') ;"/>';
thepageresponse = thepageresponse+theresponse.substring(srchend+9,theresponse.length);

thediv.innerHTML = eval(thepageresponse);
}
else
{
thediv.innerHTML = theresponse;
}




//document.getElementById(divName).innerHTML = theresponse;
}

function obtainSettings(path,divName,addButton){
//alert(addButton);
//alert(path);
var therequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
therequest.onreadystatechange = function()
{
if (therequest.readyState == 4)
{
if (therequest.status == 200)
{

theresponse = therequest.responseText;

//tried eval(therequest.responseText) above and got a 'syntax' error
//alert(theresponse);
if(addButton == 'true')
{
parseSettings(divName,'true');
}
else
{
parseSettings(divName,'false');
}

}
else {
alert('Error File '+ therequest.statusText);
}
}
}
var forceGET = "&n="+ parseInt(Math.random()*999999999);
therequest.open("GET", path+forceGET, true);

therequest.send(null);

}




This is the page being called... the <script> is not being run in this page after I retrieve innerHTML and display in the <div> (this page is what gets the contents for the page)




<?php

## search include

extract($_GET);
extract($_POST);

if($searchtype == "entire")
{
?>
<div>This type of search (<?=$searchtype?>) will search our entire site database for matches. They will list, if any are found, in order by relevance.</div>
<div><BR />Enter your search terms below: </div>
<form name='entiresearch' method='POST'>
<input type="hidden" name="searchtype" value="<?=$searchtype?>" />
<label id="q">Search: <input type="text" name="q" id="q"/></label>
<script type='text/javascript'>document.write("<input type='button' value='Go' onClick= obtainSettings('/modules/search.inc.php?pageID=<?=$_GET['pageID']?>&theTable=<?=$theTable?>&q='+document.entiresearch.q.value,'searchDiv'); />");</script>
<noscript><input type='submit' value='Go'></noscript>
</form>
<script type='text/javascript'>alert('hello');</script>
<?php
}


if($q != '')
{
echo $q;
}

?>

nikkiH
01-09-2007, 11:30 PM
eval has to have actual script.
InnerHTML is what you want if this is what you're sending back.

However, once script throws an error, no other script runs (default browser setting). So, if there is an error before the alert, you won't see the alert.

Try just using alert for now to see, then add in the element creation later.
Pare it down to a bare minimum.
i.e.



if($searchtype == "entire")
{
?>
<div>This type of search (<?=$searchtype?>) will search our entire site database for matches. They will list, if any are found, in order by relevance.</div>
<div><BR />Enter your search terms below: </div>
<script type='text/javascript'>alert('hello');</script>
<?php
}

rswyatt
01-11-2007, 06:03 PM
Can you give me an example of how I would send both the javascript (do I need to put this in an external file?) and the page content to innerHTML or an example of how exactly this works?

nikkiH
01-11-2007, 07:55 PM
Well, here's one that uses innerHTML.

http://www.alistapart.com/articles/gettingstartedwithajax



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum