Javascript：通过显示的模式上的 ajax 更新输入值答案

【问题标题】：Javascript : update input value via ajax on modal shownJavascript：通过显示的模式上的 ajax 更新输入值
【发布时间】：2016-07-18 22:52:22
【问题描述】：

我有一个模式，我在元素点击时显示它。所以我想通过Ajax更新这个模式中的输入值，我可以成功检索数据但它不会正常更新它的值（获取其他文章记录的值而不是当前articleID），这里是我的代码：

$('#editArticle').on('show.bs.modal', function (e) {
    ...
    $articleID =  $(e.relatedTarget).attr('data-id');
    $.ajax({
            type: "GET",                
            url : 'article/'+ $articleID +'/getData',                
            dataType : "json",
            success : function(data){                    
                document.getElementById("serial").value = data['serial'];
            }
    });  
});

如果我将警报设置为显示数据，它会返回正确的值：

success : function(data){ 
                alert(data['serial']); // here it returns the right value for each row, and it appears after the modal show !!!!                   
                document.getElementById("serial").value = data['serial'];
            }

记录列在数据表中：怎么了？！

【问题讨论】：

为什么不使用点击事件监听器？
您能发布data 中的内容吗？还有什么目的是使用jquery然后为document.getElementById恢复到JS？为什么不使用 jQuery 选择器？：$("#serial").val(data['serial']);
@FernandoUrban 我点击链接如下：
@BKF。其他可能性，检查 id serial 是否是唯一的，在整个页面中，或者可能存在拼写错误或将其更改为不同的内容并检查。
你能用 jsfiddle 或 codebin 准备一个复制问题的演示，让我们看看吗？

标签： javascript jquery ajax twitter-bootstrap laravel-5.1

【解决方案1】：

IMO，先尝试克隆模态，然后在克隆的模态中找到 id 或类。在此示例中，我使用引导对话框作为插件。请看一下：

var modal = $('.modal').clone();

BootstrapDialog.show({
    title: 'blabla',
    message: modal.show(),
    onshow: function() {
      $(modal).find('#result').text('updated text');
    },
    buttons: [{
      label: 'Cancel',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
});

<div class="modal" style="display:none">
  <div id="result"></div>
</div>

希望此代码能解决您的问题

【讨论】：