Currently, I'm working on a dashboard project and utilizing gridStack for the layout. As part of this process, I am updating the database using ajax to store the x and y positions of various HTML elements (specifically divs on the page). Below is the JavaScript code snippet that handles this functionality:
// The "dragstop" function is triggered when dragging of the div element stops.
$(".grid-stack").on("dragstop", function () {
setTimeout(function () {
saveAllWidgets();
}, 100);
});
function saveAllWidgets() {
var serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
el = $(el);
var id = el.attr('id');
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height,
id: id
};
});
var jsonString = JSON.stringify(serializedData);
try {
$.ajax({
type: "POST",
url: '/STARCOHttpHandlers/UpdateDashboardWidget.ashx',
contentType: "application/json; charset=utf-8",
data: jsonString,
dataType: "json",
success: function(data){
console.log(data);
},
error: function(){
console.log("An error occurred, database was not updated!!");
}
});
} catch (e) {
alert(e);
}
}
The issue I am encountering is that if the above function is called too frequently due to excessive drag-and-drop actions, and then I click on an ASP.NET button mentioned below, the page refreshes but the OnClick event is not triggered (even in debug mode where the code does not get executed at all). Only after refreshing the page and clicking on the button a second time does the OnClick event trigger properly.
<asp:Button runat="server" ID="btnUndoChanges" CssClass="btn" Text="Undo all changes" OnClick="btnUndoChanges_OnClick"/>
protected void btnUndoChanges_OnClick(object sender, EventArgs e)
{
return;
}
I am unsure why this behavior is occurring. Is it possibly related to IIS security settings or the viewstate?