title: How to call Modal Dialog from Datatables row - seem to have conflict with Jquery UI
body: <p>I want to create "CRUD" functions by calling a modal form by clicking on a row in Datatables.</p>
  
  <p>I've been at this for hours traversing through each step of my code and it seems I'm getting a conflict between my JQ-UI  and Datatables. I found several examples, including the Datatables example for <a href="https://datatables.net/release-datatables/examples/advanced_init/events_live.html" rel="nofollow noreferrer">"live" functions</a>, where you can initialize a table and call a simple jquery function.</p>
  
  <p>I'm using:     </p>
  
  <ul>
  <li>code.jquery.com/jquery-1.9.1.js</li>
  <li>code.jquery.com/ui/1.10.2/jquery-ui.js</li>
  <li>../DataTables-1.9.4/media/js/jquery.dataTables.js</li>
  </ul>
  
  <p>This example will give me the cursor, then makes the table "jump" across the page.
  Does anyone have a working example or a fiddle I can experiment with?</p>
  
  <pre><code>function openDialog() {
      $("#dialog-modal").dialog({
          height: 140,
          modal: true
      });
  }
  
  /* Init DataTables */
  $('#example').dataTable();
  
  /* Add events */
  $('#example tbody tr').on('click', function () {
  
      $('#example tbody tr').css('cursor', 'pointer');
      var sTitle;
      var nTds = $('td', this);
      var sBrowser = $(nTds[1]).text();
      var sGrade = $(nTds[4]).text();
      /*
      if (sGrade == "A")
          sTitle = sBrowser + ' will provide a first class (A) level of CSS support.';
      else if (sGrade == "C")
          sTitle = sBrowser + ' will provide a core (C) level of CSS support.';
      else if (sGrade == "X")
          sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.';
      else
          sTitle = sBrowser + ' will provide an undefined level of CSS support.';
       */
      openDialog();
  
      //alert( sTitle )
  });
  </code></pre>