Simple Modal with Autocomplete in ASP.NET
- by DanielJaymes
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')
}
};
});
