1
Answer

Show the details of a particular column in bootstrap modal

sunny kumar

sunny kumar
6y
463
1
I am having a jquery data table in which there is a description field, i want to limit the words to 30 and add a show more link. when the user clicks on show more the comment of that particular id will open in the bootstrap modal. Till now i am able to do this much, but the comment is not coming in the bootstrap modal.
  1. <script type="text/javascript">    
  2.         $(document).ready(function () {    
  3.     
  4.             $(document).on("click", ".opencomment", function () {    
  5.                 var mycomment = $(this).data('FeedbackID');    
  6.                 $(".modal-body #commentdesc").val(mycomment);    
  7.             });    
  8.                 
  9.             $('#FeedbackDetails').DataTable({    
  10.                 "processing": true,    
  11.     
  12.                 "ajax": {    
  13.                     "url": "/ViewFeedback/LoadData",    
  14.                     "type": "GET",    
  15.                     "datatype": "json"    
  16.                 },    
  17.                 "lengthMenu": [    
  18.                     [5, 10, 25, 50, 100, -1],    
  19.                     [5, 10, 25, 50, 100, "All"]    
  20.                 ],    
  21.                 "autoWidth": true,    
  22.                 "responsive": true,    
  23.                 "lengthChange": true,    
  24.                 "ordering": true,    
  25.                  "fnRowCallback" : function(nRow, aData, iDisplayIndex){          
  26.                           var oSettings = this.fnSettings();    
  27.                            $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);    
  28.                            return nRow;    
  29.                 },    
  30.                 "columns": [    
  31.                     { "data": null, "autoWidth": true },    
  32.                     { "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },    
  33.                     { "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },    
  34.                     { "data": "FeedBackComment", "name": "Comment", "autoWidth": true },    
  35.                     { "data": "Designation", "name": "Designation", "autoWidth": true },    
  36.                     { "data": "Organization", "name": "Organization", "autoWidth": true },    
  37.                     { "data": "ContactNo", "name": "Contact No", "autoWidth": true },    
  38.                     { "data": "City", "name": "City", "autoWidth": true },    
  39.                     {    
  40.                         "data": "FeedBackDate", "name": "Feedback Date", "autoWidth": true,    
  41.                         'render': function (jsonDate) {    
  42.                             var date = new Date(parseInt(jsonDate.substr(6)));    
  43.                             var month = date.getMonth();    
  44.                             return date.getDate() + "/" + month + "/" + date.getFullYear();    
  45.                         }    
  46.                     },    
  47.     
  48.     
  49.                 ],    
  50.                     
  51.     
  52.                 columnDefs: [{    
  53.                         
  54.                     targets: 3,    
  55.                     data:"FeedbackID",    
  56.                     render: function (data, type, row, meta) {    
  57.                         if (type === 'display' && data.length > 40) {    
  58.                            return '<span title="' + data + '">' + data.substr(0, 38) + '...<a href="" data-id="'+data+'" data-toggle="modal" class="opencomment" data-target="#myModal">Show More</a>';    
  59.                                 
  60.                         }    
  61.                         else {    
  62.                             return data;    
  63.                         }    
  64.                             
  65.                                     
  66.                     }    
  67.     
  68.                 }],    
  69.     
  70.                 "language": {    
  71.                     "emptyTable": "No Events Found Related To This User"    
  72.                 }    
  73.             });    
  74.         });    
  75.     </script>    
  76. <div class="container" style="margin-top:10px">    
  77.         
  78.             <table id="FeedbackDetails" class="ui celled table">    
  79.                 <thead>    
  80.                     <tr>    
  81.                         <th>S.No</th>    
  82.                         <th>User Name</th>    
  83.                         <th>Email ID</th>    
  84.                         <th>Comment</th>    
  85.                         <th>Designation</th>    
  86.                         <th>Organization</th>    
  87.                         <th>Contact No</th>    
  88.                         <th>City</th>    
  89.                         <th>Feedback Date</th>    
  90.                     </tr>    
  91.                 </thead>    
  92.             </table>    
  93.         </div>    
  94.        <div id="myModal" class="modal fade" role="dialog">    
  95.            <div class="modal-dialog">    
  96.                <div class="modal-content">    
  97.                    <div class="modal-header">    
  98.                        <h4 class="modal-title">Feedback Comment</h4>    
  99.                    </div>    
  100.                    <div class="modal-body">    
  101.                        <p id=""></p>    
  102.                    </div>    
  103.                    <div class="modal-footer">    
  104.                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>    
  105.                    </div>    
  106.                </div>    
  107.            </div>    
  108.        </div>    
  1. public ActionResult LoadData()    
  2. {                          
  3.     using (DHIFeedbackEntities2 Ms = new DHIFeedbackEntities2())    
  4.      {               
  5.          var feedbacklist = Ms.FeedBacks.ToList<FeedBack>();    
  6.          return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);    
  7.      }   
  8. }
Answers (1)
Next Recommended Forum