Running Javascript inside a simplemodal window

Question

I'm trying to add scripts to a modal (simplemodal) jquery plugin but they won't run, is this functionality simply not available when running in the modal or am I missing something.

Here's how I'm calling simplemodal:

$('#modal').modal({
  onClose: function (dialog) {
    $App.setLocation('#/');
    $.modal.close();
  }
});

and here's the html of the modal, which includes the addthis script (i've taken out the real username for posting here):

<div class="article clearfix">
  <div class="article-post">
    <h2 class="title">{{header}}</h2>
    <p class="date">Posted in {{feed_source}}, {{date}}</p>
    <ul class="tags clearfix">
      <li><a href="#">tag 1</a></li>
      <li><a href="#">tag 2</a></li>
    </ul>
    <div class="body">
      {{{body}}}
    </div>
  </div>
  <div id="single-article-comments" class="article-comments">
    <h3 class="comments-header">Comments:</h3>
  </div>
</div>
<div class="sidebar clearfix">
  <div class="sidebar-inner">
    <p class="sidebar-logo">Logo Text</p>
    <ul class="sidebar-menu">
      <li><a href="#single-article-comments" class="sidebar-comment tooltip" title="Comment on this article">Comment</a></li>
      <li><a href="#/rate/{{id}}" title="Rate" class="sidebar-rate tooltip">Rate</a></li>
      <li><a href="#/slate/{{id}}" title="Slate" class="sidebar-slate tooltip">Slate</a></li>
      <li><a href="#/report/{{id}}" title="Report Abuse / Flag as Inappropriate" class="sidebar-report tooltip">Report</a></li>
      <li><a href="#" title="Email">Email</a></li>
      <li><a href="#" title="Tweet">Tweet</a></li>
      <li><a href="#" title="Facebook Like">Like</a></li>
    </ul>
    <ul class="sidebar-action-addthis addthis_toolbox addthis_default_style" addthis:url="http://www.allaboutmidleton.ie/#/article/{article_id}" addthis:title="Tweet by {user}" addthis:description="{tweet}">
      <li><a href="http://www.addthis.com/bookmark.php" class="tooltip addthis_button_email" title="Email to a Friend"><img src="/assets/img/ico-email.png" width="26" height="23" border="0" alt="Email" /></a></li>
      <li><a class="addthis_button_tweet"></a></li>
      <li><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></li>
    </ul>
    <!-- AddThis Button BEGIN -->
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=username"></script>
    <!-- AddThis Button END -->
    <div class="sidebar-ads">
      <ul class="advertising-ad-list">
        <li><a href="" class="ad">Advertisement</a></li>
        <li><a href="" class="ad">Advertisement</a></li>
        <li><a href="" class="ad">Advertisement</a></li>
      </ul>
    </div>
  </div>
</div>

All of this code works fine outside of the modal. Does anyone know a way to run the script inside the modal.

Thanks

Answer 1

What is $App.setLocation('#/'); doing?

I don't see any reason why it wouldn't work, but intended the onClose callback to be used mainly for closing animations.

My suggestion would be to use the onShow callback and bind your own function to the "close" event. For example:

$('#modal').modal({
  onShow: function (dialog) {
    $('.close', dialog.data[0]).click(function () {
      $App.setLocation('#/');
      $.modal.close();
      return false;
    });
  }
});

Answer 2

SimpleModal is more powerful than, I would like to believe, even Eric Martin knows.

1. Create your modal hidden div within your main document;
2. Create WHATEVER FULL HTML/ASP/JAVASCRIPT page you want to process in that modal;
3. Load the hidden div with the HTML/ASP/JAVASCRIPT page using jquery.load();
4. Display the modal