0

Say I have a loop of objects (style.cover.pic) in a DIV .style_image 

<div class="style_image"> <%=link_to (image_tag style.cover.pic.url(:small)), style %></div>

With the use of JQuery On a click event I want to load (this.href) in to the div .style_image which was click not all of the .style_image DIV's.

this is what I have done so fare:

$(function() {

$(".style_image a").live('click', function(event) { 


    $(".style_image a").load(this.href + " #show_style");

    $.get(this.href, null, null, "script");
    return false;       

});
});

Can this be done? and yes how???

Regards

Dan

MrThomas
  • 427
  • 1
  • 6
  • 19

2 Answers2

1

Do it like this:

$(function() {
  $(".style_image a").live('click', function(event) { 
    $(this).closest(".style_image").load(this.href + " #show_style");
    return false;       
  });
});

On click, this looks from the link was was clicked to it's .style_image parent, then loads the content there.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Is it possible to cancel the load apon a new click event like a if statement? $(function() { if('.show_style').unload(this.href); $(".style_image a").live('click', function(event) { $(this).closest(".style_image").load(this.href + " #show_style"); return false; }); }); – MrThomas Mar 28 '10 at 12:21
  • @MrThomas - Not using `.load()`, but you could with the `$.ajax({})` expanded form which returns the XMLHttpRequest object, see here for details: http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery – Nick Craver Mar 28 '10 at 12:33
  • Cheers Nick, but I have no Idea how to implement gonna check out, the JQuery doc's. – MrThomas Mar 28 '10 at 16:46
  • @MrThomas - Here's what the ajax expanded form would look like, that help? http://jsfiddle.net/wu6z7/ – Nick Craver Mar 28 '10 at 18:06
0

Try using:

$(this).attr('href');

instead of:

this.href
Sarfraz
  • 377,238
  • 77
  • 533
  • 578