ansaurus

Question

How to get a callback working with SimpleModal

Answer 1

A:

First you do not have to add the onclick attribute when using jQuery. Assume

 <a id="clicker" href="http://url/" >Click</a>

Then

  $(document).ready(function(){
      $("#clicker").click(function(){
          $(this).modal({width:833, height:453, onClose: function(){ 
             //your code here}})
          .open(); 
          return false;
      });

 });

The $(this) reference actually refers to the a tag, maybe you might want to use a div called dialog like this:

 <div id="dialog"></div>

and change the jQuery to

$("#dialog").modal(...)

UPDATE: Based on your comment. try this.

   <head>
      <!-- Include your script tags here to load the jQuery and simplemodal scripts -->
      <script type="text/javascript">
          $(document).ready(function(){
              $("#clicker").click(function(){
                 $("#dialog").modal({onClose: function(){ 
                  alert("Closing");
                 }
                 });
                return false;
              });
          });


      </script>

      </head>
      <body>
           <div id="dialog"></div>
           <a href="#" id="clicker">Click</a>
      </body>

Vincent Ramdhanie 2009-11-17 22:31:43

Thanks for the help... not using onClick will definitely make the code neater, but unfortunately it is not running my code when i close the modal... i tried a simplealert('hello');and it doesnt work...

Roy 2009-11-17 22:36:08

Excuse my ignorance, but why would I want a div? I'm loading content which is external, inside the modal, it is getting whatever is on the clicker href, and loading it as an iframe. All I need to do is to know when the user closes the dialog box so i can refresh stuff on the page.

Roy 2009-11-17 22:39:58

The $(this) in your original code refers to the a tag which is a link. Its as if you are making the link into the modal dialog, which I doubt is what you want. You want to use another container such as a div for that. Otherwise you can use any other container you like.

Vincent Ramdhanie 2009-11-17 22:48:59

Thanks for your help, but the code above still doesnt work... Firstly it wont open even the modal, so I added the .open() to it, at which point it opens the modal, but doesnt open the URL inside the href, instead it is trying to open 'undefined', and finally, when I press the X it doesnt alert as it should.... did this code actually work for you? i'm trying on 2 browsers....

Roy 2009-11-17 22:53:32

Vincent, just to answer your comment, i *DO* want the link as my modal, as it causes the modal window to contain the contents of the link (iframe like)... this is precisely what I want... This part was already working in my original code, but what i want now is capturing the close so i can deal with it.

Roy 2009-11-17 22:58:05

Try adding onClose: function(){ alert("Closing"); } to {width:833, height:453} like this: {width:833, height:453, onClose:function(){ alert("Closing"); }}

Vincent Ramdhanie 2009-11-18 00:10:49

Answer 2

A:

If I understand you correctly you want to

Click on a link (e.g. with id clicker)
The page defined by the URL in the href of this <a href="..."> tag should be the modals content
When the user closes the modal you want to trigger some action and close the modal

HTML:

<a href="http://www.google.com" id="clicker">Click me!</a>

JavaScript

var c = function closer() {
    $.modal.close();
    alert("Done!"); 
}
$(document).ready(function() {
    $("#clicker").click(function() {
        $.modal(
            '<iframe src="'+this.href+'" width="833" height="453">asd</iframe>',
            {onClose:c}
        );
        return false;
    });
});

Check http://jsbin.com/ofimi for a working sample

jitter 2009-11-18 01:34:50

Great! Finally got it! thanks!

Roy 2009-11-18 17:06:58

ansaurus

tags:

views:

answers:

How to get a callback working with SimpleModal

related questions