CODEWITHSUNDEEP
jqueryjquery-uimodal-dialog
rws907
rws907

Reputation: 777

jQuery Function to load content from page into Modal Dialog

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

Upvotes: 1

Views: 5418

Answers (3)

uzername_not_found
uzername_not_found

Reputation: 339

Try:

$('#modal').on('click', function(event){
event.preventDefault();

If this fails try see this:

Opening External URL in JQuery UI Dialog on Wordpress page

Upvotes: 1

Gromer
Gromer

Reputation: 9931

I'm not 100% sure what's up with the click event you're wiring up at the bottom. Sounds like #modal is an a element, though. The link's default behavior is most likely the culprit here, so add event.preventDefault();. I have added it to the first line of your .on.

Now, I'm not sure what that second click event is going to do, since you're wiring it up to the #modal link.

// Load external content in modal
$(document).ready(function(){       
    $('#modal').on('click', function(event){
        event.preventDefault();
        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;
        });
    });
});

After the modal html is loaded, do you want it to open, or are you really waiting for the user to click #modal again to open the dialog?

Upvotes: 1

wirey00
wirey00

Reputation: 33661

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.

Upvotes: 4

Related Questions