Simplemodal ajax call

Hello everyone,

I'm implementing Simplemodal in an application of mine using this code:

$(".dialog-link").live('click', function(e) {
 e.preventDefault();
 $.get($(this).attr('href'),function(data) {
  $.modal(data, {onOpen: open, position: ['10%','30%']});
 );
});

(FYI: the onOpen callback just sets some height)

The document returned by the ajax call (contained in data) has some jquery calls to datepicker, etc. But when my dialog displays the datepicker won't work.

I know I can open the datepicker from the onShow callback, but the ideal would be to call a function contained in data because each dialog can have different jquery calls.

Is there a way to do for example

onShow: function(dialog) { dialog.data.my_function(); }

Thanks, Michael

As a DOM inspection may reveal (firebug is always handy...), the modal dialog loads the external document into a div, stripping out the <html> and <head> tags. It also seem to import into the scope of the main window objects and functions defined in the loaded document.

Therefore calling a function as if it was in the scope of another window or frame ( *dialog.data.my_function* ) will not work.

What works for me instead is to bind directly the external function to the onShow event.

main document:

    <script type="text/javascript">
        $("a.dialog-link").live('click', function(e) {
           e.preventDefault(); 
           $.get($(this).attr('href'),function(data) {
           $.modal(data, {position: ['10%','30%'], onShow: function(dialog){ 
                                                           external_function()
           }});
         });
    </script>

External document (loaded into the modal box:)

<html><head><title>bla bla </title>
   <script type="text/javascript">
      function external_function(){$("#external_content").text("UPDATED!")};
   </script>
</head>
<body>
 <div id="external_content"> .... </div>
</body>
</html>

Hope this helps :)

ansaurus

tags:

views:

answers:

Simplemodal ajax call

related questions