Jquery + Simplemodal onshow method only executes once

jquerysimplemodal

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">
<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>

Best Answer

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

Related Topic