Loading the target of a link in a <DIV> via jQuery's .live event into the same <DIV>??

Question

Hello together

I call a certain div from another page with jquery to be loaded into a div on my main page like this:

<script type="text/javascript">
$("#scotland").load("http://www.example.com/scotland .gallery");
</script>
<div id="scotland"></div>

The div I call is a piece of code which is automatically generated by a CMS made simple module, by the way.

Now it comes to my problem: The .gallery div I call, looks, a little simplified, like this:

<div class="gallery">
    <span><img src="http://www.example.com/scotlandimage1.jpg"&gt;&lt;/span&gt;
    <span class="imgnavi"><a href="link_to_next_page_with_one_image">Next image</href></span>
</div>

I want the "next image"-link to load the next page into the .gallery div (it is always a page with one image on it). But what it does, is, it opens the new page http://www.example.com/scotland only.

I tried to use jquerys .live event to load the linked page (that would be "scotlandimage2" and the navigation, as you can see in the upper part - not only the image!), but I must have done something wrong. I tried different ways, but never got it to work. This was my last try:

$(".imgnavi a").click(function() {
  var myUrl = $(this).attr("href");
  $(".gallery").load(myUrl);
  return false;
});

I have to admit that I am very new to jquery... But does someone know what I did wrong (do I even follow the right handlers?)?

Thanks very much in advance!

Martin

Answer 1

I think you must append the $(".gallery").load(myurl);

added after edit:

$(function() {
        var img = new Image();
        $(img).load(function() {
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function() {

        }).attr('src', 'http://www.google.com/intl/en_ALL/images/logo.gif');
 });


 <div id="loader" class="loading">

src:link text

so in your case try this:

$(document).ready(function() {
        $(".imgnavi a").click(function() {
            var myUrl = $(this).attr("href");
            $("#imageid").load(function() {
                $(this).hide();
                $(this).fadeIn();
            }).attr('src', myUrl);

        });
});

and html:

 <div class="gallery">
  <span>
    <img id="imageid" src="http://sstatic.net/so/img/logo.png"&gt;&lt;/span&gt; 
    <span class="imgnavi"><a href="http://www.google.com/intl/en_ALL/images/logo.gif"&gt;Next image</href></span>
 </div>

Tested

Answer 2

Your first attempt is good, but you're missing the required-for-ajax call to live instead of click:

$('.imgnavi a').live('click', function(ev) {
    // Stop regular handling of "click" in most non-IE browsers
    ev.preventDefault();
    ev.stopPropagation();

    // Load the new content into the div (same code you had)
    $('.gallery').load($(this).attr('href'));

    // Stop regular handling of "click" in IE (and some others)
    return false;
}

EDIT in response to the question: "What will happen with the old $('gallery') content?"

With the above code, the old content will be replaced with the response to the .load() request. If you want to, say, prepend the image instead, you can just wrap the .load() call in a call to the built-in jQuery $.prepend( content ) method, like so:

$('gallery').prepend($.load($(this).attr('href')));

The same works for appending.