Asp.net OnClick event is not triggering after ajax is called too many times.

Question

I am working on dashboard and using gridStack.I am updating database with ajax. The data is x,y positions of html elements(some divs on page). Here is my javascript code:

// The "dragstop" fucntion is called when I stop dragging the <div> element.

     $(".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){
    //I am always getting the success response and I checked DB is also updating
                console.log(data); 
            },                 
            error: function(){
                console.log("some error occoured db is not updated!!");
            }
        });
    } catch (e) {
        alert(e);
    }
}

Now the problem is if I call the above function too frequently (too many drag/drop). And then click the below mentioned asp.net button, the page gets reload but the OnClick events doesnot triggered (also in debug mode the codes is not called at all). After Page gets reload and I click the second time on this button then the onClick event gets triggered.

<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 don't have any idea why its behaving like this. Could it be related to the IIS security or viewstate ?

score 0 · Answer 1 · answered Jan 23 '17 at 11:20

After spending 2 days I find out that it was the error with the ViewState. I am adding this may be it would be helpful for people who are using GridStack.JS

I added the following lines of code and it fixed the problem.

protected override void OnInit(EventArgs e)
        {
          Page.ViewStateMode = ViewStateMode.Disabled;
        }

Asp.net OnClick event is not triggering after ajax is called too many times.

1 Answers1