Results 1 to 4 of 4

Thread: Dynamic Ajax Content - refresh

  1. #1
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content - refresh

    1) Script Title: Dynamic Ajax Content

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

    3) Describe problem: Is there a way to keep the currently loaded source of containerid rather than the original source?

    i.e., if I've just loaded ferrari.jpg and click the browser's Reload, is there a way to retain ferrari.jpg as contentarea's source instead of reloading the original text/src?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ajax Rotating Includes Script</title>
    <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
    * Modified to reload most recent ajaxpage content on page reload in:
    * http://www.dynamicdrive.com/forums by jscheuer1
    ***********************************************/
    
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    
    function ajaxpage(url, containerid){
    createCookie('ajaxloaded', url+','+containerid, 1)
    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)
    }
    page_request.open('GET', url, 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
    }
    }
    }
    
    //cookie unit from www.quirksmode.org
    
    function createCookie(name,value,days)
    {
    	if (days)
    	{
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name)
    {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++)
    	{
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    function eraseCookie(name)
    {
    	createCookie(name,"",-1);
    }
    
    //end cookie unit
    
    onload=function() {
    if (readCookie('ajaxloaded')!=null&&readCookie('ajaxloaded').indexOf('null')<0){
    var args=unescape(readCookie('ajaxloaded')).split(',')
    ajaxpage(args[0],args[1])
    }
    }
    
    
    </script>
    
    <style type="text/css">
    #leftcolumn{
    float:left;
    width:150px;
    height: 400px;
    border: 3px solid black;
    padding: 5px;
    padding-left: 8px;
    
    }
    
    #leftcolumn a{
    padding: 3px 1px;
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid gray;
    }
    
    #leftcolumn a:hover{
    background-color: #FFFF80;
    }
    
    #rightcolumn{
    float:left;
    width:550px;
    min-height: 400px;
    border: 3px solid black;
    margin-left: 10px;
    padding: 5px;
    padding-bottom: 8px;
    }
    
    * html #rightcolumn{ /*IE only style*/
    height: 400px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="leftcolumn">
    <a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
    <a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
    <a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>
    
    <div style="margin-top: 2em">Load CSS & JS files</div>
    <a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>
    
    </div>
    
    <div id="rightcolumn"><h3>Choose a page to load.</h3></div>
    <div style="clear: left; margin-bottom: 1em"></div>
    
    </body>
    
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    My above reply will work to refresh the ajax content. If you also want to refresh scripts and style loaded previously by loadobjs(), use this version:

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ajax Rotating Includes Script</title>
    <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
    * Modified to reload most recent ajaxpage content and loaded objects on page reload in:
    * http://www.dynamicdrive.com/forums by jscheuer1
    ***********************************************/
    
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    
    function ajaxpage(url, containerid){
    createCookie('ajaxloaded', url+','+containerid, 1)
    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)
    }
    page_request.open('GET', url, 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
    }
    }
    createCookie('objsloaded', loadedobjects, 1)
    }
    
    //cookie unit from www.quirksmode.org
    
    function createCookie(name,value,days)
    {
    	if (days)
    	{
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name)
    {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++)
    	{
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    function eraseCookie(name)
    {
    	createCookie(name,"",-1);
    }
    
    //end cookie unit
    
    onload=function() {
    if (readCookie('ajaxloaded')!=null&&readCookie('ajaxloaded').indexOf('null')<0){
    var args=unescape(readCookie('ajaxloaded')).split(',')
    ajaxpage(args[0],args[1]);
    }
    if (readCookie('objsloaded')!=null&&readCookie('objsloaded').indexOf('null')<0){
    args=unescape(readCookie('objsloaded')).split(' ')
    for (var i_tem = 0; i_tem < args.length; i_tem++)
    loadobjs(args[i_tem]);
    }
    }
    
    
    </script>
    
    <style type="text/css">
    #leftcolumn{
    float:left;
    width:150px;
    height: 400px;
    border: 3px solid black;
    padding: 5px;
    padding-left: 8px;
    
    }
    
    #leftcolumn a{
    padding: 3px 1px;
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid gray;
    }
    
    #leftcolumn a:hover{
    background-color: #FFFF80;
    }
    
    #rightcolumn{
    float:left;
    width:550px;
    min-height: 400px;
    border: 3px solid black;
    margin-left: 10px;
    padding: 5px;
    padding-bottom: 8px;
    }
    
    * html #rightcolumn{ /*IE only style*/
    height: 400px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="leftcolumn">
    <a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
    <a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
    <a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>
    
    <div style="margin-top: 2em">Load CSS & JS files</div>
    <a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>
    
    </div>
    
    <div id="rightcolumn"><h3>Choose a page to load.</h3></div>
    <div style="clear: left; margin-bottom: 1em"></div>
    
    </body>
    
    </html>
    - John
    ________________________

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

  4. #4
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, how can I setup that container div to auto-refresh in 60 sec. (kind of autoupdate when I change a content of each page).

    Thanks in advance,
    Alt

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
  •