将json放入模态答案

【问题标题】：Place json into modal将json放入模态
【发布时间】：2015-04-08 01:31:27
【问题描述】：

我有一个从 pho 函数返回的 JSON 数据，如下所示：

[{"id":"15","activity_type":"call","activity_title":"Call to check "}]

这里是发起请求的脚本（actvitiy.js）（已编辑）

$(document).on("click", ".view_contact_activity", function () {

        var this_activity_id = $(this).closest('.feeds').find('#this_activity_id').val();
        $('#view-contact-activity').modal('show');
    $.ajax({

        url: '../includes/functions/contact-functions.php',
        data: {view_activity_id:this_activity_id},
        dataType:'json',
        Success: function(response){
        $('#activity_id').val(response[0].id);
        $('#activity_type').val(response[0].activity_type);

        }
            });
});

我需要显示值的模式：

<div class="modal fade" id="view-contact-activity" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
             <div class="modal-body">
              <div class="portlet-body form">
              <form class="form-horizontal" role="form" id="view-contact-activity-form" method="post">

                  <div class="form-group">
                   <label class="col-sm-3 control-label col-lg-3"> Activity Title</label>
                      <input type="text" name="activity_id" id="activity_id" value="">
                   <label class="col-sm-3 control-label col-lg-3"> Activity Type</label>
                        <input type="text" name="activity_type" id="activity_type" value="">                                                
                  <div class="modal-footer">
                      <div class="col-lg-offset-2 col-lg-10">
                          <button type="submit" name="create-new-account" class="btn btn-danger" id="edit">Edit Activity</button>
                      </div>
                  </div>
              </form>
          </div>
          </div>
        </div>
    </div>
</div>

模态显示，但没有数据传入模态。任何想法我可能在这里做错了。

编辑：添加返回 JSON 的 PHP 函数

function view_activity(){

        global $connection;

        $activity_id = $_POST['view_activity_id'];
        $get = "SELECT * FROM contact_activities WHERE activity_id = '$activity_id' "
                                    or die("Error: ".mysqli_error($connection));
        $query = mysqli_query($connection, $get);
        $activitiy_field = array();

        while ($activity_array = mysqli_fetch_array($query)){

            $activity = array(
                'id' => $activity_array['activity_id'],
                'activity_type' => $activity_array['activity_type'],
                'activity_title'=>$activity_array['activity_title'],
                'activity_details'=>$activity_array['activity_details'],
                'activity_status'=>$activity_array['activity_status'],
                'activity_details'=>$activity_array['activity_details'],
                'activity_details'=>$activity_array['activity_details'],

                );

        $activitiy_field[] = $activity;

        }
                echo json_encode($activitiy_field);
    }

    if (isset($_POST['view_activity_id'])) {
        view_activity();
    }

谢谢。

【问题讨论】：

我认为它会在您调用 .modal('show') 时抓取 HTML 并将其复制到单独的 div 中，因此您的 HTML 更改无效，因为它们发生在模式已经打开之后。尝试将 $('#view-contact-activity').modal('show'); 移动到 ajax 成功回调的底部。
@MattBrowne 我试过了，没有任何变化。我在关闭ajax请求后放置。

标签： javascript jquery json twitter-bootstrap

【解决方案1】：

使用 .val() 而不是 .html()。

$('#activity_id').val(response.id);
$('#activity_type').val(response.activity_type);

已修改：您的 javascript 应如下所示：

$(document).on("click", ".view_contact_activity", function () {

    var this_activity_id = $(this).closest('.feeds').find('#this_activity_id').val();

    $('#view-contact-activity').modal('show');

    $.ajax({
        url: '../includes/functions/contact-functions.php',
        data: {view_activity_id:this_activity_id},
        dataType:'json',
        Success: function(response){
            $('#activity_id').val(response[0].id);
            $('#activity_type').val(response[0].activity_type); 
        }
    });
});

【讨论】：

试过了。什么都没有。当我输入（response.id 或 response.activity_type）时，（id）被突出显示，但 activity_type 不是。不确定这是否会有所不同。
当你把一个console.log(response);在你的 .Success 之后？
在萤火虫（html）中我得到了正确的数组。 [{"id":"12","activity_type":"meeting","activity_title":"meeting","activity_details":"ds","activity_status":""}
这是一个显示它工作的小提琴（稍作修改......）jsfiddle.net/scottieslg/d67zujd8/2
关于 val() 而不是 html() 的好消息，但据我所知，他的 HTML 并没有畸形。 XHTML 不是必需的，甚至可以说是有害的，除非您确定 MIME 类型正确。见webdevout.net/articles/beware-of-xhtml

【解决方案2】：

在多个站点上挖掘之后。我发现了一个类似的问题，可能会有所帮助。

$(document).on("click", ".view_contact_activity", function () {

        var this_activity_id = $(this).closest('.feeds').find('.id #this_activity_id').val();
    $('#view-contact-activity').modal('show')

    $('#view-contact-activity').on('show.bs.modal', function() { 
        $modal = $(this);
        $.ajax({
           url: '../includes/functions/contact-functions.php',
           data: {view_activity_id:this_activity_id},
           dataType:'json',
           success: function(response){
               // Find the elements in the modal
               $modal.find('#activity_id').val(response[0].id);
               $modal.find('#activity_type').val(response[0].activity_type);
           }
        });
    });
});

【讨论】：