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
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Open Page and load content into div

    Hey there

    I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page.

    i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page.

    like the link must be something like main.html?div=content.html

    i know how to do this with iframes, but i want to work with div tags

    thank you

    javascript for loading content into the div tag on the same page :

    PHP Code:

    var bustcachevar=//bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""

    function clientSideInclude(containeridurl){
    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(containeridpage_request)
    }
    if (
    bustcachevar//if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET'url+bustcacheparametertrue)
    page_request.send(null)
    }

    function 
    loadpage(containeridpage_request){
    if (
    page_request.readyState == && (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=0i<arguments.lengthi++){
    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
    }
    }


  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Generally speaking, you can't.

    After all, the page you are getting via the AJAX request is going to have its own <html> and <head> and <body> tags, none of which are legal inside a <div>.

    What you could do, instead, is put an <iframe> inside your <div> and then load the <iframe> with the URL. It won't be resized automatically, but it will be there.

    If you could make sure that the URL you are requesting via the AJAX call does *NOT* contain any problem content--that is, it contains only HTML that is legal as the content of a <div>--then it should work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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