CODEWITHSUNDEEP
jquerytwitter-bootstrapdatatable
kamakhya mishra
kamakhya mishra

Reputation: 55

When adding dynamic html( a button with a modal class associated with it) using $().html(), bootstrap seems to not working

When using datatable to dynamically create a button, which when clicked will display the modal class associated with it.i am able to successfully do so,however the bootstrap seems not to be working.I am using fnRowCallback function of datatable and then creating dynamic button and modal div using jquery html function, $().html

$('td:eq(4)', nRow).html('
  <div class="text-center">
     <button class="btn btn-sm btn-flat btn-danger width-150px" data-toggle="modal" data-target="#myModalNorm2'+aaData[1]+'">'+aaData[1]+'-Update</button>
  </div>
    <div class="modal fade" id="myModalNorm2'+aaData[1]+'" tabindex="-1"role="dialog" aria-labelledby="myModalLabel2'+aaData[1]+'" aria-        hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
              <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                         <span aria-hidden="true">&times;</span>
                         <span class="sr-only">Close</span>
                     </button>
                     <h4 class="modal-title"id="myModalLabel2'+aaData[1]+'">File Service Plan -'+aaData[1]+' -'+aaData[1]+'</h4>
            </div>

      <!-- Modal Body -->

            <div class="modal-body">

                    <form role="form" action="" method="post" name="myForm" id="myForm">
                            <div class="row">
                                    <div class="col-md-12">
                                                <div class="box-body">
                                                        <div class="form-group">
                                                             <label>Service ID</label> 
                                                             <input type="text" readonly hidden class="form-control" id="serviceid" name="serviceid" value="'+aaData[1]+'"/>
                                                        </div>

                                                </div>
                                    </div>

                            </div> 
                    </form>
            </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-"data-dismiss="modal">Close</button>
        <button type="submit" name="submit" class="btn btn-primary pull-right" value="SUBMIT">Save Changes</button>
    </div>
  </div>
 </div>
</div>
');

Upvotes: 0

Views: 369

Answers (1)

Bindrid
Bindrid

Reputation: 3735

First of, you should not put the modal inside your table. You should have a single modal html defined on your form set up for reuse. I put mine at the bottom of my html between the tag and the tags.

   columnDefs:[{targets:-1, render:function () {
      return "<button type='button' class='btn btn-default btn-xs'>Show</button>";

    }}],

Is all I put in that column then attach a button handler.

You can see my fully functioning code on JSBin http://live.datatables.net/sesabupo/1/edit

This code uses a row button to show the data in a modal or you can select the row and click the details button on the bottom

Upvotes: 0

Related Questions