如何將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>