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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Dynamically load html without reload?

    Hey everyone,

    I currently have a grid of thumnails which when clicked will load an image at the top of the page without reloading the page using the following JS:

    Code:
    <a href="JavaScript:;" onClick="JavaScript:document.all.Main.src='images/image01.png';"><img src='images/image01thumb.png'></a>
    This works wonderfully, However, what I need to do now is to produce the same thing but instead of loading an image, load an html file into the page without reloading. Is there a way I could use a similarly simple solution?

    Thanks

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option is to use an onclick to change the src attribute of an <iframe> to the url of the html file you want to load.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    One option is to use an onclick to change the src attribute of an <iframe> to the url of the html file you want to load.
    Hi BullAnt, Yeah I did think that but I'm trying to avoid iframes due to compatibility issues.

    I have just come across this method which sounds like it should work but I cant seem to get it running yet. Any suggestions?:

    JQuery + this:
    Code:
    function loadContent(elementSelector, sourceUrl) {
    $(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
    }
    in the head, give my div an ID of "content", then have this as the link to change its content:
    <a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Please, please, if you use jQuery already, do it the contemporary (unobtrusive) way, not with some fifteen years old method (which was bad practice at any time).

    Do it like:
    Code:
    <a href="target.php">link text</a>
    <div id="content">
      some default content here
    </div>
    and
    Code:
    $('a').click(function() {
      $('#content').empty().load($(this).attr('href'));
    });
    Which selector(s) you use depends on the mark-up. You could also add a class or a rel attribute to the link(s) but if your link(s) is/are in a navigation or whatever you can also use this as selector for jQuery.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, so are you suggesting that the latter code you offered there should be placed in the page header?
    If so I have just tried this and resulted in it simply downloading my page when the link is clicked.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Show us your effort and we’ll tell you what’s wrong.


  •  

    Posting Permissions

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