How to add content in dynamic tab

Question

I have a jqQrid that I have placed inside a HTML table. Now as per my requirement I have to show this grid inside the dynamic tab which is opened on hyper link click.

Here is the code for dynamic tab creation:

function addTab(title) {
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select', title);
    }
    else {
        if (title == "Check in List") {
            //Here i have to call jqgrid loading function but how I am not getting !!!
            var content = '';
        }
        else {
            var content = '<p>Hii</p>';
        }
        $('#tt').tabs('add', {
            title: title,
            content: content,
            closable: true
        });
    }
}

Here is the function to generate the grid:

function CheckInRecordgrid() {
    //Grid Codes 
}

And here is the HTML table placeholder:

<table id="CheckIngrid"></table>

Now my question is how to call the grid generation function if the clicked tab is as per the condition?

Here is my full grid code..

        function CheckInRecordgrid() {
        var data = [[48803, "DELUX", "A", "2014-09-12 12:30:00", "Done"], [48804, "NORAML", "V", "2014-09-12 14:30:00", "Pending"]];

        $("#CheckIngrid").jqGrid({
            datatype: "local",
            height: '100%',
            autowidth: true,
            colNames: ['Room No.', 'Category', ' Guest name', ' Date & Time ', 'Status'],
            colModel: [
                    {
                        name: 'Room No.', index: 'Room No.', width: 100, align: 'center'
                    },
                    {
                        name: 'Category', index: 'Category', width: 100, align: 'center'
                    },
                    {
                        name: 'Guest name', index: 'Guest name', width: 100, align: 'center'
                    },
                    {
                        name: 'Date & Time', index: 'Date & Time', width: 100, align: 'center'
                    },
                    {
                        name: 'status', index: 'status', width: 100, align: 'center'
                    }
                ],
            caption: "Check In List"
        });

        var names = ["Room No.", "Category", "Guest name", "Date & Time", "status"];
        var mydata = [];

        for (var i = 0; i < data.length; i++) {
            mydata[i] = {};
            for (var j = 0; j < data[i].length; j++) {
                mydata[i][names[j]] = data[i][j];
            }
        }

        for (var i = 0; i <= mydata.length; i++) {
            $("#CheckIngrid").jqGrid('addRowData', i + 1, mydata[i]);
        }
    }

Answer 1

try this

  if (title == "Check in List") {
     var content = '';
  }else {
     var content = '<p>Hii</p>';
  };

  $('#tt').tabs('add', {
      title: title,
      content: content,
      closable: true,
  }).tabs({
      onAdd: function(title,index){
           if (title == "Check in List") {
             CheckInRecordgrid();
           }
      }
  });