Save button of telerik Grid edit popup window fire twice.

[Rajeev]

Hi all,

have a fairly simple grid (version 2011.2.712.340) with ajax binding. The grid has editing set to popup. Everything was working fine till today. The "Add New Record" popup or the "Edit" popup.

I got issue on Grid edit popup window save button. When I click save button twice it will save two reocrd in grid. I want to disable save button on single click  and enable after save record.

Any Idea about how handle this.

Thanks

[venky]

I am facing the same problem of posting twice from the save button in InCell editing mode.
Anybody @Telerik please help.
Thanks

[Pedro]

Try adding this to the bottom of your page:

<script>

$('input[type="submit"]').on('click', function () {
    $(this).attr('disabled','disabled');
});

</script>

Pedro

[Rajeev]

Hi Pedro-Martir,

Thanks your reply.
I have added this script on my view. I got this error "Microsoft JScript runtime error: Object doesn't support property or method 
on this line. 

$('input[type="submit"]').on('click', function () {

$(this).attr('disabled','disabled');

});

Thanks!



 

[Yui]

sorry wrong post

[Keith]

I am assuming there is no answer for this?  I am not getting this example to work - AT ALL!  I am getting so tired of having to find a work around for pretty much everything we need to do.  Yes, the grid is great at displaying data but try to interact in a business mode and the whole house of cards comes tumbling down.  <bleh/>

So yes - HOW DO YOU DO THIS???

[Pedro]

Hello Keith,

What do you need?

[Pedro]

@Keith

this is using the latest jquery.

try this:

<script>

$('input:submit').on('click', function () {
    $(this).prop('disabled',true);
});

</script>

You can see it working here jsfiddle

if the popup window is being created on the fly then we have to change the code to reflect it. like so:

$(document).on('click', 'input:submit', function () {
    $(this).prop('disabled',true);
});

You can see this one working here other jsfiddle

[Keith]

Yes, on an <input> tag it works fine.  Unfortunately your grid control does not create an <input> tag.  Instead I see this:

<a href="#" class="t-button t-grid-insert t-button-icontext"><span class="t-icon t-insert"></span>Insert</a>
<a href="#" class="t-button t-grid-cancel t-button-icontext"><span class="t-icon t-cancel"></span>Cancel</a>

Currently, I am *TRYING* to do it this way:

function onSave(e) {
    var dataItem = e.dataItem;
    var values = e.values;
    var form = e.form;

    if ($(".t-button.t-grid-update.t-button-icontext").attr("disabled") == "disabled") {
        e.preventDefault();
    }
    if ($(".t-button.t-grid-insert.t-button-icontext").attr("disabled") == "disabled") {
        e.preventDefault();
    }

    //++ TODO - Disable Update/Insert links when clicked...
    $(".t-button.t-grid-update.t-button-icontext").attr("disabled", "disabled");
    $(".t-button.t-grid-insert.t-button-icontext").attr("disabled", "disabled");
}

Unfortunately, it appears that the preventDefault() does nothing as far as the AJAX call is concerned.  I am still getting double and triple saves (just click on the Update "button" real fast.)  This will NOT pass QA!

Any other suggestions?

[Pedro]

Hello Keith,

I was under the impression it was an input tag. I apologize.

Since it is an anchor tag.

Yes, here is my suggestion:

This would be the best way to stop multiple clicks.

$(document).on('click', '.t-grid-insert', function () {
    $(this).unbind('click');
});

now this will remove the click event from the Insert anchor tag. Does your page do a post back after insert? If so, this solution will work 100%. 

If you are using ajax, you'll have to test it out for me.

Thanks,

Pedro

[Keith]

This is your Grid control.  I really do not understand where in the chain of events the AJAX call to my controller/action happens.  I'm not sure why the solution was given as if you expected an <input> tag when in reality your grid produces an <a> tag.  And, if there are errors with the submission then it will come back to the popup and should allow the user to continue making changes and submit again - without closing the popup during the AJAX call.  So, while you example shows me how to unbind the click event, how would I rebind the correct handler to the click event in the case of an error?