Получение значений диалогового окна JQuery для устранения проблем

Question

У меня есть всплывающее диалоговое окно простого модального jQuery, которое собирает информацию о адресе, которую мне нужно передать в код после сохранения в базу данных после входа пользователя в нее. Я искал сотни примеров и в настоящее время находится в нижнем пункте, но, кажется, независимо от того, что я делаю, созданная строка JSON показывает «undefined» для всех полей, которые я пытаюсь передать. Мое заключение заключается в том, что метод, который я использую для построения строки JSON в jQuery, неверен, но после многих и различных способов сделать это никто из них не работает. Я попытался получить доступ к полям по 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(); 

Если все поля по-прежнему нарушается, то это что-то другое на страницу, которую вы не при условии, что это вызывает проблему.

Надеюсь, это поможет.

Dave

Answer 2

EDIT: Просто заметил, что вы используете ASP текстовые поля. С asp изменяется идентификатор элементов. Попробуйте использовать обычные текстовые поля <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() {});