When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console:
Uncaught TypeError: $(...).dialog is not a function
The HTML generated from the Ajax call includes this element, which triggers the modal:
<div class="edit" rel="630000311">630000311</div>
This is the relevant CSS for the edit class:
.edit {
cursor: pointer;
color: blue;
font-size: 16px;
padding-left:5px;
text-decoration: underline;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=50);
}
Here is my jQuery code:
$(document).ready(function(){
$('body').on('click','.edit', function(){
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$("#viewDialog").dialog({
width: 1140,
modal: true,
position: { my: 'top', at: 'top+150' },
});
var partID = $(this).attr('rel');
$.ajax({
async: false,
type: 'GET',
url: "parthistory.php",
data: {
"partID" : partID
},
success: function (data) {
$("#viewDialog").html(data);
}
});
});
});
I have attempted to solve the issue by adding $(document).trigger('ready'); inside the success function, but it did not help.
Note: These are the jQuery scripts I am loading:
code.jquery.com/jquery-1.11.1.min.js"
code.jquery.com/ui/1.11.1/jquery-ui.min.js"
code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"