CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjquery-jtable
stig
stig

Reputation: 1230

Javascript Jtable Close Child Table when clicked twice

I have a Javascript Jtable with some child tables. What I would like to do is to close the child table when the row header is clicked on for the second time.

So I have set some global variables:

var NotesOpen = false;
var HistoryOpen = false;
var ElementsOpen = false;

so on f.ex the Notes child table i the click function looks like this:

$img.click(function () {

if (NotesOpen == true) {
   console.log($(this).closest('tr').next('tr').find(':button').html());

   $(this).closest('tr').next('tr').find(':button').click();
   $(this).closest('tr').next('tr').find(':button').trigger('click');
   $(this).closest('tr').next('tr').find('.jtable-close-button').click();
}
NotesOpen = true;

I can see of the debugging line. That it finds the correct line since it say's <span>Close</span>in the console window. And if I just check $(this).closest('tr').next('tr').html() I can see that it is on the correct row.

However when I try trigger the click event I only get an error: Uncaught Error: cannot call methods on jtable prior to initialization; attempted to call method 'destroy' jquery-2.1.1.js:250

Upvotes: 2

Views: 1681

Answers (1)

DibaCode
DibaCode

Reputation: 176

This code is helpful for opening or closing the child table using clicking on image icon.

//CHILD TABLE DEFINITION FOR "PHONE NUMBERS"
Phones: {
    title: '',
    width: '5%',
    sorting: false,
    edit: false,
    create: false,
    display: function (studentData) {

        var $img = $('<img src="/Content/images/Misc/phone.png" title="Edit phone numbers" />'), //Create an image that will be used to open child table
            parentTable = $("#StudentTableContainer"); 

        //Open | Close child table when user clicks the image
        $img.click(function(){

            var tr = $(this).parents("tr"),
                isChildRowOpen = parentTable.jtable("isChildRowOpen", tr );

            if( isChildRowOpen ){
                $( parentTable.jtable("getChildRow", tr ) ).slideUp();
                return;
            }

            // some another code
        }
    }
}

Upvotes: 4

Related Questions