Open Jquery-ui dialog in another <script> tag

Question

is it possible to initialize and open the jquery-ui dialog in a different "script" tag , like this :

Specification : Working with EJS (Nodejs express templates)

<script>
    $(document).ready(function() {

        $("#loginfailed").dialog({
            width: 500, autoOpen: false, resizable: false, draggable: false,
            modal: false 
        });


    });

</script>

//some html

 <% if (lengthQ1 == 0 && lengthQ2 == 0) { %>
     <script>
          $( "#loginfailed" ).text("User not exist");
         $( "#loginfailed" ).dialog("open");  
     </script>
    <% } else if (lengthQ1  == null  && lengthQ2 == null) { %>
     <script>
     </script>
    <% } else if (lengthQ1  > 0  || lengthQ2 > 0 && PasswordMatch != true) { %>
     <script>
          $( "#loginfailed" ).text("Wrong password");
         $( "#loginfailed" ).dialog("open");  
     </script>
    <% } %>

Actually, the dialog isn't showing and i can't undestand why. when i move

$( "#loginfailed" ).dialog("open"); 

in the document.ready function it show me the dialog when the page load.

Assuming that the if statements and everything in it works (when replacing dialog with a simple

alert("wrong password"`)

its' working

Answer 1

You cannot pass a variable between blocks, yet the dialog can be accessed. You can do something like (assuming the initial script block is in the head):

<script>
$(function() {
  $("#loginFailed").dialog({
    width: 500,
    autoOpen: false,
    resizable: false,
    draggable: false,
    modal: false 
  });
});
</script>
//some html
<% if (lengthQ1 == 0 && lengthQ2 == 0) { %>
  <script>
  $("#loginFailed").text("User not exist.").dialog("instance").open();  
  </script>
<% } else if (lengthQ1  == null  && lengthQ2 == null) { %>
  <script>
  // Do Nothing?
  </script>
<% } else if (lengthQ1  > 0  || lengthQ2 > 0 && PasswordMatch != true) { %>
  <script>
  $("#loginFailed").text("Wrong password").dialog("instance").open();  
  </script>
<% } %>

Working Example: https://jsfiddle.net/Twisty/drL16vyc/

More Details: https://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/

Under the hoods, every instance of every widget is stored on the element using jQuery.data(). To retrieve the instance object, call jQuery.data() using the widget's full name as the key.

In jQuery UI 1.11, the new instance() method will make this process even easier.

$( ".selector" ).dialog( "instance" ).close();

Now, reading between the lines, I am assuming you have some sort of login form and are posting data back to itself for authentication. Why not do this via AJAX?

<script>
var $lfDiag;
$(function() {
  $lfDiag = $("#loginFailed").dialog({
    width: 500,
    autoOpen: false,
    resizable: false,
    draggable: false,
    modal: false 
  });
  $("form").submit(function(e){
    e.preventDefault();
    var url = $(this).attr("action");
    var myFormData = {
      api: "json"
    };
    var loginFailed = true;
    $(this).find("input").each(function(ind, el){
      myFormData[$(el).attr("id")] = $(el).val();
    });
    $.post(url, myFormData, function(results){
      if(results.error.length){
        $lfDiag.text(results.error).dialog("open");
      } else {
        loginFailed = false;
      }
    });
    return !loginFailed;
  });
});
</script>

Now this setup will take a bit of adjustment. You will need a conditional form handler that can authenticate the submitted details against your database. The condition is that if api is set to json it it will send back json data. This could be like:

{
  success: true
}

Or:

{
  success: false,
  error: "User does not exist."
}

If the posted data does not include the api data, then the script should process the login like normal. I'm assuming this is logging the user in and setting some session variables.