How to call Modal Dialog from Datatables row - seem to have conflict with Jquery UI

Question

I want to create "CRUD" functions by calling a modal form by clicking on a row in Datatables.

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 "live" functions, where you can initialize a table and call a simple jquery function.

I'm using:

• code.jquery.com/jquery-1.9.1.js
• code.jquery.com/ui/1.10.2/jquery-ui.js
• ../DataTables-1.9.4/media/js/jquery.dataTables.js

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?

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 )
});

Solution

A little sleep and another stab at this yielded a solution that at least solves the Datatable Dialog issue, I'll have to assume that any other issues I was having lies the other add-ins that I included. So to me this is solved.

The answer was 99% in this post - thanks to the author for the great working example.

I modified their link solution, combined with Datatables "live" solution example with variables, and was able to successfully pass data to a working dialog that works with pagination as the previous link explains.

This set up would allow me to create JQuery-UI Modal Forms, pass the ID from mySQL table column, and execute the form that's handing the Server Side PHP CRUD functions I needed.

(I can't take credit for any part of this, other than time spent making sure it worked).

The working example is taken straight from Datatables "live events" example, should be easy to drop in if you remove the sAjaxsource and go with a plain Datatable..

  $('#example').dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                "bStateSave": true,
                "sPaginationType": "full_numbers",
                "sAjaxSource": " /*your data source page here*/ "           
            } );

             /* Add events */
            $("body").on("click", "#example tbody tr", function (e) {
                 e.preventDefault();                    

                var nTds = $('td', this);
                //example to show any cell data can be gathered, I used to get my ID from the first coumn in my final code
                var sBrowser = $(nTds[1]).text();
                var sGrade = $(nTds[4]).text();
                var dialogText="The info cell I need was in (col2) as:"+sBrowser+" and in (col5) as:"+sGrade+"" ;
                var targetUrl = $(this).attr("href");

                $('#table-dialog').dialog({
                  buttons: {
                    "Delete": function() {
                        window.location.href = targetUrl;
                    },
                    "Cancel": function() {
                      $(this).dialog("close");
                    }
                  }
                });                 
                //simple dialog example here
                $('#table-dialog').text(dialogText ).dialog("open");                
            });

Comments

[DevlshOne]

This seems to be a more complex issue than can be analyzed with just the posting of a snippet of your script. Could you create a jsFiddle, please?