title: Jquery : Ajax : How can I show loading dialog before start and close after close?
body: <p>I want to show a loading dialog while an AJAX request is in process;
  and I want to use that piece of code anywhere in my project.</p>
  
  <pre><code>//--Add 
  $("div.add_post a").click(function(){
  
      var dlg = loadingDialog({modal : true, minHeight : 80, show : true});
  
      $.ajax(
          {
              url : "/add.php",
              beforeSend : function (){
                  dlg.dialog("show");
              },
              complete : function (){
                  dlg.dialog("hide");
              }
          }
      );
  
      return false;
  })
  
  
  //--
  
  //--Loading dialog
  
  function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
  {
      var dlg = $("&lt;div&gt;&lt;img src='/theme/style/imgs/busy.gif' alt='загрузка'/&gt; "+text+"&lt;div&gt;").dialog(dOpts);
      $(".ui-dialog-titlebar").hide();
  
      return dialog;
  }
  
  //--
  </code></pre>
  
  <p>NEW CODE</p>
  
  <pre><code>//--Add 
  $("div.add_post a").click(function(){
  
  var dlg = loadingDialog();
  
  
  
  $.ajax(
  {
  
      url : "/add.php",
      complete : function (){
          dlg.dialog("hide");
  
      },
      success : function (data) {
          $(data).find("#add_post").dialog();
      } 
  }
  );
  
  return false;
  })
  
  
  //--
  
  //--Loading dialog
  
  function loadingDialog(dOpts = {modal : true, minHeight : 80, show : true}, text = "пожалуйста подождите, идет загрузка...")
  {
      var dlg = $("&lt;div&gt;&lt;img src='/theme/style/imgs/busy.gif' alt='загрузка'/&gt; "+text+"&lt;div&gt;").dialog(dOpts);
      $(".ui-dialog-titlebar").hide();
  
      return dlg;
  }
  
  //--
  </code></pre>
  
  <p>returned -  Error: no such method 'hide' for dialog widget instance</p>
  
  <p>LAST NEW CODE</p>
  
  <pre><code>//--Add 
  $("div.add_post a").click(function(){
  
  var dlg;
  
  loadingDialog();
  
  
  $.ajax(
  {
  
      url : "/add.php",
      complete : function (){
          dlg.dialog("hide");
  
      },
      success : function (data) {
          var form = $(data).find("#add_post");
          form.dialog({title : "Добавить признание", modal : true});
  
      } 
  }
  );
  
  return false;
  })
  
  
  //--
  
  //--Loading dialog
  
  function loadingDialog(dOpts = {modal : true, minHeight : 80, show : true}, text = "пожалуйста подождите, идет загрузка...")
  {
      dlg = $("&lt;div&gt;&lt;img src='/theme/style/imgs/busy.gif' alt='загрузка'/&gt; "+text+"&lt;div&gt;").dialog(dOpts);
      $(".ui-dialog-titlebar").hide();
  
  }
  </code></pre>
  
  <p>RETURNED :</p>
  
  <p>TypeError: dlg is undefined</p>
  
  <p>dlg.dialog("hide");</p>