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 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to load contents of external page onto div id on page?

    Hiya, how do i load the contents of a page on my server which is /staffpanel/_frontend/news.php into the div id: container on my page when the button is clicked? my current code I have is :

    in head:
    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    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 ajaxpage(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>
    And i need it to load /staffpanel/_frontend/news.php into the div container

    In my body tags I have <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php', 'container');" id="news"></a></li>

    When I click the news button it won't load anything, nothing happens.

    Thanks guys
    Last edited by Vernier; 01-14-2012 at 10:21 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,312
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Also in your body tags you need <div id="container"></div> as the place where the returned info will post.

    And /staffpanel/_frontend/news.php must be a file that does echo the news.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Also in your body tags you need <div id="container"></div> as the place where the returned info will post.

    And /staffpanel/_frontend/news.php must be a file that does echo the news.
    Hey,
    The Body tag contains quite a bit so I won't paste all of it, however this is the first part:

    <body>
    <div id="container">
    <div id="wrapper">
    <div id="left">
    <div id="banner_container">
    <div id="navigation_bar">
    <ul>
    <li></li>
    <li><a href="#" id="thehablets"></a></li>
    <li><a href="http://habfab.com/v2/radio.html" id="radio"></a><a href="radio.html"></a></li>
    <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php', 'container');" id="news"></a></li>
    Thanks,

    ~ David

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    bump - is there another way of doing it otherwise like a different code? Thanks

    ~ David

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,312
    Thanks
    23
    Thanked 612 Times in 611 Posts
    I changed your link slightly and added code to keep my editor from complaining.
    Code:
    <li><a href="#" id="thehablets">Just so you see me </a></li>
    <li><a href="http://habfab.com/v2/radio.html" id="radio"></a><a href="radio.html">something different</a></li>
    <li><a href="javascript:ajaxpage('./test_3.php', 'container');" id="news">Get the ajax page</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Notice that
    ('/staffpanel/_frontend/news.php', 'container')
    was changed to
    ('./test_3.php', 'container')
    so that it was easier for me.

    In test_3.php I hade
    Code:
    <?php
    echo 'Made it Jerome';
    ?>
    It works BUT the dot needed to be in the address of the file.

    So make sure your links go to the function insert this
    Code:
    function ajaxpage(url, containerid){alert('here');die;
    And then if it works make sure you have the correct address for your php.

    Everything else works great.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I changed your link slightly and added code to keep my editor from complaining.
    Code:
    <li><a href="#" id="thehablets">Just so you see me </a></li>
    <li><a href="http://habfab.com/v2/radio.html" id="radio"></a><a href="radio.html">something different</a></li>
    <li><a href="javascript:ajaxpage('./test_3.php', 'container');" id="news">Get the ajax page</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Notice that
    ('/staffpanel/_frontend/news.php', 'container')
    was changed to
    ('./test_3.php', 'container')
    so that it was easier for me.

    In test_3.php I hade
    Code:
    <?php
    echo 'Made it Jerome';
    ?>
    It works BUT the dot needed to be in the address of the file.

    So make sure your links go to the function insert this
    Code:
    function ajaxpage(url, containerid){alert('here');die;
    And then if it works make sure you have the correct address for your php.

    Everything else works great.
    Where do i put the function?

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,312
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Where do i put the function?
    What function???/

    Change the start line of YOUR function
    This
    Code:
    function ajaxpage(url, containerid){
    To this:
    Code:
    function ajaxpage(url, containerid){alert('here');die;
    It will tell you that you are calling that function. First step in trouble shooting Are you going where you think your going.
    If you get the alert you can and should return the line to original status.

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    What function???/

    Change the start line of YOUR function
    This
    Code:
    function ajaxpage(url, containerid){
    To this:
    Code:
    function ajaxpage(url, containerid){alert('here');die;
    It will tell you that you are calling that function. First step in trouble shooting Are you going where you think your going.
    If you get the alert you can and should return the line to original status.
    I have this:

    Code:
    <div id="banner_container">
                    <div id="navigation_bar">
                        <ul>
                            <li></li>
                            <li><a href="#" id="thehablets"></a></li>
                            <li><a href="http://habfab.com/v2/radio.html" id="radio"></a><a href="radio.html"></a></li>
                            <li><a href="javascript:ajaxpage('test_3.php', 'container');" id="news">Get the ajax page</a></li>
    </ul>
                            <li><a href="#" id="guides"></a></li>
                            <li><a href="/staffpanel/_frontend/events.php" id="events"></a></li>
                            <li><a href="#" id="media"></a></li>
                            <li><a href="/staffpanel/_frontend/jobApps.php" id="jobs"></a></li>
                            <li><a href="http://habfab.com/forum" id="forum"></a></li>
                        </ul>
                    </div>
                    <div id="banner"></div>
                </div>
    What needs editing?

    Thanks

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,312
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Here is the script to check out:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">
    
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    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 ajaxpage(url, containerid){alert('here'); // remove this after it works
    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>
    
    </head>
    
    <body>
    
    <div id="container">
    <div id="wrapper">
    <div id="left">
    <div id="banner_container">
    <div id="navigation_bar">
    <ul>
    <li></li>
    <li><a href="#" id="thehablets">Just so you see me </a></li>
    <li><a href="http://habfab.com/v2/radio.html" id="radio"></a><a href="radio.html">something different</a></li>
    <li><a href="javascript:ajaxpage('test_3.php', 'container');" id="news">Get the ajax page</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    And this is the test_3.php file that it calls:
    PHP Code:
    <?php
    echo 'Made it Jerome';
    ?>
    If things are working an alert will show, when clicked the page will disappear and Made it Jerome will appear.

    Both files MUST be in the same folder and remember to correct two entries in the HTML when working.

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Here is the script to check out:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">
    
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    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 ajaxpage(url, containerid){alert('here'); // remove this after it works
    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>
    
    </head>
    
    <body>
    
    <div id="container">
    <div id="wrapper">
    <div id="left">
    <div id="banner_container">
    <div id="navigation_bar">
    <ul>
    <li></li>
    <li><a href="#" id="thehablets">Just so you see me </a></li>
    <li><a href="http://habfab.com/v2/radio.html" id="radio"></a><a href="radio.html">something different</a></li>
    <li><a href="javascript:ajaxpage('test_3.php', 'container');" id="news">Get the ajax page</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    And this is the test_3.php file that it calls:
    PHP Code:
    <?php
    echo 'Made it Jerome';
    ?>
    If things are working an alert will show, when clicked the page will disappear and Made it Jerome will appear.

    Both files MUST be in the same folder and remember to correct two entries in the HTML when working.

    Got it working, thanks so much for your help! Also one other question, I have ajax so when users click job apps it shows all the available jobs and has a link saying apply, which takes them to a link, how can i have it so when they click Apply they are shown the form at this link: \staffpanel\_frontend\jobApps.php?apply={$core->clean( $rows['id'] )}\

    Thanks

    ~ David


  •  

    Posting Permissions

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