title: ajax custom dialog box upon success
body: <p>I've coded  a custom dialog/modal box as follows:</p>
  
  <pre><code>&lt;div id="somedialog" class="dialog"&gt;
      &lt;div class="dialog__overlay"&gt;&lt;/div&gt;
      &lt;div class="dialog__content"&gt;
          &lt;h2&gt;&lt;strong&gt;Howdy&lt;/strong&gt;, I'm a dialog box&lt;/h2&gt;&lt;
          div&gt;&lt;button class="action" data-dialog-close&gt;Close&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It is currently triggered by a button with the javascript code as follows:</p>
  
  <pre><code>&lt;script src="js/classie.js"&gt;&lt;/script&gt;
  &lt;script src="js/dialogFx.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      (function() {
  
          var dlgtrigger = document.querySelector( '[data-dialog]' ),
              somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
              dlg = new DialogFx( somedialog );
  
          dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
  
      })();
  &lt;/script&gt;
  </code></pre>
  
  <p>…where our trigger button has the data-attribute <code>data-dialog="somedialog"</code>.</p>
  
  <p>However, now I want to call this custom dialog only when my AJAX returns successful and pass in the message from AJAX into the dialog's <code>&lt;h2&gt;</code> text. How do I actually do that?</p>
  
  <p>ajax call: </p>
  
  <pre><code>     &lt;script&gt;   
          $(document).on("click", "#submit", function(){
      var $self = $(this);
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      var request = $.ajax({
          url: "login.php",
          type: "POST",
          data: { username: username, password: password},
          beforeSend: function(){
              $self.html("Loading please wait...");
          }
      });
  
      //WHEN SUCCESS
      request.success(function( data ) {
         if( data == 'user' )
          {
               window.location.href =  "filter.php";
          } else if(data=='company'){
               window.location.href = "filter.php";
  
          }else {
              alert("Wrong Username or Password!");
               window.location.href = "indexwithlogin.php";
  
  &lt;insert the dialog box here&gt;
  
          }
      });
  });
  &lt;/script&gt;
  </code></pre>