如何将 json 元素显示为模态引导程序中的某个 html 元素？

Question

我使用 codeigniter 来开发我的应用程序，现在我想在 jquery 中使用 ajax 来操作一些数据。如何将 json 元素显示到模态引导程序中的某个 html 元素中？ 所以这是 html 和 jquery 代码：

<td  class="center">
    <a class="btn btn-info" id="btn-edit" name="edit" req_id="<?php echo $data['code_office'] . '/' . $data['code_departement'] . '/' . date('m', strtotime($data['month'])) . '/' . $data['id_request']; ?>">
        <i class="halflings-icon white edit"></i>
     </a>

 $(".btn-info").click(function(e) {
                e.preventDefault();
                var $this = $(this);
                var idStr = $this.attr("req_id");
                var idText = idStr.split("/").pop(); //get id ex: 002
                console.log(idText); // for checking get id

                /*I use ajax to get data from mytable*/
                $.ajax({
                    url: '<?php echo base_url() . 'control_closing/getDetailOfRequest/'?>',
                    type: 'POST',
                    data: { id : idText},
                    success: function(obj){                            
                        $('#myModal').modal('show');
                    }
                });
            });

控制器：

    public function getDetailOfRequest(){
      $id = $_POST['id'];
      $row = $this->model_request->getDetailOfRequest($id);
      echo json_encode($row);
}

型号：

public function getDetailOfRequest($id){
    $this->db->select('kindOfRequest, Description');
    $query = $this->db->get_where('tbl_requestfix', array('id_request'=> $id));

    return $query->result_array();
}

我用萤火虫来检查它。在萤火虫中，我得到了这个

[{"kindOfRequest":"Login, Printer, Monitor","Description":"keep calm and study hard"}]

我的问题是：上面的 kindofrequest 将被生成到 chekboxes 中，即元素将被标记为“已选择”，而另一个元素将不被选中。 “描述”将在模式引导程序中的文本框中。我怎样才能做到？ 我认为在ajax成功时，我可以做到。有什么建议吗？

这是模态引导程序：

<div class="modal-body">
<div class="controls" id="chekboxes">               
   <table>
      <tbody>
         <tr>
            <td><label class="control-label">Kind Of Complaint :</label></td>
            <td><div class="control-group">

                 <div class="controls" id="chekboxes">
                  <label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" /> Login </label>
                  <label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer"/> Printer </label>
                  <label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor"/> Monitor</label>
                  <label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer"/> Computer</label>
                  <label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network"/> Network</label>
                   <label class="checkbox inline"><input type="checkbox" name="request[]" id="Other" value="Other" /> Other</label> 
                   </div>
                 </div>
            </td>
          </tr>

          <tr>
            <td valign="top"><label class="control-label">Description :</label></td>
            <td><div class="control-group ">
                 <div class="controls">
                   <textarea class="cleditor" name="keluhan" id="modalkeluhan " rows="3"></textarea>
                 </div>
                  </div>
            </td>
           </tr>
           </tbody>
          </table>

        </div>                    
      </div>

Answer 1

在你的 ajax 中：

success: function(obj)
{   
    obj = jQuery.parseJSON(obj);
    var kor = obj.kindOfRequest.split(",")

    for (var k in kor ) 
    {
        $('input[type=checkbox][value='+kor[k]+']').prop('checked', true);    
    }

    $('#modalkeluhan').val(obj.Description); 

    $('#myModal').modal('show');
}

为了记录。我在我的一个项目上做几乎同样的事情。这是它的工作原理：

型号：

 return $query->row(); //return an object

控制器：

$a = $this->my_model->myfunction();
echo json_encode($a);

阿贾克斯：

var post_array = { "id_product" : theval };
$.post(siteUrl + "/mycontrolle/myfunction", post_array,
    function(data)
    {
        data = jQuery.parseJSON(data);

        line = $("div#productline");
        line.find(".fulldesingation").text(data.full_designation);
    });

Answer 2

success: function(obj) {  
   var kor = obj.kindOfRequest.split(",");

   for (var i = 0; i < kor.length; i++) {
      // kor[i] fetches the list of kindOfRequest. e.g. kor[1] = Login
      // You can make the value and class a same name and if the value from json matched the class name of checkbox then check it using `prop` 
   }

   $('#modalkeluhan').val(obj.Description); 
   $('#myModal').modal('show');
}

 

<div class="controls" id="chekboxes">
    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" class="Login" /> Login </label>
    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer" class="Printer"/> Printer </label>
    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor" class="Monitor"/> Monitor</label>
    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer" class="Computer"/> Computer</label>
    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network" class="Network"/> Network</label>
    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Other" value="Other" class="Other" /> Other</label> 
</div>