www.webdeveloper.com
Results 1 to 11 of 11

Thread: Load a page into DIV, onLoad

  1. #1
    Join Date
    Jan 2012
    Posts
    5

    Question Load a page into DIV, onLoad

    Hey, I'm not a real programmer but I do like playing around with this stuff for my own needs. I recently began building my portfolio website and taught myself CSS and simple javascript to get it done.
    I was looking for a way to load HTML, CSS and/or JAVASCRIPT content into a DIV within a page, both by onCLick and onLoad events.

    I found these codes online:

    HTML Code:
    <a href="javascript:void()" onclick="javascript:sendRequest('sourcepage?id=34', 'targetdiv')">Link Text</a>
    <div id="targetdiv">This is the target</div>
    Code:
    function createRequestObject() 
    {
    	var returnObj = false;
    	
        if(window.XMLHttpRequest) {
            returnObj = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
    		try {
    			returnObj = new ActiveXObject("Msxml2.XMLHTTP");
    
    			} catch (e) {
    			try {
    			returnObj = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch (e) {}
    			}
    			
        }
    	return returnObj;
    }
    
    var http = createRequestObject();
    var target;
    
    // This is the function to call, give it the script file you want to run and
    // the div you want it to output to.
    function sendRequest(scriptFile, targetElement)
    {	
    	target = targetElement;
    	try{
    	http.open('get', scriptFile, true);
    	}
    	catch (e){
    	document.getElementById(target).innerHTML = e;
    	return;
    	}
    	http.onreadystatechange = handleResponse;
    	http.send();	
    }
    
    function handleResponse()
    {	
    	if(http.readyState == 4) {		
    	try{
    		var strResponse = http.responseText;
    		document.getElementById(target).innerHTML = strResponse;
    		} catch (e){
    		document.getElementById(target).innerHTML = e;
    		}	
    	}
    }
    These worked well, when I tried them myself. But I couldn't call the same document more than once onLoad:

    Code:
    </script>
    <script type="text/javascript">
    function loadPage(){
    	sendRequest('hello.html', 'content');
    }
    </script>
    <script type="text/javascript">
    function loadPage(){
    	sendRequest('hello.html', 'contents2');
    }
    </script>
    <script type="text/javascript">
    function loadPage(){
    	sendRequest('hello.html', 'contents3');
    }
    </script>
    </head>
    <body onload="loadPage();">
    
    
    <a href="javascript:void()" onclick="javascript:sendRequest('hello.html', 'content')">Link Text</a>
    <div id="content">This is the target</div>
    <br>2<br>
    <div id="contents2">This is the target</div>
    <br>3<br>
    <div id="contents3">This is the target</div>
    What would happen in this last code, only 'contents3' would contain hello.html, and the other two would remain empty, unless i pressed the Link Text and then 'content' would then call hello.html.

    I would like to call the same page more than once, I don't know how to fix it.
    Would someone care to help?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    You could use a <div> if the external content consisted of a fragment of HTML or plain text, but a <div> is incapable of displaying the contents of an entire webpage without doing an enormous amount of pre-processing. My advice would be to use a simple <iframe>. Something like:
    Code:
    <a href="sourcepage?id=34" target="targetbox">Link Text</a>
    <iframe id="targetbox" name="targetbox" width="xx" height="yy">This is the target</iframe>

  3. #3
    Join Date
    Jan 2012
    Posts
    5
    the reason I don't use iframe is because I want the size of the container to adjust to the new content, rather than be a set size and have a scroll bar on the side.
    Can an iframe adjust its size?
    If not, my problem remains.
    I don't intend to load extremely large contents, and I'm trying to control content without the need to update the main html file.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Is there a reason you want to do it with JS rather than simple by including it on the page?

    Code:
    <!--#include virtual="./yourpage.html" -->
    
    OR
    
    <?php include('./yourpage.html'); ?>
    (The above assumption is that yourpage.html doesn't contain html,head,title,body, or other tags that would result in illegal HTML if nested inside another page).

  5. #5
    Join Date
    Jan 2012
    Posts
    5
    Does that last example need to be within a .php or can that just work in a regular html page? (I'm not too familiar with php, sorry.)
    That could work if I needed to have something automatically loaded on the page. But I guess I would still need the Javascript to switch my content to something else within a DIV using a hyperlink.

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    The php needs in to within a .php file, but the virtual include can be done on an apache server with SSI enabled in any HTML page.

    You don't need to necessarily request different pages to display them in a div, why not stick both pages in two different divs and then hide one of them. Then, when you click the hyperlink, just hide the first one and show the second one - that way your visitors never have to wait for JS to go and request a page and load it into your current document - it's already there on page load.

  7. #7
    Join Date
    Mar 2011
    Posts
    1,156
    Keep in mind that whether you use a PHP include or an SSI include method, you still can't simply insert a complete external HTML page into an existing web page anywhere you want. You can include a block of plain standalone HTML, but not an entire HTML document.

  8. #8
    Join Date
    Jan 2012
    Posts
    5
    Thank you both, that really helps.
    How would you suggest doing the hide/show, effect?

    I figured out how to manipulate the display property using js, but how would you switch between a few different contents, using a few different hyperlinks?
    Last edited by tomshanan; 02-01-2012 at 09:40 PM.

  9. #9
    Join Date
    Dec 2005
    Posts
    2,984
    Don't switch the contents, switch the display of the divs:

    HTML Code:
    <div id="content1">
       some content
    </div>
    <div id="content2" style="display: none;">
       some different content 
    </div>
    
    <a href="#" onclick="show('content1'); hide('content2'); return false;">Show Content 1</a>
    <a href="#" onclick="show('content2'); hide('content1'); return false;">Show Content 2</a>
    
    <script>
    function show(id) {
      document.getElementById(id).style.display = 'block';
    }
    
    function hide(id) {
      document.getElementById(id).style.display = 'none';
    }
    </script>
    (The above is a ridiculously over simplified example just to get you thinking about how to do it. I don't advocate using inline scripts, CSS, or event handlers).

  10. #10
    Join Date
    Jan 2012
    Posts
    5

    resolved

    Thank you very much. That did the trick!
    Grateful for all your help.

  11. #11
    Join Date
    Nov 2012
    Posts
    1
    Quote Originally Posted by aj_nsc View Post
    Don't switch the contents, switch the display of the divs:

    HTML Code:
    <div id="content1">
       some content
    </div>
    <div id="content2" style="display: none;">
       some different content 
    </div>
    
    <a href="#" onclick="show('content1'); hide('content2'); return false;">Show Content 1</a>
    <a href="#" onclick="show('content2'); hide('content1'); return false;">Show Content 2</a>
    
    <script>
    function show(id) {
      document.getElementById(id).style.display = 'block';
    }
    
    function hide(id) {
      document.getElementById(id).style.display = 'none';
    }
    </script>
    (The above is a ridiculously over simplified example just to get you thinking about how to do it. I don't advocate using inline scripts, CSS, or event handlers).

    Hi

    I'm new at this.
    Your post is really helpful. I have one more question. Is possible to load with this script, not just hidden div, but the whole another html document. For example--> onclick="show('some html document')?

    Thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles