Reputation: 5150
I have an asp.net page that returns a partial view in the tab I am currently doing my work in. I have the jQuery all set up and it works. It works one time and through ajax returns a partial view .html(result);
However this only works one time. I click the button it does everything behind the scenes like it should, it replaces the html like it should. Then when I click the button again nothing, its like the jQuery doesn't exist for these buttons any more. There is no page reload this is all done through ajax.
the HTML that is used when the page first is loaded and the HTML returned through .html(result) is the exact same html same partial view is used for both.
Is my jQuery somehow being disconnected when this partial view is returned?
Here is my Ajax call:
function updateSort(object) {
jQuery.ajax({
url: "/MasterList/UpdateSort",
type: "get",
data: object, //if you need to post Model data, use this
success: function (result) {
//alert('success');
//console.log(result);
jQuery("#procedures").html(result);
}
});
}
Here is the button click:
jQuery(".btnMoveUp").click(function () {
var $this = jQuery(this),
processID = $this.data('processid'),
currProcedureID = $this.data('procedureid'),
currSortOrder = $this.data('sortorder'),
idx = jQuery('.commentlist li').index($this.closest('li')),
$prevLi = jQuery('.commentlist li').eq(idx - 1),
$anchor = $prevLi.find('.btnContainer a'),
prevProcedureID = $anchor.data('procedureid'),
prevSortOrder = $anchor.data('sortorder');
// create object that we can pass to MVC controller
var objProcedure = {};
objProcedure = {
_processID: processID,
_currProcedureID: currProcedureID,
_currSortOrder: currSortOrder,
_switchProcedureID: prevProcedureID,
_switchSortOrder: prevSortOrder
}
updateSort(objProcedure);
});
Why would this work only a single time?
Upvotes: 1
Views: 3103
Reputation: 318352
You should be using a delegated event handler, like so :
$('#procedures').on('click', '.btnMoveUp', function () {
var $this = jQuery(this),
processID = $this.data('processid'),
currProcedureID = $this.data('procedureid'),
currSortOrder = $this.data('sortorder'),
idx = jQuery('.commentlist li').index($this.closest('li')),
$prevLi = jQuery('.commentlist li').eq(idx - 1),
$anchor = $prevLi.find('.btnContainer a'),
prevProcedureID = $anchor.data('procedureid'),
prevSortOrder = $anchor.data('sortorder');
// create object that we can pass to MVC controller
var objProcedure = {};
objProcedure = {
_processID: processID,
_currProcedureID: currProcedureID,
_currSortOrder: currSortOrder,
_switchProcedureID: prevProcedureID,
_switchSortOrder: prevSortOrder
}
updateSort(objProcedure);
});
Upvotes: 3
Reputation: 36113
Use the [OutputCache]
attribute on your action to help avoid caching.
[OutputCache(Duration = 0)]
Upvotes: 1
Reputation: 4278
I've had a similar problem and it was because the response was being cached. You can set jQuery ajax attributes for caching to false.
$.ajaxSetup({ cache: false });
Upvotes: 2