Advanced Search

Results 1 to 3 of 3

Thread: Dynamic Ajax Content Link problems

  1. #1
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content Link problems

    1) Script Title: Dynamic Ajax Content Link problems

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem: I wanna make a link that links to my index.html and at the same time down in the content box where the ajax script is loads a site that is not the standard.

    Eksample

    Defult link is Index.html and it loads text 1.
    what i wanna make is a link that opens index.html and displays text 2 from the start and this needs to be in a link so that i can use it on Fx a other side that's not located on the sever.

    is there a way to make a link that is saying
    <a href="index.html" href="javascript:ajaxpage('indextwo.html', 'content');"/>
    <h2>Home</h2>

    so it first opens the index.html and after opens the content indextwo.html in the content area. ?

    Hope you understand my problem and have a trick ore to to help me out

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    Do you want to load a file (in the contentarea) that is from a 'foreign' domain?
    Just create a file called 'foreign.html' (or whatever name) and put the following in it (for instance):
    Code:
    <iframe src="http://www.dynamicdrive.com" frameborder="0" style="position: absolute; width: 550px; height: 400px"></iframe>
    Then in the body of the main file:
    Code:
    <div style="float:left; width:150px; height: 400px; border: 3px solid black;padding: 5px;padding-left: 8px;">
    <a href="javascript:ajaxpage('foreign.html', 'content');">Foreign page</a>
    </div>
    
    <div id="content" style="border: 3px solid black; float:left; width:550px; min-height: 400px; border: 3px solid black; margin-left: 10px;
    padding: 5px; padding-bottom: 8px;"><h3>Choose a page to load.</h3></div>
    <div style="clear: left; margin-bottom: 1em"></div>

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    If you're trying to get around the same domain origin policy of AJAX, that's one way. If on the other hand you just want a link that will load a same domain page into a page as it's loading:

    index.html:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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>
    </head>
    <body>This is index.html
    <div id="content"></div>
    <a href="link.htm">Link Page</a>
    <script type="text/javascript">
    function getQval(n) {
    	if(typeof n !== 'string'){
    		return null;
    	}
    	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
    	return (m = r.exec(m))? unescape(m[1]) : null;
    }
    if((ajaxpage.page = getQval('page')) && (ajaxpage.div = getQval('div'))){
    	ajaxpage(ajaxpage.page, ajaxpage.div);
    }
    </script>
    </body>
    </html>
    A link to it that will load index2.html in its content div:

    Code:
    <a href="index.html?page=index2.html&amp;div=content">Test</a>
    Demo

    If you want both, combine the two methods.
    Last edited by jscheuer1; 06-18-2013 at 02:49 PM. Reason: add demo link
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Dynamic Ajax Content & Link in DIV
    By pbundschuh in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 08-17-2011, 08:43 AM
  2. Replies: 14
    Last Post: 04-08-2010, 04:12 PM
  3. Ajax Dynamic Content Link Question
    By simcomedia in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-23-2009, 04:55 PM
  4. problems with Dynamic Ajax Content
    By nicmo in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 04-01-2009, 01:04 PM
  5. dynamic ajax content and lightbox image viewer combination problems
    By davidhalim in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-16-2007, 11:06 AM

Bookmarks

Posting Permissions

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