按钮单击时jQuery jQuery UI的功能不起作用

Question

I am trying to get the following logic to work. Any suggestions would be greatly appreciated.

here is what I'm trying to do..

if <input type="button" name="filter" id="filter" value="Save / Change" /> is clicked.

then check if requiredFields() returns true

if requiredFields() returns true

then display jQuery UI dialog

from jQuery dialog action

set form field, change form action, submit form, change form action back to original action

 jQuery(function($)
 {
 $("#filter").on("click", function() {

    if(requiredFields()) {
      $("#dialog").dialog("open");
      $( "#dialog" ).dialog({
        resizable: false,
        height:175,
        modal: true,
        position: {
          my: "center top",
          at: "center top",
          of: window
        },
        buttons: {
          "Yes": function() {
            $( this ).dialog( "close" );

            $('input[name="setAccess"]').val('1');

            $("#myForm").attr("action", "submit.epl");
            $( "form:myForm" ).submit();
            $("#myForm").attr("action", "form.epl");


          },
          "No": function() {
            $( this ).dialog( "close" );

            $('input[name="setAccess"]').val('');

            $("#myForm").attr("action", "submit.epl");
            $( "form:myForm" ).submit();
            $("#myForm").attr("action", "form.epl");

          }
        }
      });
    }
 });
});

Answer 1

Here is Fiddle demo

I would suggest to change your workflow a bit... I would suggest to initialize modal dialog immediately on document ready event with autoOpen: false and later just use $("#dialog").dialog("open"); method to open it.