jQuery Validation hiding or tearing down jquery Modal Dialog on submit

Question

Basically when clicking the modal created submit button, and calling jQuery('#FormName').submit(), it will run the validation and then call the method assigned in the submitHandler. After that it is either creating a new modal div or hiding the form, and I don't get why.

I have debugged it and noticed that after the method call in the submitHandler, the form .is(':hidden') = true and this is true for the modal div also. I'm positive I've done this before but can't seem to figure out what I've done wrong this time. The odd this is a modal div is showing up on the screen, but it's completely devoid of content. (Even after putting in random text outside of the form. It's like it's a whole new modal div)

Here are the set up methods:

function setUpdateTaskDiv() {
  jQuery("#UpdateTaskForm").validate({
    errorLabelContainer: "#ErrorDiv",
    wrapper: "div",
    rules: {
      TaskSubject: {
        required: true
      }
    },
    messages: {
      TaskSubject: {
        required: 'Subject is required.'
      }
    },
    onfocusout: false,
    onkeyup: false,
    submitHandler: function(label) {
      updateTaskSubject(null);
    }
  }
);

 jQuery('#UpdateDiv').dialog({
    autoOpen: false,
    bgiframe: true,
    height: 400,
    width: 500,
    modal: true,
    beforeclose: function() {
    },
    buttons: {
    Submit: function() {
      jQuery('#UpdateTaskForm').submit();
    },
    Cancel: function() {
      ...
    }
  }
});

where:

function updateTaskSubject(task) {
  //does nothing, it's just a shell right now
}

Doesn't really do anything right now. Here's the html:

<div id="UpdateDiv">
 <div id="ErrorDiv">
 </div>
 <form method="post" id="UpdateTaskForm" action="Calendar.html">
  <div>
    <div class="floatLeft">
      Date:
    </div>
    <div class="floatLeft">
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <div class="floatLeft">
      Start Time:
    </div>
    <div class="floatLeft">
      <select id="TaskStartDate" name="TaskStartDate">
      </select>
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <div class="floatLeft">
      End Time:
    </div>
    <div class="floatLeft">
      <select id="TaskEndDate" name="TaskEndDate">
      </select>
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <div class="floatLeft">
      Subject:
    </div>
    <div class="floatLeft">
      <textarea id="TaskSubject" name="TaskSubject" cols="30" rows="10"></textarea>
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <input type="hidden" id="TaskId" value="" />
  </div>
  <div class="clear"></div>
 </form>
</div>

Odd Discovery

Turns out that the examples that I got this to work all had the focus being put back on the modal itself. For example, using the validator to add messages to the error div. (Success or not) Without doing this, the modal dialog apparently thinks that it's done with what it needs to do and just hides everything. Not sure exactly why, but to stop this behavior some kind of focus has to be assigned to something within the div itself.

Answer 1

you have your form within the DIV, is that what you intended?(I do not see the </div> after the form...)

<div id="UpdateDiv"> 
 <div id="ErrorDiv"> 
 </div>

should perhaps be:

<div id="UpdateDiv"> 
 <div id="ErrorDiv"></div>
 </div>