Question

I’m sure there is a simple solution for this but thus far it’s eluding me. I’m attempting to open a modal window using jqueryui from within a function and it fails with the message “dialog is not a function”. Eventually I’m going to fill the modal with content pulled via ajax, but I’ve stripped it down to the bare bits to figure out why I can’t instantiate the modal window. I’m using jquery 1.7.2 and jqueryui 1.8.18 from the google CDN.

<!-- as a link -->
<a href="javascript:view_log('1');">Log 1</a>

<!-- as a button -->
<input type="button" id="thebutton" value="View Log" />

<script type="text/javascript">

/* this works on page load */
var test1 = $(document.createElement('div'));
test1.dialog({ modal:true });
test1.html('Testing');

/* this also works (on page load) */
function displayModal(content) {
    var newDiv = $(document.createElement('div'));
    newDiv.dialog({ modal:true });
    newDiv.html(content);
}
displayModal('Testing by calling displayModal() function');

/* this fails with error "newDiv.dialog is not a function" */
function view_log(id) {
    displayModal('Log for id ' + id);
}

/* this also fails, same error ... */
$('#thebutton').bind('click', function() {
    displayModal('Testing again...');
});

</script>

Any jquery experts that can point out my error?

Thanks!

Answer 1

It is working fine for me. The only thing I can think of is you should use $(document).ready(function() {});

$(document).ready(function() {
    $('#thebutton').bind('click', function() {
        displayModal('Testing again...');
    });
});

Live DEMO