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

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);