Update textbox with AJAX

Question

When a dropdown's value changes, I need the values of two textboxes to change, based on the new value of the dropdown, without refreshing the page.

This should be dead easy, but I'm having trouble figuring out what makes AJAX tick. I seem to be able to get the value, but I can't set the textbox.

This similar question didn't help me. Neither did this.

JavaScript:

// Dropdown ID = PatientID, textbox ID = DoB
var patient = $("#PatientID");
patient.change(function () {
    var newDob;
    $.ajax({
        url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
        type: "GET",
        success: function (result) {
            // Displays correct result
            alert(result);
            newDob = result;
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });
    // Causes the box to become blank, HTML value attribute doesn't change
    $("#DoB").val(newDob);
});

Controller:

[HttpGet]
public string PatientDob(int patientId)
{
    return db.Patients.Find(patientId).DateOfBirth.ToString("MM/dd/yyyy");
}

The request is asynchronous - success will run at some point in the future when the request is complete, currently $("#DoB").val(newDob); is called before that happens. Set the value where you currently alert() — Alex K.
– Alex K., Commented Jul 6, 2017 at 16:41
@AlexK. I don't think I've ever felt dumber in my life. Running on limited sleep. I think I had the .val() at the end from a previous stump and autopilot told me it needed to be set there. — Sinjai
– Sinjai, Commented Jul 6, 2017 at 16:47
There is an ajax complete event you can also use, api.jquery.com/ajaxcomplete — Jason Roner
– Jason Roner, Commented Jul 6, 2017 at 16:51
You should not put the answer in the same post as the question. Your answer is the same code as what ebraley posted.. and looking at what ebraley posted is clearer as that's in the answer section. I have removed it as there is no benefit to it being there and its location was only making things less clear. — barlop
– barlop, Commented May 16, 2019 at 0:16

ebraley · Accepted Answer · 2017-07-06 16:45:45Z

1

The $.ajax call is asynchronous, which means your $("#DoB").val(newDob); call is executing before before the AJAX request is even made. Changing needs to be done in the AJAX success callback.

// Dropdown ID = PatientID, textbox ID = DoB
var patient = $("#PatientID");
patient.change(function () {
    $.ajax({
        url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
        type: "GET",
        success: function (result) {
            $("#DoB").val(result);
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });

});

answered Jul 6, 2017 at 16:45

ebraley

2062 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sinjai Over a year ago

Not the first correct answer, but certainly the clearest. Alex won on both these fronts in the comments, but I suppose he doesn't need any more reputation.

Arun · Accepted Answer · 2017-07-06 16:43:58Z

1

Try to keep $("#DoB").val(result); inside the success function and see if it works.

Note: $("#DoB").val(newDob); is modified as $("#DoB").val(result);

answered Jul 6, 2017 at 16:43

Arun

3781 silver badge11 bronze badges

1 Comment

Sinjai Over a year ago

I'm an idiot. At least this can serve as the resource for a really simple AJAX request that I couldn't find.

Steve T · Accepted Answer · 2017-07-06 16:47:45Z

The problem is that ajax by default is asynchronous so that the las line in your code example is probably executed before obtaining the result from the server. You could either add async: false to your ajax call in order to wait for the result before executing your next javascript step:

 $.ajax({
    url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
    async: false,
    type: "GET",
    success: function (result) {
        // Displays correct result
        alert(result);
        newDob = result;
    },
    error: function (xhr, status, err) {
        alert(err);
    }
});
$("#DoB").val(newDob);

or (preferrably) set the text field in the success method of the call (this wouldn't block any other code from executing while you're waiting for the server result):

 $.ajax({
    url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
    async: true,
    type: "GET",
    success: function (result) {
        // Displays correct result
        alert(result);
        newDob = result;
        $("#DoB").val(newDob);
    },
    error: function (xhr, status, err) {
        alert(err);
    }
});

Shibu Murugan · Accepted Answer · 2017-07-06 16:51:57Z

0

try doing this. and please check if the textbox is pure html input or any plugin generated textbox. if second one, you have to check with the plugin to refresh with new content.

// Dropdown ID = PatientID, textbox ID = DoB
var patient = $("#PatientID");
patient.change(function () {
    var newDob;
    $.ajax({
        url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
        type: "GET",
        success: function (result) {
            // Displays correct result
            $("#DoB").val(result);
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });
    // Causes the box to become blank, HTML value attribute doesn't change

});

answered Jul 6, 2017 at 16:51

Shibu Murugan

311 silver badge8 bronze badges

Collectives™ on Stack Overflow

Update textbox with AJAX

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related