title: jQuery Modal not opening second time on click event
body: <p>I am developing a generic function to display jQuery Modal on click event.
   It is showing modal popup for the first time but on second time its showing error like below:</p>
  
  <pre><code>Uncaught TypeError: jQuery(...).dialog is not a function
  </code></pre>
  
  <p>This is the code:</p>
  
  <pre><code>function initPopup(params) {
          jQuery('#pci-popup-dialog').remove();
          jQuery('&lt;div id="pci-popup-dialog" style="display:none;" &gt;&lt;/div&gt;').appendTo('body');        
          var src='',title='',dataType='html',loadType='S';
          var w = 700;
          var h = 700;
          if (params.src != '' || params.src != undefined) {
              src = params.src;
          }
          if (src == '') {
              return false; // return nothing to show
          }
          if (params.title != '' &amp;&amp; params.title != undefined) {
              title = params.title;
          }
          if (params.dataType != '' &amp;&amp; params.dataType != undefined) {
              dataType = params.dataType;
          }
  
          if (params.width != '' &amp;&amp; params.width != undefined) {
              w = params.width;
          } else {
              w = 700;
          }
          if (params.height != '' &amp;&amp; params.height != undefined) {
              h = params.height;
          } else {
              h = 700;
          }
          if (params.loadType != '' &amp;&amp; params.loadType != undefined) {
              loadType = params.loadType;
          }
          if (loadType == 'A') { //ajax content loading
              requestRunning = true;
              jQuery.ajax({
                  type: "POST",
                  dataType : dataType,
                  url: src,
                  success: function (data) { 
                      // init url popup box
                      jQuery("#pci-popup-dialog").dialog({
                          autoOpen: false,
                          modal: true,
                          title: "Pyramid Popup",
                          width: parseInt(w),
                          height: parseInt(h)
                      });
                      jQuery("#pci-popup-dialog").html(data);
                      jQuery("#pci-popup-dialog").dialog({
                          title: title,width: w,height: h
                      }).dialog("open");
                  },
                  complete: function() {
                      requestRunning = false;
                  }
              }); 
          } else { // static content loading
              jQuery("#pci-popup-dialog").html(src);
                  jQuery("#pci-popup-dialog").dialog({
                    title: title,width: w,height: h
                  }).dialog("open");
          }
      }
  </code></pre>
  
  <p>Below is the click function:</p>
  
  <pre><code>var requestRunning = false;
      jQuery(document).ready(function(){
      var nav = jQuery('#main-navigation');
          nav.find('li&gt;a').on('click',function(e){
              var menu = '',src='';
              var menu = jQuery.trim(jQuery(this).text());
              if (menu == 'Finance Calendar') {
                  e.preventDefault();
                  src = jQuery(this).attr('href');
                  var params = {};
                  params.src = src+'&amp;subwin=1&amp;embed=1'; // appending subwin and embed
                  params.title = 'Financial Calender';
                  params.loadType = 'A'; // Ajax call to make
                  if (requestRunning) { // don't do anything if an AJAX request is pending
                      return;
                  }
                  initPopup(params);
              }
          });
      });
  </code></pre>
  
  <p>Any help will be highly appreciated as i am wondering what is missing..</p>