Search jQuery

jQuery Forum

Using jQuery UI

steve_333

Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

Answered

Need more info
Working on it
Answered

in Using jQuery UI • 11 years ago

Hi there,

I'm playing around with jQuery at the moment, and am attempting to wire-up a textbox to have jQuery autocomplete functionality.

The web-page in question uses Ajax.BeginForm to start a form, and various divs within that form are made visible and invisble each time the form talks to the server (using Ajax).

The textbox in question is inside an invisible div when the form starts up. I use display:none to hide the div, so it is still in the HTML that is sent to the client, just invisible. Later, when the contents of the main outer div are refreshing using an Ajax POST, the autocomplete functionality doesn't work. However, if I put the text box in a div that is always visible, autocomplete works fine.

Is this a problem anyone else has experienced before? Any assistance gratefully received.

Thanks in advance,

Steve.

P.S. I'll put together a small demo app to show the problem. I'll update when ready...

Replies(4)

steve_333

Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

11 years ago

Ah! Cracked it.

Evidently, the DOM does not get properly loaded when an Ajax update occurs and things get lost or are unavailable for being wired up, so you have to find a new way to wire up controls when posting back. I saw a number of articles online about using pageLoad() and livequery(), but I couldn't get any of these to work.

Instead, I've simply wired-up the autocomplete using the onfocus event:

<input type="text" id="Box1" onfocus="javascript: setBox1AutoComplete();" />

...and then included a function:

<script type="text/javascript">
        function setBox1AutoComplete()
        {
            $("#Box1").autocomplete({
                source: function (request, response) {
                    $.getJSON("<%=Url.Action("GetItems", "Home") %>", { term: request.term }, function (data) {
                        response($.map(data, function (el) {
                            return {
                                id: el.Id,
                                label: el.Name,
                                value: el.Name
                            };
                        }));
                    });
                },
                dataType: 'json',
                minLength: 3,
                delay: 100,
                mustMatch: true,
                select: function (event, ui) {
                },
                close: function(event, ui) {
                }
            });
        };
    </script>

...so that everytime you enter the textbox, the autocomplete wires up. This feels kinda messy, but it works reliably, and for some reason it DOESN'T handle the event multiple times when if you enter and re-enter the text box repeatedly without an update.

While this won't work for all jQuery issues, it should solve any that require a control to be entered/hovered over before functionality is required.

Cheers,

Steve.

steve_333

Re: Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

11 years ago

Am I allowed to mark my own answer as the best answer?! ;)

chrisvill..

Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

11 years ago

hi steve!

sure, you can do that. in my opinion, it really helps everyone out when users mark threads as "best answer". this helps other users know when something was resolved without having to read threads with no resolution to issues. follow-up responses are always a good thing, even if the "best answer" comes from the original poster.

steve_333

Re: Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

11 years ago

Thanks Nickadeem. That's good to know.

Does anyone else have any thoughts on my "onfocus" solution? Are there any user input combinations that can get round this and prevent the autocomplete from working?

Steve.

Top Reply

Response title

Attachments

jQuery Forum

Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

Answered

Replies(4)

Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

Re: Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

Re: Re: Problems using jQuery and Ajax.BeginForm in ASP.NET MVC2

Statistics

Tags

Actions