How to detect the div in which a link to a javascript function has been clicked

Question

I have the following html code:

<div id="result1" class="result">
    ... some html ...
    ... <a href="javascript:updateNext(this, uri);">link</a>
    ... some html ...
</div>
<div id="result2" class="result">
    ... some html ...
    ... <a href="javascript:updateNext(this, uri);">link</a>
    ... some html ...
</div>
<div id="result3" class="result">
</div>
<div id="result4" class="result">
</div>    

The goal is to update the content of the next div when I click on the link. So for instance, when I click on a link in #result2, the content of #result3 will be updated.

Here is the javascript function:

<script>
            function updateNext(elem, uri) {
                    $.ajax({
                            url: uri,
                            success: function(data) {
                                    elem.closest('.result').nextAll().html('');
                                    elem.closest('.result').next().html(data);
                            }
                    });
            }
</script>

However, when I use the link, elem is set as the window, not the link itself.

The content of the div is generated by a server which should not know the position of the div in which the code he is generating will be.

I also tried with a

 <a href="javascript:" onclick="updateNext(...

with no other result...

any idea? :-)

Thanks,

Arnaud.

Answer 1

Why do you use inline scripts when you alrady are using jQuery?

I've setup a Fiddle for you which does what you want: http://jsfiddle.net/eLA3P/1/

The example code:

$('div.result a').click(function() {
    $(this).closest('div.result').next().html('test');

    return false;
});

Answer 2

this returns the window when used in href , but here it returns the actual link:

   ... <a href="#" onclick="updateNext(this, 'new');">link</a>

Don't forget to use the jQuery $ in:

    $(elem).closest('.result').nextAll().html('');
    $(elem).closest('.result').next().html(data);

Answer 3

First, you must remove those href="javascript:..." attributes. Please never use them again, they are evil.

Then, bind a click handler via jQuery, which you are alredy using:

// since you dynamically self-update the a elements, use "live()":
$("div.result a").live("click", function () {
  var $myDiv = $(this).closest("div.result");
  $.ajax({
    url: "/build/some/url/with/" + $myDiv.attr("id"),
    success: function(data) {
      $myDiv.next("div.result").html(data);
    }
  });
  return false;
});

Done.

Answer 4

Try to use jQuery to bind the event instead putting a javascript link in the href.

<div id="result1" class="result">
  <a href="#" class="resultLink">link</a>
</div>

$('.resultLink').click(function(){
   var elem = $(this);
   $.ajax({
     url: uri,
     success: function(data) {
       elem.closest('.result').nextAll().html('');
       elem.closest('.result').next().html(data);
     }
   });
});

Answer 5

You should do it like this:

http://jsfiddle.net/hJhC7/

The inline JavaScript is gone, and the href is being used to store the "uri", whatever that might be. I'm assuming it's different for each link.

The //remove this lines are just to make $.ajax work with jsFiddle.

$('.update').click(function(e) {
    e.preventDefault();
    var elem = $(this);

    $.ajax({
        type: 'post', //remove this
        data: {html: Math.random() }, //remove this

        url: $(this).attr('href'),
        success: function(data) {
            //not sure why you're doing this
            //elem.closest('.result').nextAll().html('');
            elem.closest('.result').next().html(data);
        }
    });
});

with this HTML:

<div id="result1" class="result">
    <a href="/echo/html/" class="update">link</a>
</div>
<div id="result2" class="result">
    <a href="/echo/html/" class="update">link</a>
</div>
<div id="result3" class="result">
    <a href="/echo/html/" class="update">link</a>
</div>