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
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggle div, loading content externally on toggle

    Hi there!

    Okay, here is my scenario:

    I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

    The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

    Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately.

    Highly appreciate any help/answers/feedback!

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You are looking for "AJAX" to do this type of thing. Here is some very rough (and untested) code to get you started:

    Javascript:
    Code:
    function ajax_content_switch(number){
    	var urls= new Array( "http://www.yoursite.com/page_to_load.php" , "http://www.yoursite.com/page_to_load_2.php" , "http://www.yoursite.com/page_to_load_3.php");
    	var ajax_run;
    	if (window.XMLHttpRequest){
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		ajax_run = new XMLHttpRequest();
    	}
    	else{
    		// code for IE6, IE5
    		ajax_run = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	ajax_run.onreadystatechange = function(){
    		if (ajax_run.readyState==4 && ajax_run.status==200){
    			//Page was found and whatever the server gave us has been loaded...
    			result = ajax_run.responseText;
    			if (result!=''){
    				//AJAX returned some content, so we process it...
    				update_content(result);
    			}
    			else{
    				//AJAX returned a blank page, show error alert...
    				alert('Content failed to load!');
    			}
    		}
    		else{
    			//Page not found or otherwise failed to load...
    			alert('Content failed to load!');
    		}
    	}
    	ajax_run.open("GET",urls[number],true);
    	ajax_run.send();
    }
    function update_content(contents){
    	//do whatever you need here in order to show the contents where you want them...
    	document.getElementById('target').innerHTML=contents;
    }
    Then you call the function onclick something like this:

    HTML snippet:
    Code:
    <a onclick="ajax_content_switch(0);">Page 1</a> | 
    <a onclick="ajax_content_switch(1);">Page 2</a> | 
    <a onclick="ajax_content_switch(2);">Page 3</a>
    <div id="target"></div>
    So when you click on the first link it loads data in from the first URL in your array, the second link loads data from the second URL, and so on.

    Note that all URLs being used must be on the same domain as the page you are on. This is a browser security feature and it cannot be overcome by javascript.

    You can load anything you want there, be it PHP-driven or static HTML. The AJAX call doesn't know or care what the difference is.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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