After jquery AJAX call, I can't enable a text input.

Question

0.00/5 (No votes)

See more:

ASP.Net app uses JQuery AJAX. Before the AJAX call I can update the input in a text box, but after the AJAX call it seems completely disabled allowing no editing in text box, but other controls (CheckBox, Buttons, datepicker) are still enabled.
Notice at the end in .complete, I added a line to try to force it enabled, no help though:
$('#idtxtLoggingDaysDisplayed').prop('disabled', false);
Any suggestions would be very appreciated. Thanks, Mike

$.ajax({
    type: "POST",
    url: "GC_UserErrors.aspx/receiveAJAXMessage",
    data: sMsg1,
    beforeSend: function () {
        $(document).keydown(function () { return false; }); // disable keyboard input
        $(".overlay").show(); // show loader
        $('#loadingGIF').show();
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    complete: function () {
        $(document).keydown(function () { return true; }); // enable keyboard
        $(".overlay").hide(); //hide loader
        $('#loadingGIF').hide();
        $('#idtxtLoggingDaysDisplayed').prop('disabled', false);
    },
    success: OnSuccess,
    failure: //function (response) {
        OnFailure
});

What I have tried:

Also tried

$('#idtxtLoggingDaysDisplayed').attr('disabled', false);

Posted 24-Oct-18 4:37am

Michael Breeden

Updated 25-Oct-18 7:35am

Add a Solution

Comments

MadMyche 24-Oct-18 11:42am

Any errors being thrown/shown in the browsers developer console? (eg firebug)

Michael Breeden 24-Oct-18 12:34pm

No, there's nothing in the console. (Using Chrome Developer Tools.) ... That was a good call. I tested in FF and there is nothing in the console but what I put there.

MadMyche 24-Oct-18 13:04pm

And is there data being returned?

Michael Breeden 24-Oct-18 13:09pm

Yes. I'm reading the value in the textbox and sending it with AJAX. It works the first time, then the text box becomes "read only" or "disabled", but I can update other controls and re-run the AJAX process. All data is read and sent correctly including the data in the text box. I just cannot modify that data.

Bryian Tan 24-Oct-18 21:44pm

What version of jQuery the code is using? complete() function could be deprecated . replaces with always() jQuery.ajax() | jQuery API Documentation[^]

Michael Breeden 25-Oct-18 9:29am

I'm using jquery-1.8.2.min.js, but now that you mention it, I'll try with jquery-2.2.0.min.js ... No Help. Sew... let see what happens if I individually disable and enable all the controls instead.
(1)comment out the code:
$(document).keydown(function () { return false; });
That fixes the problem, though it does not explain it...
With breakpoints disabled, the response is almost instantaneous, so I'm not sure just what to try to disable that is going to help. It's a simple form. Ahhhh. The button could inadvertently be clicked twice (does an html switch have bounce like a mechanical switch does? :) ). The date picker though could not be used in the time it takes for the AJAX response to complete.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2018-10-25T07:36:00

Quote:
comment out the code:
$(document).keydown(function () { return false; });
That fixes the problem, though it does not explain it...

The problem is, you're not removing the event listener; you're simply adding another event listener.

You now have two listeners for the same event. One returns false; the other returns true. There's no guarantee which order these listeners will be executed in, and no way of combining the return value from both listeners.

Move your listener to a separate function. Then you can use the off method[^] to remove the listener.

You can also move the beforeSend code immediately before the ajax call, and use the promise interface methods for the callbacks.

JavaScript

var preventKeyboard = function() { return false; };

$(document).keydown(preventKeyboard); // disable keyboard input
$(".overlay").show(); // show loader
$('#loadingGIF').show();

$.ajax({
    type: "POST",
    url: "GC_UserErrors.aspx/receiveAJAXMessage",
    data: sMsg1,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
})
.done(OnSuccess)
.fail(OnFailure)
.always(function(){
    $(document).off("keydown", preventKeyboard); // enable keyboard
    $(".overlay").hide(); //hide loader
    $('#loadingGIF').hide();
    $('#idtxtLoggingDaysDisplayed').prop('disabled', false);
});

After jquery AJAX call, I can't enable a text input.

1 solution

Solution 1

Add your solution here

Preview 0

After jquery AJAX call, I can't enable a text input.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us