jQuery UI Dialog is not opening second time, but background is inaccessible

Question

Dialogs are generated with JSTL foreach tag.

The first time I try to open dialog (any of them), it opens normally, but the second time I try to open it, the background turns grey and is inaccessible due to dialog being modal, but dialog window is not shown.

There are a lot of questions with this problem and I read through a lot of them, but as far as I understand, none of them describes this situation.

This is my HTML:

<button id="buttonAddTask${category.id}" class="buttonAddTask">Add Task</button>

...

<div id="dialog${category.id}" title="Create new task" class="task-dialog">
<form:form id="taskForm${category.id}"
    action="${contextPath}/someAction"
     method="POST" modelAttribute="someAttribute">
     <fieldset>
        <form:input type="text" path="taskName" id="taskName" 
             class="text ui-widget-content ui-corner-all" />
        <form:textarea rows="4" path="taskDescription"
                 id="taskDescription" name="taskDescription"
                 class="text ui-widget-content ui-corner-all">
        </form:textarea>
    </fieldset>
</form:form>
</div>

This is my js code:

$(function() {

    var form;
    var taskDialog = $(".task-dialog");
    var buttonAddTask = $(".buttonAddTask");

taskDialog.dialog({
    autoOpen : false,
    height : 500,
    width : 415,
    modal : true,
    buttons : {
        "Create task" : addTask,
        Cancel : function() {
            taskDialog.dialog("close");
        }
    },
    close : function() {
        var form = $(this).find("form")[0].reset();
        allFields.removeClass("ui-state-error");
        }
    });

    function addTask() {
        var thisId = $(this).attr("id").substring(6, 106);
        $("#taskForm" + thisId).submit();
        return true;
    }

buttonAddTask.on("click", function() {
        var thisId = $(this).attr("id");
        var idNumber = thisId.substring(13, 14);
        $("#dialog" + idNumber).dialog("open");
    });
});

I open dialog with .dialog("open"), and close it after. Dialog is accessed via id selector, so it should be accassible after it is moved to the end of body tag. What am I doing wrong or what do I have to do to show dialog second time?

I'm using jQuery 2.1.1 and jQuery-ui 1.11.2.

Answer 1

I got it after a while.

This was copy/paste from some example, and it was modified to suit my needs. The trick was to remove undeclared variable "allFields" in close function.

Line to remove:

allFields.removeClass("ui-state-error");

If you have similar problem, check your close function for undeclared varibles, and remove them.