Home› General support

load part of my page with ajax (js script)

onedimensional Member
in General support
I'm combining my old website with zenphoto using zenpage. I have a custom video viewing area that uses ajax and javascript to load the next video. You can see this working here (it's the Home Theater): http://schafli.com/oldsite2009/

To integrate this into zenphoto I used Pages and inserted most of the code into the code block field. Then I went on the backend and opened themes/zenpage/pages.php and inserted the script into the <head></head> section. It does not work. You can see the result here:
http://schafli.com/index.php?p=pages&title=weclome-to-the-schafli-family-website-

What am I doing wrong?

The script I am using is from DynamicDrive and can be found here:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Comments

  • sbillard Member
    Without detailed investigation the most likely issue is JavaScript conflicts. Zenphoto makes extensive use of jQuery as its script support library. If you have a debug console with your browser it may show you JavaScript errors. But how to fix them is more of a problem.

    Best would be to find a jQuery based script that does what you want.
  • onedimensional Member
    You know what? It is a jquery based script...

    Here it is:

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

    Here's the error message I get when clicking on another Video:

    Not Found

    The requested URL /ajaxpage('/Videos/pleasant.html', 'videoarea'); was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    Apache Server at schafli.com Port 80
  • acrylian Administrator, Developer
    That script is actually not jQuery based but plain JavaScript. It also seems to be using ActiveX which is a Microsoft specific thing that you should not use nowadays as it only works in Internet Explorers anyway (if the plugin is installed). Therefore your old sit is not working for me.

    You will hopefully understand that it exceeds the forum possibility a bit to check any third party script and such specific usages.

    You get this error: The requested URL /ajaxpage('/Videos/pleasant.html', 'videoarea'); was not found on this server. So the page you are trying to call is not where it is expected.

    Where do the videos come from? Selfhosted? What format? I guess you might need to update your knowldege about videos on the web. A lot has changed the last years.
  • onedimensional Member
    Got it to work with Jquery. Thank you. For anyone who's interested, here's the raw but complete markup:

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("a.video").click(function(){
    $("#div1").load($(this).attr('href'));
    event.preventDefault();
    });
    });
    </script>
    </head>

    <body>
    <div id="div1"><h2>You can start off with content in this div! It will be replaced, when you
    click on one of the links below!</h2>
    </div>

    Get External Content
    Get External Content2
    </body>

    Thanks. Also, I got my original script to work as well... I moved the directory I was trying to link to out of themes/zenpage/ and placed it in my root directory. That's when it started to work. Unfortunately that simple fix wasted at least 15 hours of my time.
Sign In or Register to comment.