Hello,

I am quite new to this so any help is very much appreciated. I am generating a modal pop using Simple Modal, this works ok.

I now want to add jquery autocomplete to the element txtEmail. When I run the page outside of Simple Modal I can use Autocomplete, however when the page is loaded through Simple Modal it does not work.

I have checked to ensure the element is loaded, and it is allowing me to change the text color, but I can not add autocomplete to it.

The code is

/**
* @author Daniel
*/
jQuery(function($) {

    $("input.ema, a.ema").click(function(e) {
        e.preventDefault();
        $("#osx-modal-content").modal({
            appendTo: 'form',
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>',
            minHeight: 80,
            opacity: 65,
            position: ['0', ],
            overlayClose: true,
            onOpen: OSX.open,
            onClose: OSX.close,
            onShow: OSX.show

        });
    });

    var OSX = {
        container: null,
        open: function(d) {
            var self = this;
            $.ajax({
                url: "/Message/UserMessage/",
                type: 'GET',
                dataType: 'html', // <-- to expect an html response
                success: function(result) {
                    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
                    $('div#osx-modal-data').html(result).find("#txtEmail").css('color', '#c00');

                    if ($('div#osx-modal-data').find("#txtEmail").length) { // implies *not* zero
                        $('div#osx-modal-data').find("#txtEmail").autocomplete(data);
                        alert('We found img elements on the page using "img"');
                    } else {
                        alert('No txtEmail elements found');
                    }
                }
            });


            self.container = d.container[0];
            d.overlay.fadeIn('slow', function() {
                $("#osx-modal-content", self.container).show();
                $('div#osx-modal-title').html("Send Email");
                var title = $("#osx-modal-title", self.container);
                title.show();

                d.container.slideDown('slow', function() {
                    setTimeout(function() {
                        var h = $("#osx-modal-data", self.container).height() +
                        title.height() +
                        20; // padding
                        d.container.animate({
                            height: h
                        }, 200, function() {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();

                        });
                    }, 300);
                });
            })

        },
        close: function(d) {
            var self = this;
            d.container.animate({
                top: "-" + (d.container.height() + 20)
            }, 500, function() {
                self.close(); // or $.modal.close();
            });
        },
        show: function(d) {

            // $('div#osx-modal-data').find("#txtEmail").css('color', '#ccc')
        }
    };
});