0

I have almost working code, but I can't make autocomplete work in pop-up window. If I do next thing: when project is running, open Pop-up window and type in FireBug console: 

 $(":input[data-autocomplete]").each(function() {
                        $(this).autocomplete({ source: $(this).attr("data-skillsautocomplete") });
                    });

then everything works perfect. So, the problem is that I don't know how to pass my jquery function to pop-up window. Help me with that, please.

JS

ko.bindingHandlers.jqDialog = {
    init: function(element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).dialog("destroy");
        });
        setTimeout(function() {
            $(element).dialog(options);
        }, 0);
    }
};
ko.bindingHandlers.openDialog = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            $(element).dialog("open");
        } else {
            $(element).dialog("close");
        }
    }
};
ko.bindingHandlers.jqButton = {
    init: function(element, valueAccessor) {
    var options = ko.utils.unwrapObservable(valueAccessor()) || {};
    //handle disposal
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).button("destroy");
    });
    $(element).button(options);
    }
};

     $(":input[data-autocomplete]").each(function() {
                        $(this).autocomplete({ source: $(this).attr("data-skillsAutocomplete") });
                    });

     function pageModel() {

        self.selectedVacancyForEdit = ko.observable();
        self.skillToAdd = ko.observable();

        self.editVacancy = function(){
            self.selectedVacancyForEdit(new Vacancy());
            //here pop-up window opens
        }  
        self.addSkill = function(){
            //adding skill
        }  
    }

UI
     ....code....
    //Pop-up window
    <div id="details" data-bind="jqDialog: { autoOpen: false, resizable: true, modal: true, width:'auto'}, template: { name: 'editTmpl', data: selectedVacancyForEdit, if: selectedVacancyForEdit }, openDialog: selectedVacancyForEdit"></div>
        <script id="editTmpl" type="text/html">   
            <fieldset>
                 <form data-bind="submit: $root.addSkill">
                     Add skill: <input type="text" data-bind="value: $root.skillToAdd, 
                                 valueUpdate: 'blur'"
                                 data-skillsAutocomplete="@Url.Action("SearchSkill", "Home")"
                                 name="search"/>`
            </fieldset>
    </script>
</div>
4

1 回答 1

0

尝试改变

$(":input[data-autocomplete]")

至

$("input[data-autocomplete]")
于 2013-11-06T13:07:36.303 回答