JQuery Autocomplete inside SimpleModal

Question

I have a simple textbox with JQuery autocomplete inside a div on which I use SimpleModal to make a modal dialogue. The first time the modal dialogue is called, the autocomplete works fine. After the dialogue is closed it completely stops working. Does anybody have any ideas what this could be due to?

Code is as below:

Dialogue html:

<div id="simplemodal">
<div class="content">
    <span class="label">国名</span>
    @Html.TextBox("NewRegion", "")
</div>
<div class="commands">
    <a>追加する</a>
    <a class="simplemodal-close">キャンセル</a>
</div>

and the script for the dialogue

/*Show add region dialogue*/
function AddNewRegion(ProjectID) {
    $('#simplemodal').modal({
        closeHTML: 'simplemodal-close',
        closeClass: 'simplemodal-close'
    });
}

The autocomplete script

$(function () {
$('#NewRegion').autocomplete({ source: '/Regions/FindRegions' } );
});

I know this has been asked before, but it looks like the question never got answered.

You mean as in making a function CreateAutoComplete() { $('#NewRegion').autocomplete({ source etc... }); } and executing that when I call the modal? Or do you mean something else? — yu_ominae, Aug 18 '11 at 09:21
I think on closing the dialog, it might be destroying the autocomplete. So before showing or immediately after showing dialog you can call the code to re-create autocomplete. — TheVillageIdiot, Aug 18 '11 at 09:40
OK, that's what I thought you meant. I asked because I am still pretty new at anything JS. I tried your suggestion, but unfortunately it didn't make a difference. — yu_ominae, Aug 18 '11 at 09:58
Digging up an old post, but anyone ever figure this out? Running into the same issue. — Geesu, Feb 09 '13 at 21:44
Sorry, I never found a way to get this to work. If you do, please let me know. — yu_ominae, Feb 12 '13 at 00:08

score 0 · Answer 1 · answered Feb 17 '14 at 10:40

The below code might help you

$(document).ready(function () {
    $("#NewRegion").autocomplete({
        source: function(request,response) {
            $.ajax({
                url: "/Regions/FindRegions",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { value: item.Country };
                    }))

                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

score 0 · Answer 2 · answered Jan 19 '15 at 14:03

0

I've ran into this problem as well. It can be solved by setting the persist option to true when opening the modal dialog.

No need to reinstall the autocomplete handler each time you open the modal dialog.

answered Jan 19 '15 at 14:03

jademe

1

score 0 · Answer 3 · answered Aug 20 '11 at 03:58

0

Consolidate your two JS code samples into:

/*Show add region dialogue*/
function AddNewRegion(ProjectID) {
    $('#simplemodal').modal({
        closeHTML: 'simplemodal-close',
        closeClass: 'simplemodal-close',
        onShow: function (dialog) {
            $('#NewRegion', dialog.data[0]).autocomplete({ source: '/Regions/FindRegions' } );
        }
    });
}

If that does not work, let me know.

answered Aug 20 '11 at 03:58

Eric Martin

2,841
2
23
23

Hi Eric, thanks for your reply and sorry for taking so long. I finally got to try this out, but the JQuery UI autocomplete list still only shows the first time the dialogue is opened. Is there anything else you can think of that I could try to make this work? – yu_ominae Aug 24 '11 at 00:35

JQuery Autocomplete inside SimpleModal

3 Answers3