How to call simplemodal osx plugin programatically?

Question

I've implemented the simplemodal plugin for JQuery. Very nice btw! Where I'm having an issue, is I have a list of links that are generated from a database, when I click one, I make a "load" call and add the results to my osx-modal-content div. How do I call the osx plugin after my load completes? If I add class=osx to my a href, the modal opens before the content get into the div.

My Function to load html:

function loadContent(id) {
  $("#osx-modal-dialog").load("Item.cfm?ID="+id+"");
  // call OSX here????
  $('#osx-modal-dialog').modal();
 }

My DIV:

<div id="osx-modal-dialog">
  <div id="osx-modal-content">
<div id="osx-modal-title">Title</div>
<div id="osx-modal-data">
 <h2>Summary</h2>
    <p>Description</p>
 <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
  </div>
</div>

Currently the osx plugin is looking for input or a click event. I'm not sure how to script a 'click' event ofter my load. Or maybe there is a better way to call the plugin.

Includes:

Answer 1

The load method has a callback parameter where you can supply a function that will be executed when the load has completed. Use this callback to do trigger the dialog.

function loadContent(id) {
    $("#osx-modal-dialog").load("Item.cfm?ID="+id+"", function() {
        $('input.show-info').unbind('click') // remove any existing handlers
                            .click( function() { // bind click on button to show dialog
             $('#osx-modal-dialog').modal();
        });
    });
}

Update: I've updated this to show how to add a click handler in the callback of load(), but I don't know what event you want to handle nor what element the event is triggered on. I'll assume that you want to show the dialog when you click a button with class "show-info".

Answer 2

Here's what I would do:

Modify the OSX content (I removed most of the content and added a placeholder):

       

<div id="osx-modal-content">
               <div id="osx-modal-title">OSX Style Modal Dialog</div>
               <div id="osx-modal-data">
                       <div id="osx-data-placeholder"></div>
                       <p><button class="simplemodal-close">Close</button> <span>(or press
ESC or click the overlay)</span></p>
               </div>
       </div>

Your loadContent function:

       

function loadContent(id) {
               var d = $('#osx-modal-content');

               // load your page
               $.get("Item.cfm?ID=" + id, function(data) {

                       // replace the placeholder with the results
                       $('#osx-data-placeholder', d[0]).html(data);

                       // open the osx modal
                       d.modal({
                               overlayId: 'osx-overlay',
                               containerId: 'osx-container',
                               closeHTML: '<div class="close"><a href="#"
class="simplemodal-close">x</a></div>',
                               minHeight:80,
                               opacity:65,
                               position:['0',],
                               overlayClose:true,
                               onOpen:OSX.open,
                               onClose:OSX.close
                       });
               });
       }

I haven't tested it, but I'm pretty sure this should do the trick.

-Eric