Question

I am using jquery-ui tabs and dialog functionality.

Each tab has a button on the page which opens a dialog. This works for one of the tabs. However if I go the second tab, the button does not work there. When I come back to the first tab, the dialog does show up but the problem is I notice as I make switches back and forth to the first tab, it keeps on inserting new div’s while the old div’s have display:none set on them.

I am doing this using JSP. This is how the reusable jsp looks like:

<script>
$(function() {
    var formData = null;
    $.ajax({
        url : "addFormGenerator.html",
        success : function(data) {
            formData = data;
            $("#addFormDialog").html(data);
            $("#addFormDialog").dialog({
                autoOpen : false,
                height : 300,
                width : 350,
                modal : true,
                buttons : {
                    "Add" : function() {
                        $(this).dialog("close");
                    },
                    Cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                }
            });
        }
    });
    $("#addButton").button().click(function() {
        $("#addFormDialog").html(formData);
        $("#addFormDialog").dialog("open");
    });
});
</script>

<button id="addButton">Click here to Add New</button>
<div id="addFormDialog" title="Add New"></div>

This jsp fragment is included in other jsp pages as well.
I was assuming as I switch between tabs the old button will be garbage collected.

Can you help me understand the problem and fix it?

Answer 1

You need not render the following part from your jsp’s response

<div class="addFormDialog" title="Add New"></div>

$("#addButton").button().click(function() {
        $("#addFormDialog").html(formData);
        $("#addFormDialog").dialog("open");
});

---

Just have the following, ideally with class names and not duplicate id’s

<button class="addButton">Click here to Add New</button>

---

UPDATE:

I still don’t think you need unique id’s –

<div id="tabs-container">

    <!-- tabs here -- >

    <-- let's say this is tab#1 -->
       <button class="addButton">Click here to Add New</button>
       <div class="addFormDialog" title="Add New"></div>
    <!-- tab1 -->
</div>


$('#tabs-container').on('click' , '.addButton', function(){
    var dialogContent = $(this).siblings('.addFormDialog');
    //now call .dialog({..});  or whatever you need
});

This way you’re binding just one click handler that listens to any click that bubbles up from a .addButton and then searches for its sibling .addFormDialog. (I hope I’m not sounding too confusing)