Trying to open multiple jQuery UI dialogs, and loading them when clicked

Question

I'm trying to open multiple dialogs through multiple links with the same class, but only load the content when the open dialog link is clicked,
So I've been playing with Nemikor's solution to load content dynamically, and Nick Craver's multiple dialogs approach, and came up with this code:

$(document).ready(function() {
    $('.addBtn, .editBtn').each(function() {
        var $link = $(this);
        var $nextDiv = $(this).next('.editDialog');
        $.data(this, 'divObject', $nextDiv);
        $.data(this, 'dialog',  
            $nextDiv.dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    width: 700,
                    height: 650 
                }) 
        ); 
    }).click(function() {  
        $.data(this, 'divObject').load($(this).attr('href'));
        $.data(this, 'dialog').dialog('open');
          return false;  
      });
});

When I load the page, the first link I click (doesn't matter which one) works perfectly,
But if I press another one - the browser navigates to the content instead of opening it in a dialog, and sends an error message:

Error: $.data(this, "divObject") is undefined

Please Help !

score 1 · Answer 1 · answered Aug 16 '11 at 18:51

This is a little script that I wrote to do (kind of) dynamic dialog boxes

$(".dialog").dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode",
    draggable: false,
    resizable: false
});

$(".opener").click(function () {
    diagId = ($(this).attr("id"));
    $("." + diagId).dialog("open");
    return false;
});

<a class="opener" id="SomeDiag">

<div class="dialog SomeDiag" title="DiagTitle">
   <p>blah blah blah copy copy copy</p>
</div>

I saw kind of dynamic because I'm not passing in content, but dynamic in opening predefined content

Trying to open multiple jQuery UI dialogs, and loading them when clicked

1 Answers1