how can i replace an image (inside a div) through jquery and ajax
I am trying to click on an image and change it to another image through jquery.
When i step through the below code, on the serverside, the controller action fires and on the client side, i can see the correct 开发者_JAVA百科html return in firebug watch window but the image doesn't change at all. any idea why this div is not updating?
original div:
<div class="inlineDiv" toggle="off" id="22"><img src="../../images/vote-favorite-off1.png" border="0"></div>
jquery code:
$(document).ready(function() {
$('div.inlineDiv').live('click', function() {
var id = $(this).attr("id");
var toggle = $(this).attr("toggle");
var url = '/Tracker/Update?id=' + id + '&toggle=' + toggle;
$.get(url, function(data) {
$(this).html(data);
});
});
});
controller action:
public ActionResult Update(int id, string toggle)
{
if (toggle == "off")
{
return Content("<img src='../../images/vote-favorite-on1.png' border=0'>");
}
return Content("<img src='../../images/vote-favorite-off1.png' border=0'>");
}
i believe the this
in the get is referring to the get's function.
easier:
$(this).load(URL);
$(this)
isn't referring to the correct object at this point. Try assigning the object to a variable first, or just say $('div.inlineDiv').html(data)
var objDiv=$(this);
$.get(url, function(data) {
objDiv.html(data);
});
another method would be $('div.inlineDiv img').attr('src',returnedPath);
but you'd have to update the controller action to return just the src path.
or as said below $('div.inlineDiv').load(URL);
精彩评论