Question

I have the following function that should load the div id “content” into the Modal Dialog for any link with the id of “#modal”.

EDIT

I understand that ID’s must be unique, but in this instance, there is no repetition of #modal on any of the pages that would actually use this function. I have even made #modal a class by specifing .modal instead of #modal. the result is the same

END EDIT

// Load external content in modal
$(document).ready(function(){       
    $('#modal').on('click', function(event){
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                draggable: false,
                overflow: scroll,
                title: $link.attr('title'),
                width: $link.attr('width')
            });

        $link.click(function(){
            $dialog.dialog('open');
            return false;
        });
    });
});

What happens though is that the click event just goes to the link instead of loading the external page into the Modal Dialog. All required jQuery and jQuery UI libraries are included and linked from the Google jQuery repository. From what I’ve read and examples I’ve seen this SHOULD work.

I have also tried using

$('#modal').bind('click', function(){

and

$('#modal').click(function(){

Thanks in advance

Answer 1

It goes to the link because you didn’t prevent the default anchor behavior. use event.preventDefault

$('#modal').on('click', function(event){ // <-- modal is a link with a `href`
        event.preventDefault(); // <--
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({

An anchor with an href property – when clicked – goes to the link provided inside the href. If you don’t prevent that default action, it will go there.