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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    AJAX new page called to DIV

    Ok, so I asked this same question and did not get on reply so I guess I didnt explain it all that well.

    I have an AJAX function which is used so that when u click on a link, it opens a new page within a DIV on my main page. All that works great, but the problem is that there is a form section on my site which cant seem to handle the ajax function, or I don't know how to code it.

    basically, the form is held on a page called register.html which loads in a DIV on my main page called 'CONTENT'.

    when the form is submitted, the data is sent to register.php, and added to the database. All that works great.

    BUT....after this occurs, I want a new page to be loaded in the 'CONTENT' DIV. The new page is confirm.html and it simply holds a confirmation message.

    At the moment, all that happens is the whole page is refreshed to show the confirm.html page, where as I just want the div refreshed to show the confirm.html page.

    Below is the code, and I swear if anyone can answer this, i will buy u a case of beer or some vodka.

    HERE IS THE AJAX FUNCTION

    Code:
    <script type="text/javascript">
    
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""
    
    function ajaxpage1(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>

    HERE IS THE END PART OF THE PHP PAGE

    Code:
    $query = "INSERT INTO users (prefix, firstname, lastname, number, type, email, street, suburb, postcode, city, username, password, password1)VALUES('$prefix', '$firstname', '$lastname', '$number', '$type', '$email', '$street', '$suburb', '$postcode', '$city', '$username', '$password1', '$password2')";
    mysql_query($query) or die(mysql_error());
    
    header("Location:confirm.html");
                
    mysql_close();
    ?>

    AND THIS IS HOW ID NORMALY CALL A LINK TO A DIV USING THE AJAX FUNCTION

    Code:
    <a href="javascript:ajaxpage1('register.html','content');" class="nav">

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    When posting code, please be sure to properly format, i.e. indent so we can actually read it.

    In this function (which I altered slightly):
    Code:
    function loadpage(page_request, containerid){
        if (page_request.readyState == 4 && (page_request.status==200 ||
               window.location.href.indexOf("http")==-1)) {
            document.getElementById(containerid).innerHTML=page_request.responseText;
        }
    }
    You're expecting to receive something from the Ajax call and push the content into a DIV element. BUT, your PHP script does this:
    PHP Code:
    header("Location:confirm.html"); 
    The call to header() effectively sends the user to 'confirm.html', bypassing any return value whatsoever. The page is redirected.

    If you want some content pushed back to the calling page, then just echo some content. Don't have it redirect or try to send an HTML document.

    I can't vouch for any of your other code.


  •  

    Posting Permissions

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