I have the following html code: … some html … … link … some html … … some html … … link … some html … 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 …
via HTML Language Development » Search Results » ajax:
How to detect the div in which a link to a javascript functi
I have the following html code:
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:
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
Thanks,
Arnaud.
…………………………………..
this returns the window when used in href, but here it returns the actual link:
… linkDon’t forget to use the jQuery $ in:
$(elem).closest(‘.result’).nextAll().html(”);
$(elem).closest(‘.result’).next().html(data);
…………………………………..
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;
);
…………………………………..
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.
…………………………………..
Try to use jQuery to bind the event instead putting a javascript link in the href.
$(‘.resultLink’).click(function()
var elem = $(this);
$.ajax(
url: uri,
success: function(data)
elem.closest(‘.result’).nextAll().html(”);
elem.closest(‘.result’).next().html(data);
});
});
…………………………………..
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:
For more info: How to detect the div in which a link to a javascript functi
HTML Language Development » Search Results » ajax