Show the details of a particular column in bootstrap modal

Question

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 the 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.

<script type="text/javascript">
    $(document).ready(function () {

        $(document).on("click", ".opencomment", function () {
            var mycomment = $(this).data('FeedbackID');
            $(".modal-body #commentdesc").val(mycomment);
        });

        $('#FeedbackDetails').DataTable({
            "processing": true,

            "ajax": {
                "url": "/ViewFeedback/LoadData",
                "type": "GET",
                "datatype": "json"
            },
            "lengthMenu": [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "All"]
            ],
            "autoWidth": true,
            "responsive": true,
            "lengthChange": true,
            "ordering": true,
             "fnRowCallback" : function(nRow, aData, iDisplayIndex){      
                      var oSettings = this.fnSettings();
                       $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                       return nRow;
            },
            "columns": [
                { "data": null, "autoWidth": true },
                { "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },
                { "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },
                { "data": "FeedBackComment", "name": "Comment", "autoWidth": true },
                { "data": "Designation", "name": "Designation", "autoWidth": true },
                { "data": "Organization", "name": "Organization", "autoWidth": true },
                { "data": "ContactNo", "name": "Contact No", "autoWidth": true },
                { "data": "City", "name": "City", "autoWidth": true },
                {
                    "data": "FeedBackDate", "name": "Feedback Date", "autoWidth": true,
                    'render': function (jsonDate) {
                        var date = new Date(parseInt(jsonDate.substr(6)));
                        var month = date.getMonth();
                        return date.getDate() + "/" + month + "/" + date.getFullYear();
                    }
                },


            ],


            columnDefs: [{

                targets: 3,
                data:"FeedbackID",
                render: function (data, type, row, meta) {
                    if (type === 'display' && data.length > 40) {
                       return '<span title="' + data + '">' + data.substr(0, 38) + '...<a href="" data-id="'+data+'" data-toggle="modal" class="opencomment" data-target="#myModal">Show More</a>';

                    }
                    else {
                        return data;
                    }


                }

            }],

            "language": {
                "emptyTable": "No Events Found Related To This User"
            }
        });
    });
</script>

<div class="container" style="margin-top:10px">
    <table id="FeedbackDetails" class="ui celled table">
        <thead>
           <tr>
             <th>S.No</th>
             <th>User Name</th>
             <th>Email ID</th>
             <th>Comment</th>
             <th>Designation</th>
             <th>Organization</th>
             <th>Contact No</th>
             <th>City</th>
             <th>Feedback Date</th>
            </tr>
          </thead>
     </table>
  </div>
  <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
           <div class="modal-content">
                <div class="modal-header">
                     <h4 class="modal-title">Feedback Comment</h4>
                </div>
                <div class="modal-body">
                     <p id="commentdesc"></p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
  </div>


public ActionResult LoadData()
{           
    using (DHIFeedbackEntities2 Ms = new DHIFeedbackEntities2())
    {
         var feedbacklist = Ms.FeedBacks.ToList<FeedBack>();
         return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);
    }
}

Answer 1

I cannot find the comment div in your modal with id #commentdesc.

So change your modal HTML to:

<div id="myModal" class="modal fade" role="dialog">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <h4 class="modal-title">Feedback Comment</h4>
                   </div>
                   <div class="modal-body">
                       <p id="commentdesc"></p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                   </div>
               </div>
           </div>
       </div>

Then show the modal when the link is clicked. Also to get your comment change to $(this).data('id'); and since you are using paragraph tag set its html and not val properties

    $(document).on("click", ".opencomment", function () {
        var mycomment = $(this).data('id');
        $(".modal-body #commentdesc").html(mycomment);
        $('#myModal').modal('show');
    });

Also if your jquery selector is by ID, there is no need to search it within a class: $(".modal-body #commentdesc").val(mycomment); change that to $("#commentdesc").val(mycomment);