Question

我有一个简单的模态jQuery对话框弹出窗口，收集我需要传递给后面的代码的地址信息，以便在用户输入后保存到数据库中。我已经搜索了数百个示例，并且在下面的点上是最新的，但似乎无论我做什么，创建的JSON字符串对于我试图传递的所有字段都显示“未定义”。我的结论是我用来在jQuery中构建JSON字符串的方法是错误的，但是在尝试了许多不同的方法之后，它们都没有用。我已经尝试通过ID访问字段，但是使用各种方式通过ID访问类，如下所示。这是代码的片段。谁能看到我出错的地方？

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            draggable: true,
            resizeable: false,
            autoOpen: false,
            height: 700,
            width: 550,
            modal: true,
            top: 0,
            left: 0,
            title: 'Edit Information',
            buttons: {
                'Save': function () {                        
                    $('#ibSaveInfo').click();
                },
                'Cancel': function () {
                    $(this).dialog('close');
                }
            }
        }).parent().css('z-index', '1005');
    });

    $(document).on("click", "#ibSaveInfo", function () {
        var inputArray = new Array;
        var idx = 0;

        inputArray[idx] = 'Address1:' + $("#dialog").find("#txtAddress1").val();

        idx++;
        inputArray[idx] = 'Address2:' + $("#txtAddress2").val();

        idx++;
        inputArray[idx] = 'city:' + $("txtcity").val();

        etc, etc

        var inputArrayList = "{ inputArray: " + JSON.stringify(inputArray) + "}";
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: "Address.aspx/SaveInfo",
            data: inputArrayList,
            success: function (data) {
                //debugger;

                if (data.d.indexOf("Error") != -1) {
                }
                else {
                    $("#ResultLabel").show();
                    $("#ResultLabel").text("Sum of all the contents is: " + data.d);
                }
            },
            error: function (e, ts, et) {
                //debugger;
                alert(ts);
            }
        }); //ajax func end
    });

    $(document).ready(function () {
        $("#ibEdit").click(function (e) {
            $('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
            $('#dialog').dialog('open');
        });
    });


<div id="dialog" style="padding-left: 10px; padding-bottom: 15px;">
    <asp:TextBox runat="server" ID="txtAddress1" ClientIDMode="Static" />
    <asp:TextBox runat="server" ID="txtAddress2" ClientIDMode="Static" />
    <asp:TextBox runat="server" ID="txtCity" ClientIDMode="Static" />
    etc, etc
</div>

Answer 1

我刚刚创建了一个确切代码的jsFiddle：

http://jsfiddle.net/PfgQy/

它似乎是在city表单字段除外，因为它缺少＃并且它的情况不正确（应该有大写字母C）。

$("#txtCity").val();

如果您的所有字段仍然被破坏，那么页面上您还没有提供导致问题的其他内容。

希望这有帮助。

戴夫

Answer 2

编辑：刚刚注意到你正在使用asp文本框。使用asp，元素的ID会发生变化。如果您无意从服务器访问这些值，请尝试使用常规<input>文本框。

而不是

idx++;
        inputArray[idx] = 'city:' + $("txtcity").val();

你应该使用array.push函数。

var inputArray = [];
inputArray.push('Address1:' + $("#txtAddress1").val());
inputArray.push('Address2:' + $("#txtAddress2").val();)
inputArray.push('city:' + $("txtcity").val());

此处也不是在代码中调用clickfunction，而只是给它引用另一个函数

$(function () {
        $('#dialog').dialog({
            draggable: true,
            resizeable: false,
            autoOpen: false,
            height: 700,
            width: 550,
            modal: true,
            top: 0,
            left: 0,
            title: 'Edit Information',
            buttons: {
                'Save': save(),
                'Cancel': function () {
                    $(this).dialog('close');
                }
            }
        }).parent().css('z-index', '1005');
    });

function save(){
  var inputArray = [];
  inputArray.push('Address1:' + $("#txtAddress1").val());
  inputArray.push('Address2:' + $("#txtAddress2").val());
  inputArray.push('city:' + $("#txtCity").val()); 
  var json = { "inputArray": inputArray};
        inputArrayList = JSON.stringify(json);
//ajax stuff
}

您还有2个文档就绪函数，因此您可以将它们组合在一起。这两种都是宣布文件准备就绪的方法。

$(document).ready(function(){});
$(function () {});

获取JQuery Dialog值以解决问题

2 个答案: