Question

Okay, so I’ve got the following code shown below to create a dialog using a div within a particular page:

    $('#modal').dialog({
    autoOpen: false,
    width: 600,
    height: 450,
    modal: true,
    resizable: false,
    draggable: false,
    title: 'Enter Data',
    close: function() { 
        $("#modal .entry_date").datepicker('hide');
    } 
 });

 $('.modal').click(function() {
    $('#modal').dialog('open');
 });

It is all working fine. However, now what I want to do is to also be able to open a link in a dialog window. For example using
something along the lines of the code below:

<a href="/path/to/file.html" class="modal">Open Me!!</a>

I’ve done this before by hardcoding the path as in the example code below:

$('#modal').load('/path/to/file.html').dialog('open');

In this case however, we can’t hardcode the path in the javascript as there will be multiple items coming from the database.

At this point I’m struggling to understand how to get this to work. I’m also convinced that the answer is really obvious, and I’m merely setting myself up to be humbled by the clever folk here at StackOverflow.

I’ve scratched my head for long enough this afternoon, so my ego has been put away, and hopefully someone can point me in the right direction on how to code this properly.

Answer 1

You can just grab the href attribute and load that

$('.modal').click(function(e) {
    e.preventDefault();
    $('#modal').load(this.href).dialog('open');
});