jquery ui tab - add close icon to a dynamic added tab

I dynamically added tabs as the following way:


tabpgIndex++;
href="#tabpg"+tabpgIndex;
var title = 'New Tab-'+tabpgIndex;
$('#tabs').append('<div id="tabpg'+tabpgIndex+'">{content}</div>'); //you can add your content here, or any dynamic content you want after this body've been build.

$('#tabs').tabs( 'add', href, title);  //jquery ui tab method

$('#tabs ul li a span').last().prepend('<span id="closeicon-'+tabpgIndex+'" class="ui-icon ui-icon-circle-close" style="float:right; cursor: pointer;"></span>'); // prepend the close icon with an id, so it attached to the right of the tab title without a line break

//with the id I given, I managed a click event to it, like this:
$('#tabs ul li a').on('click','#closeicon-'+l_tabpgIndex,function(){
        alert('close icon clicked');
        //close this tab.
 });

I don't know whether it works for you or not in your case, but it works for me, and hope it will work for you too.

jquery tab - check existing tab by tab lable/title

function checkTabExists(tabname) {
    var tabExists = false;
    $('#tabs ul li a').each(function(i) {
        if (this.text == tabname) {
            tabExists = true;
            $("#tabs").tabs("select", i); // if found, I immediately select to the tab.
        }            
    });  
    return tabExists;
}

jqGrid jquery - dynamic Caption with input textbox

when defining the jqgrid, set a variable to the option, caption, like following:

caption: myCaption,

then, whenever you want to set your caption, make html statement to the caption variable, myCaption; in the example I even try to make an input to the caption for another purpose.


e.g.
var data = $('#grid1').jqGrid('getRowData',1);    
myCaption = 'Customer ID: '+data.customer_id+'<br>';
myCaption = myCaption+'Name: <input id="icname'" type="text" value="'+data.cname+'" />';

finally, set the caption by the jqgrid method, setCaption.

$('#grid1').jqGrid('setCaption',myCaption);

for capturing the change of the input, you need to bind a change event to the input element with jquery .on function.

$('#gview_grid1').on('change','#icname', function() {
     alert( $(this).val() );
}

javascript - completely hide the jqgrid with wrapper div

<div id="gridWrapper" style="display: none;" >
<table id="grid1"></table>
</div>

and then, I can use

$('#gridWrapper').toggle();

to toggle the wrapper and show the grid when I want.

jqgrid - dynamic add/remove subgrid in run time

I'm using jqGrid 1.5.2, and I have a grid as subgrid, both parent and subgrid are in cell edit mode with no sorting allow.

In loadComplete event of the parent grid, I successful removed some of the subgrids which depended on the data of the row by unbind event to the element as following:


loadComplete: function() {
  var dataIds = $('#mygrid1').jqGrid('getDataIDs');
  for (var i = 0;i < dataIds.length; i++) {
    var data = $("#mygrid1").jqGrid('getRowData', dataIds[i]);
    if (data[i].hasChild='N') {
      var grid = $("#mygrid1");      

      currChild[dataIds[i]=$( "#"+dataIds[i]+"td.sgcollapsed",grid[0].clone(true,ture); //Before unbind, store up the event and data of the element in an array for dynamically added back
      $("#"+dataIds[i]+"td.sgcollapsed",grid[0]).unbind('click').html(''); //then, it's safe to remove 

    } 

} }

Then, I allow user to change the data[i].hasChild in the parent gird, then I call this dynamically change in afterSaveCell event as follow:


if (change/toggle happened) {
var grid = $("#mygrid1"); 

  if (data[rowid].hasChild=='Y') {
   $("#"+rowid+" td.sgcollapsed", grid[0].replaceWith(currChild[rowid]); //replace the element with the clone
  } else {
    grid.collapseSubGridRow(rowid); //require to collapse the subgrid before remove
    currChild[rowid]=$("#"+rowid+"td.sgcollapsed",grid[0].clone(true,ture); //Before unbind, store up the event and data of the element again in its array
    $( "#"+rowid+"td.sgcollapsed",grid[0]).unbind('click').html(''); //then, it's safe to unbind again
}}


Example: php json_encode json string put into javascript object array

//javascript:
...

//myjsonstring will catch the string returned from the url, getmydata.php

var myjsonstring = $.ajax({
url: 'getmydata.php',
async: false,
success: function(data, result) {
if (!result) { alert('Failure to retrieve the items.'); }
}
}).responseText;

var myDataStore =  $.parseJSON(myjsonstring);

//then, I can get any field in any row that are stored in myDataStore
// e.g. var l_fname = myDataStore[0].firstname; //the first row of data

//getmydata.php
...
$tsql = "EXEC proc_sel_my_data ?, ?"; //says 2 args
$param1 = "*"; $param2 = "*";
$params = array( &$param1, &$param2);
sqlsrv_query($conn,"SET CHARACTER SET 'utf8'"); //I'm using sqlserver
if ($stmt = sqlsrv_query( $conn, $tsql, $params)) {
$data = array();
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){ //fetch each row and put into an array
$data[] = $row;
}
// print_r($data);
} else { echo 'Query fail.';}

echo json_encode($data); // encode the $data array to json, and it'll be return to ajax

p.s. PHP 5.3.8, Apache 2.2.21, PHP SQL Server 2.0.1, jquery 1.6.2

jqGrid - set select option width

I did it in loadComplete event: (or, you can do it when you define the colModel)

$('#grid1').setColProp(mycolname, { editoptions: {
value: myvalues(), // a function to get the select options
dataInit: function(elem){ $(elem).width(70); } //set the width you want
}});

jqGrid - dynamic Enable/Disable column editable

I did it in beforeSelectRow event of jqGrid (cell edit mode):

beforeSelectRow: function(id) {
var data = $("#grid1").jqGrid('getRowData', id);
var cm = $('#grid1').jqGrid('getColProp',mycolname);// mycolname is the column you're going to enable/disable
if (data.myfield == 'Y') {
cm.editable = false;// Not Editable
} else {
cm.editable = true;// Editable
}}

jqGrid - Remove subgrid/ expand sign on selected row

I did it in jqgrid loadComplete event:

loadComplete: function() {
var dataIds = $('#grid1').jqGrid('getDataIDs');
for (var i = 0;i < dataIds.length; i++) {

var data = $("#grid1").jqGrid('getRowData', dataIds[i]);
if (data.myfield =='Y') { // a condition {optional}
$("#"+dataIds[i]+"td.sgcollapsed",$('#grid1')).unbind('click').html('');}
}}