Persistent TextBox After

Question

This is supposed to be easy, but I could not figure out how to do it. I have a textbox where a user will type a name to search for. Then, the user will have to provide some additional information such as selecting the state where the person live from a drop down. After the state is selected, I am doing an Ajax post to get a list of cities within that state. The issue is that as soon as the Cities are loaded, I lost the value that was typed in the textbox. How can I make this textbox persistent, so I don't loose the value?

function ValueSelected(state, city, zip) {
        var SelectedState = state;
        var SelectedCity= city;
        var ZipCode= zip;
        if (SelectedState.length > 0) {
            // var url = '@Url.Action("SetState", "FindPerson")';
            $.ajax({
                url: '@Url.Action("SetState", "FindPerson")',
                type: 'POST',
                datatype: 'text',
                data: { "SelectedState": SelectedState, "SelectedCity": SelectedCity, "ZipCode": ZipCode},
                cache: false,
                // contentType: 'application;text;charset=UTF-8',
                success: function (e) {
                    window.location.href = window.location.href;
                },
                error: function (e) {
                    alert('error');
                }
            });
        }
    }

Update 08/07/2014 :

I write a function that will add the textbox value to a cookie when the user select something from the drop down. Then, I check the cookie to see if the cookie has something in it when the page is loaded. I set the cookie to expire after 30 minutes.

 function setCookieInfo(name, value) {
        if (name != null && name != "") {
            setCookie(name, value, 24);
        }
    }

try to comment out window.location.href = window.location.href, I'd say this reloads your page and your value is lost — fuchs777, Aug 07 '14 at 15:23
I am adding the IEnumerable and IEnumerable to a ViewBag. I would not be able to see them if I don't do a refresh. — Josiane Ferice, Aug 07 '14 at 15:42
the parameter in the success function will contain anything you return from your action, even a partialview, e.g. http://stackoverflow.com/questions/3490059/return-a-partialview-from-ajax-post — fuchs777, Aug 07 '14 at 15:47

score 0 · Accepted Answer · answered Aug 07 '14 at 16:04

Since you are doing all of this client-side, I would not recommend doing window.location.href because that doesn't keep any of the client-side settings. Instead, you should handle everything on the client or setup a form in your view and call (note I'm using JQuery here) $("#form").submit() to post back the values. In that form you can have hidden fields to post back all the selected values, and reload them from the server.

Also, when you do an AJAX request, success returns anything, so your action can return:

return PartialView("XYZ");

And that HTML will be returned, which you can append to the UI. You can also return JSON, and build up the <select> item containing the cities.

It's not good to use window.location.href = ... because that makes constant get requests to the server, and you would have to pass the information in the querystring.

Persistent TextBox After

1 Answers1