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

score 0 · Answer 1 · answered Feb 18 '11 at 19:24

0

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;
    });
  }
});

answered Feb 18 '11 at 19:24

Eric Martin

2,841
2
23
23

Hi Eric, thanks for replying, $App.setLocation('#/'); is a SammyJS function which simply routes the Application back to the homepage, when somebody clicks on a link the modal pops up but the location hash also changes to #/article/1234 (where 1234 is the article id). Closing the dialog works fine for me, my problem is that I can't run any scripts inside the modal, I'm trying to embed an AddThis script but it doesn't load. – Herbage Onion Feb 20 '11 at 13:01
... I just emailed you a link :) – Herbage Onion Feb 20 '11 at 13:07
I think the issue is that you need to initialize any scripts after the modal is created (in the onShow callback). – Eric Martin Feb 23 '11 at 21:33

score 0 · Answer 2 · edited Oct 30 '11 at 17:27

0

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

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

edited Oct 30 '11 at 17:27

p.campbell

98,673
67
256
322

answered Feb 22 '11 at 00:52

zequinha-bsb

719
4
10

Unfortunately, using jQuery.load() can cause issues with the way container dimension and position values are determined. As of now, I prefer to use jQuery.get(url, data, callback) and then use the data in the callback for the modal() call. – Eric Martin Feb 22 '11 at 17:33
So far, in three "applications", I haven't had the issue you mention or haven't been able to identify if that problem occurs. I haven't looked at jquery.get but I ask: does jquery.get load javascript/asp without any problems? (this is not a competition). I too use the $.get or $.post for displaying modals data but, when I want further processing (from within the answer page), I use jquery.load. To date, no problems. – zequinha-bsb Feb 27 '11 at 13:00

Running Javascript inside a simplemodal window

2 Answers2

Linked