Lee Lee - 6 months ago 53
Javascript Question

Form in jQuery UI Dialog Cached.

I'm a C/C++ programmer and new to javascript. The following code is giving me grief and I don't really know what I'm doing wrong. I've searched and can't find where others have had the same problem.

I've taken my project and cut out my problem code to try and understand and fix it. The short version is when I click my "Enter data" image on an HTML page, it creates a dialog box with a form and table of inputs (with default data) and I enter/change some data. When I click the dialog box save button, it goes through JSON.stringify($('#form').jsonify()) to collect the form data and brings up an alert box showing the data that I entered. This part works fine.

If I click the "Enter data" image again, the dialog box comes up and I enter/change new data. When I click the dialog box save button, it brings up an alert box showing the previous data that I saved (in this case showed in the alert box).

No matter how many times I try it, it always returns the data form the very first entry and never any of the new(er) data.

What am I doing wrong?

Some references:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/test.js"></script>

<link href="~/Content/jquery/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />


My HTML code

<div>
<img id="additem"
Title="Add Item"
onclick="addstuff(this)"
OnMouseOver="this.style.cursor='pointer';"
OnMouseOut="this.style.cursor='default';"
src="~/images/Sign_Add_Icon_32.png" />
</div>


My test.js file.

$.fn.jsonify = function (options) {
var settings = $.extend({
stringify: false
}, options);
var json = {};
$.each(this.serializeArray(), function () {
if (json[this.name]) {
if (!json[this.name].push)
json[this.name] = [json[this.name]];
json[this.name].push(this.value || '');
} else
json[this.name] = this.value || '';
});
if (settings.stringify)
return JSON.stringify(json);
else
return json;
}

function addstuff(obj) {
var strHtml = "";
var strHtml = "<div class=\"container\" id=\"addphonedlg\" title=\"Add Phone\" overflow:\"auto\">"
+ "<p>Please enter the following information.</p>"
+ "<form id=\"form\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"

+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 1" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data1" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 1 data" + "\" />" + "</td></tr>"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 2" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data2" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 2 data" + "\" />" + "</td></tr>"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 3" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data3" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 3 data" + "\" />" + "</td></tr>"

+ "</table></form>"
+ "</div>";

$(strHtml).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert("Add information " + JSON.stringify($('#form').jsonify()));
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
}
}).dialog('open');
}

Answer

This seems to be a known problem of forms in ui dialogs being cached. But you need to remove the form onClose of the dialog. I added close event function to your code. You should be fine now.

    $(strHtml).dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        close: function( event, ui ) {
            $('#form').remove(); // this where the problem is
        },
        buttons: {
            Save: function () {
                alert("Add information " + JSON.stringify($('#form1').jsonify()));
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
        }
    }).dialog('open');
}