Warning "Can't reinitialize DataTable" when using Symfony2 and Twig

Every time I login this dialog pops up and keeps popping up when working in dev environment.

DataTables warning: table id = datTable - cannot reinitialize DataTable.

But whenever I start the production environment everything works fine. How can I get rid of this?

//controller

public function indexAction() {
    $em = $this->getDoctrine()->getManager();
    $po = $em->getRepository('MatrixEdiBundle:EdiTransactionDetail')->findDocs('850');

    return $this->render('MatrixEdiBundle:Matrix:index.html.twig', array('po' => $po));
}

      

//index.html.twig

{% extends 'layout.html.twig' %}
{# {% include 'MatrixEdiBundle:Matrix:header.html.twig'%} #}
{% block body %}
<div class="content">
</br>
  <table id="datTable"class="table table-bordered table-condensed table-hover">
      <thead>
        <th colspan="8">Edi Matrix</th>
        <tr>
          <th>Po Numbers</th>
          <th>Trading Partner Id</th>
          <th>PO 855 Acknowledgement</th>
          <th>PO 997 Acknowledgement</th>
          <th>Advance Shipment Notice</th>
          <th>Invoice</th>
          <th>Purchase Order Change</th>
          <th>Order Status</th>
        </tr>
      </thead>
      <tbody>
      {% for tran in po %}
        <tr>
            <td><a href="{{ path('matrix_edi_showpo', {'po_num':  tran.poNumber}) }}"data-toggle="modal"data-target="#myModal">{{tran.poNumber}}</td>

            <td>{{tran.ediTransaction.senderId}}</td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 855}) }}"data-toggle="modal"data-target="#myModal">
            {{ render(controller('MatrixEdiBundle:Matrix:matrix', {
            'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.    ediTransaction.receiverId, 'doc_type': 855, 'gs_number': tran.ediTransaction.gsNumber })) }}</a>
            </td>

            <td><a href="{{ path('matrix_edi_poack', {'gs_number':  tran.ediTransaction.gsNumber, 'receiver_id':  tran.ediTransaction.receiverId, 'sender_id': tran.ediTransaction.senderId}) }}"data-toggle="modal"data-target="#myModal">
            {{ render(controller('MatrixEdiBundle:Matrix:matrix', {
            'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.    ediTransaction.receiverId, 'doc_type': 997, 'gs_number': tran.ediTransaction.gsNumber })) }}</a>
            </td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 856}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {
            'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type': 856, 'gs_number': tran.ediTransaction.gsNumber }))}}</a>
            </td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 810}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type': 810, 'gs_number': tran.ediTransaction.gsNumber})) }}</a>
            </td>

            <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 860}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type':860, 'gs_number': tran.ediTransaction.gsNumber})) }}</a>
            </td>

          <td><a href="{{ path('matrix_edi_findAll', {'po_num':  tran.poNumber, 'sender_id':  tran.ediTransaction.senderId, 'doc_type': 870}) }}"data-toggle="modal"data-target="#myModal">{{ render(controller('MatrixEdiBundle:Matrix:matrix', {
        'po_num': tran.poNumber, 'sender_id': tran.ediTransaction.senderId, 'reciever_id': tran.ediTransaction.receiverId, 'doc_type': 870, 'gs_number': tran.ediTransaction.gsNumber
    })) }}</a></td>

        </tr>
      {% endfor %}
    </tbody>
    </table>
  </div> 


<div id="myModal"class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Details</h4>
      </div>
      <div class="modal-body">
        Loading content......
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endblock %}

{% block javascripts %}
{% javascripts
  'bundles/matrixdoc/js/jQuery.js'
  'bundles/matrixdoc/js/jquery.dataTables.min.js'
  'bundles/matrixdoc/js/dataTables.bootstrap.js'
  'bundles/matrixdoc/js/bootstrap.js'
   %}
  <script src="{{ asset_url }}"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#datTable').dataTable( {
      "scrollY": "400px",
      "scrollCollapse": true,
      "pagingType": "simple",
    });
    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });
    $(document).on("hidden.bs.modal", function (e) {
      $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    });
</script>
{% endjavascripts %}
{% endblock %}

      

+3


source to share


1 answer


CAUSE

The error Cannot reinitialize DataTable means that the DataTable is initialized more than once with $('#datTable').dataTable()

no destruction.

Decision



You $('#datTable').dataTable()

only run once in your code, so there must be something wrong in your templates. A search on StackOverflow confirmed this, see the answer for loading JavaScript twice in Symfony .

You need to move the block containing JavaScript code {% block javascripts %} ... {% endjavascripts %}

outside of the body block {% block body %} ... {% endblock %}

.

+1


source







All Articles