views:

846

answers:

2

I would like to execute a function when Simplemodal opens a window, and have populated the 'onShow' field with a callback function. In the example below I have simply filled it with an alert note, ie each time the simplemodal window is opened the alert should fire

However, it appears this is only being executed once. If the modal is opened, then closed, then reopened, upon reopen this method is not called on subsequent opens.

Please cut and paste the html below in a document to see this behavior (close the modal window, then click the open modal window button)

What am I missing that will allow onShow to execute each time the window is opened?

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>

 <link type="text/css" href="ttp://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <script src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js' type='text/javascript'></script>
    <script src='http://www.ericmmartin.com/simplemodal/js/basic.js' type='text/javascript'></script>


    <link type='text/css' href='ttp://www.ericmmartin.com/simplemodal/css/basic.css' rel='stylesheet' media='screen' />



<script type="text/javascript">


$().ready(function() {

    $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
        e.preventDefault();
        $('#basic-modal-content').modal();
    });

    $('#basic-modal-content').modal({onShow: 

    function(dialog) { 
    alert('hello');


}}); 



});

</script>
</head>

<body>

  <div id='basic-modal-content'>
  <input type="text" id="amount" style="border:0; color:#ffffff; font-weight:bold; width: 40px; background: #aaaaaa;" />
  <div id="slider-vertical" style="height:200px;"></div>
  </div>

  <div id='basic-modal'>
    <h2>Basic Modal Dialog</h2>
        <form action='download/' method='post'>
            <input type='button' name='basic' value='Show modal' class='basic demo'/>
        </form>
  </div>
</body>

A: 

I think you want to use the onShow option every time you call modal.

$('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
    e.preventDefault();
    $('#basic-modal-content').modal({ 
      onShow: function(dialog) { 
        alert('hello');
      }
    });
});
Andy Gaskell
In the code above I never see the alert being fired at all.
folder
Are you sure the click event is being fired?
Andy Gaskell
Yes, because if I change the code to the following, the first alert is fired: $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) { alert('click fired'); e.preventDefault(); $('#basic-modal-content').modal( {onShow: function(dialog) { alert('hello'); }} ); });
folder
I'm not sure what to tell you. I downloaded the "basic demo" and added my code `onShow` code in and I get the alert every time. http://www.ericmmartin.com/projects/simplemodal-demos/
Andy Gaskell
+1  A: 

You need to remove the basic.js that you are loading from my site. That is conflicting with your code.

Eric Martin
Thank you, will try this.
folder