0

我正在尝试打开一个不错的弹出窗口来编辑域对象。

为此，我在页面上的不可见 div 中隐藏了一个弹出模板。当用户单击按钮时，我尝试使用 ajax 加载域对象，填充模板并显示它。

问题是只有模板内的第一个字段被填充。

模板：

 <div class="popup" id="addDriverPopup">
        <div class="close"></div>

        <hr class="both"/>

        <div class="container  radius">
            <form action="/driver/manageDriver" method="post" name="driverForm" id="driverForm" >
                <input type="hidden" name="id" id="id" value="" />
                <div class="title"><span>Uus autojuht </span><hr class="line"/></div>
                <p class="name">Nimi </p>
                <p class="input"><input type="text" name="firstName" id="firstName" value="" /></p>

                <p class="name">Perekonna nimi </p>
                <p class="input"><input type="text" name="lastName" id="lastName" value="" /></p>
                <p class="name">Isikukood </p>
                <p class="input"><input type="text" name="personalId" id="personalId" value="" /></p>
                <p class="name">Telefoni number </p>
                <p class="input"><input type="text" name="phoneNumber" id="phoneNumber" value="" /></p>
            </form>

        </p>
        </div>
    </div>

Javascript：

 $jq.ajax({
  url: 'show',
  dataType: 'json',
  data: {driverId: driverId},
  success: function( data ) {
        var popup = $jq('#addDriverPopup').clone();
        popup.find("#id").val(data.id);
        popup.find("#firstName").val(data.firstName);
        popup.find("#lastName").val(data.lastName);
        popup.find("#personalId").val(data.personalId);
        popup.find("#phoneNumber").val(data.phoneNumber);

        alert(popup[0].innerHTML); // only id field is field in the template.


  },
  error: function(xhr, error) {
      alert(error);
      unblockUI();
  }
});

警报（）的输出：

        <div class="close"></div>
        <hr class="both">

        <div class="container  radius">
            <form action="/driver/manageDriver" method="post" name="driverForm" id="driverForm">
                <input name="id" id="id" value="1271672" type="hidden">
                <div class="title"><span>Uus autojuht </span><hr class="line"></div>
                <p class="name">Nimi </p>
                <p class="input"><input name="firstName" id="firstName" value="" type="text"></p>
                <p class="name">Perekonna nimi </p>
                <p class="input"><input name="lastName" id="lastName" value="" type="text"></p>
                <p class="name">Isikukood </p>
                <p class="input"><input name="personalId" id="personalId" value="" type="text"></p>
                <p class="name">Telefoni number </p>
                <p class="input"><input name="phoneNumber" id="phoneNumber" value="" type="text"></p>
            </form>
        <p></p>
        </div>

从服务器返回的数据：

{"id":1271745,"firstName":"Burak","lastName":"Torum","personalId":"123456","phoneNumber":"123456"}

我仔细检查了元素 ID 是否有错别字。调试显示找到了正确的元素。

我错过了什么？

提前致谢

4

3 回答 3

0

尝试改变

alert(popup[0].innerHTML);

到

alert(popup.html());

此外，我在您提供的代码中没有看到“#addDriverPopup”元素……是在 DOM 上的某个地方吗？

于 2012-11-01T14:57:54.267 回答
0

是由什么#addDriverPopup制成的？

问题可能是ID冲突。因为您正在克隆，所以您最终会得到多个具有相同值的 id。

结果可能只是某种冲突。可能要考虑上课。

根据我下面的评论：

$jq.ajax({
  url: 'show',
  dataType: 'json',
  data: {driverId: driverId},
  success: function( data ) {

        $("#id").val(data.id);
        $("#firstName").val(data.firstName);
        $("#lastName").val(data.lastName);
        $("#personalId").val(data.personalId);
        $("#phoneNumber").val(data.phoneNumber);

        $jq('#addDriverPopup').dialog({
                 close: function(){
                       //Do stuff here to clean up, this syntax may be a bi
                      }
        });

  },
  error: function(xhr, error) {
      alert(error);
      unblockUI();
  }
});
于 2012-11-01T14:58:42.267 回答
0

正如@rcdmk 的问题评论中所指出的，这似乎是一个平台问题。

我不得不重构代码以将可编辑的表单而不是 json 返回给客户端。解决方案不太优雅，但跨平台:)

于 2012-11-01T17:00:50.167 回答