Question

我正在尝试打开一个很好的弹出框来编辑域对象。

为此，我在页面上的隐形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的拼写错误。调试显示找到了正确的元素。

我错过了什么？

提前致谢

Answer 1

尝试更改

alert(popup[0].innerHTML);

到

alert(popup.html());

另外，我没有在你提供的代码上看到'#addDriverPopup'元素......是在DOM上的某个地方吗？

Answer 2

#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();
  }
});

Answer 3

正如@rcdmk提出的问题所指出的那样，它似乎是一个平台问题。

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

使用jquery修改克隆的html

3 个答案: