Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Using a jQuery-UI Dialog in Meteor in Four Easy Steps

5.00/5 (2 votes)
21 Sep 2015CPOL 11.5K  
Easy-as-eating-gooseberry-pie handful of steps to incorporate a dialog into your Meteor app

jQuery-UI Eating Contest

Using a jQuery-UI modal dialog in your Meteor app is as easy as the proverbial pie (eating it, that is, not making it, which is decidedly more difficult); simply follow these steps:

  1. In the console, enter "meteor add linto:jquery-ui" to install the package.
  2. Add a "hide" CSS class:
    CSS
    .hide {
      visibility: hidden;
      display: none;
    }
  3. Add some HTML to the Template where the Dialog should display, hiding it by default, such as:
    HTML
    <template name="platypus"> <div id="duckbill" 
    name="duckbill"> <h2>Duckbilled Platypi of the World Unite!</h2> 
    <img alt="platypus image" height="275" id="imgPlatypusParty" 
    name="imgPlatypusParty" src="images/dplat.png" width="350" />
    </div> <div class="hide" id="dialog" title="Basic dialog"> 
    <p>Put whatever you want in here.</p> </div> </template>
  4. In response to some event, unhide the div and call dialog() on it, such as:
    JavaScript
    Template.platypus.events({
      'click #imgPostTravelBottom': function() {
        $( "#dialog" ).removeClass('hide');
        $( "#dialog" ).dialog(); }
    });

And that's all there is to it! It's almost as easy as falling off a log, and is as easy as pie, which is "funner."

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)