jQuery dialog ui on button click with function not working

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.