Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question AJAX page call and document.write

    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!
    Rich S. Wyatt
    D3 Web Creations

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Rich S. Wyatt
    D3 Web Creations

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Quote Originally Posted by rswyatt View Post
    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.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #5
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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:
    Code:
    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.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #6
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pyth007 View Post
    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:
    Code:
    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:
    Code:
    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':

    Code:
    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 Code:

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

    ?>
    Rich S. Wyatt
    D3 Web Creations

  • #7
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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.

    PHP Code:
    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
    }

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #8
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Rich S. Wyatt
    D3 Web Creations

  • #9
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Well, here's one that uses innerHTML.

    http://www.alistapart.com/articles/g...tartedwithajax

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •