Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: how to get div content from different page

  1. #1
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default how to get div content from different page

    Hello,

    I'm trying to add contents to a div and I want to do it by referring to another file. I know that in iframes I can say sc="myfile.html" and get the same effect. This doesn't seem to work in divs though. Many google hits tell me to use php, as in:

    <div id="mydiv"><?php include("myfile.html"); ?></div>

    but 1) my server doesn't have a php engine, and 2) I want to be able to manipulate the src attribute (or whatever attribute it is) in javascript, as in:

    var mydiv = document.getElementById("mydiv");
    mydiv.setAttribute("src", "myotherfile.html");

    How can I do this with divs?

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    As far as I know that's not really practical, a suggestion is setting up a JavaScript array with different content on it and then changing the content of the div to whichever part of the array you feel like.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    AJAX.

    The easiest way to use AJAX is with jQuery:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	$('#mydiv').load('somepage.htm');
    });
    </script>
    </head>
    <body>
    <div id="mydiv"></div>
    </body>
    </html>
    Both pages must be on the same domain though. And this will often fail unless the pages are live, as most browsers have restrictions on this sort of thing if performed on the hard drive because it could be used to execute programs.

    AJAX only brings the content of the page. If you want to execute scripts upon that content, you can use the callback of jQuery's .load() function. But that's a different topic.

    jQuery's .load() function is only one (probably the simplest) of many jQuery AJAX functions and has a few options. Other jQuery AJAX functions have many more options. So, it depends upon what exactly you need to do as to which to use and which options to set and how they should be set.

    They all use jQuery's .ajax() function. So you can read the overview of all that's available with that here:

    http://api.jquery.com/jQuery.ajax/

    It even includes a way to import and run scripts. However, in my experience it's better to have the scripts available already and just run them against the new content once it arrives. Adding and running scripts can be great, but generally as a separate thing, for other reasons.

    If you want a page from another domain and/or want it to run its scripts without any additional code, you can use an iframe though. Just put the iframe in the div. But that has other issues as I'm sure you're aware.

    If you could be more precise about exactly what this is for, I could probably be more specific as to what I think the best approach would be.
    - John
    ________________________

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

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    This also seems to work:
    Code:
    <a onclick="frames['external_content'].location.replace('somepage.html')">load external</a>
    <div id="mydiv"></div>
    <iframe name="external_content" src="about:blank" style="width:0px; height: 0px; display:none" onload="document.getElementById('mydiv').innerHTML=frames['external_content'].document.documentElement.innerHTML"></iframe>
    But it's not very standard.
    Arie.

  5. #5
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,529
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    You can do it with a iframe and just hide the borders (then put iframe inside of the div and make it resize to the div)-

    Code:
    <iframe src="http://www.dynamicdrive.com" width="300" height="300" scrolling="no" frameBorder="0" id="iframe1">Browser not compatible.</iframe>
    This makes it really easy to edit the src attribute -

    Code:
    document.getElementById('iframe1').src = "new url";
    The above would only work if you don't have to edit the contents of the page...

  6. #6
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I've modified my code to use jquery as you suggested, jscheuer. It now looks like this:

    Code:
    ...
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" />
    	
    	<script type="text/javascript" language="javascript">
    ...
    		function loadContent(elementSelector, sourceUrl)
    		{
    			$("" + elementSelector + "").load("http://localhost/" + sourceURL + "");
    		}
    	
    	</script>
    ...
    		<div id="nuts_and_bolts" class="menu"
    		onmouseover="toggleItalic('nuts_and_bolts'); return false;"
    		onmouseout="toggleItalic('nuts_and_bolts'); return false;">
    			<a href="javascript:loadContent('#content', 'nuts_and_bolts.html');">
    				Nuts & Bolts
    			</a>
    		</div>
    ...
    But this is not working (oddly enough, my toggleItalic(...) function is no longer working now either). I'm running this on localhost. Could that be a problem?

  7. #7
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    I am new to using Ajax also and found this example to be pretty useful:

    http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    maybe you'll have better luck modifying that to what you're doing.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by gib65 View Post
    I've modified my code to use jquery as you suggested, jscheuer. But this is not working (oddly enough, my toggleItalic(...) function is no longer working now either). I'm running this on localhost. Could that be a problem?
    This:

    Code:
    $("" + elementSelector + "").load("http://localhost/" + sourceURL + "");
    Should be:

    Code:
    $(elementSelector).load("http://localhost/" + sourceURL);
    But I think what you have there is workable/equivalent. Either way, it's looking for nuts_and_bolts.html in the root folder of the localhost server (usually the www or html folder). If that file isn't there, it won't find it. Or if you are running the file without/outside the localhost, that would also be a problem. The toggle function isn't shown, so I have no idea what's going on with that.

    Using a localhost server is fine as long as it behaves like a live server - most do. Though, as I say, you have to be on it.

    And I can't easily diagnose it from there.

    If you want more help, please put up a live demo of the page so we can check it out.
    - John
    ________________________

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

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Hello Gib65,
    If you don't or can't use the Ajax solution explained by John, you can use an elaborated version of what I proposed above. The onclick can be replaced by an onload. Scripts belonging to the external file (here: external.html) must be brought in separately (just as in the Ajax case). I tested it with all browsers. Seems to work well. With Google Chrome, it only works on the Internet (doesn't work when used locally).
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title></title>
    <script>
    function load_iframe(iframe_name,url)
    {
    frames[iframe_name].location.replace(url)
    }
    function iframecontent_to_div(div,iframe_name)
    {
    document.getElementById(div).innerHTML=frames[iframe_name].document.documentElement.innerHTML
    }
    
    function remove_iframecontent_from_div(div)
    {
    document.getElementById(div).innerHTML=''
    }
    
    </script>
    
    <style>
    .hidden_iframe{position: absolute; left:-10000px; display: none}
    </style>
    
    <body>
    
    <!-- load the hidden iframe that is used for transferring content to a div -->
    <a href="javascript: void(0)" onclick="load_iframe('external_content','external.html'); return false">load external</a>
    
    <!-- Empty the div  -->
    &nbsp;&nbsp;<a href="javascript: void(0)" onclick="remove_iframecontent_from_div('mydiv'); return false">remove external</a>
    
    <!-- when the iframe is fully loaded, its content will be transferred to the div thank to the 'onload' -->
    <iframe name="external_content" src="about:blank" class="hidden_iframe" onload="iframecontent_to_div('mydiv','external_content')"></iframe>
    
    <!-- The div into which the external content must be inserted  -->
    <div id="mydiv"></div>
    
    </body>
    
    </html>
    Arie.

  10. #10
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks everyone for your help.

    jscheuer1,

    I'll see about getting a live demo up as soon as I can, but it may take a while since I'm in Mexico with poor internet connection.

    molendijk,

    Thanks for the advice. I'm sure that works but I'm trying to avoid iframes. I've been thinking of doing something similar with divs: have all the divs on the page at once and toggle their visibility with the links.

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
  •