How to merge two Jquery function

[farhadidreesMember]

hi Guys…i have two jquery functions.first one is showing data in grid and we can also update data in grid..
2nd one is filtering data like if we want to see data of ‘farhad’ so it will bring data according to ‘farhad’;
i want to merge both functions in one platform like i want to update data in grid and also want to filter data on same grid…

first function code is….

$(document).ready(function () {
// prepare the data
var data = {};
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘name’},
{ name: ‘id’}
],
id: ‘id’,
url: ‘data_qualification.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&name=” + rowdata.name;// + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title;
/// data = data + “&Address=” + rowdata.Address + “&City=” + rowdata.City + “&Country=” + rowdata.Country + “&Notes=””;
data = data + “&id=” + rowdata.id;
$.ajax({
dataType: ‘json’,
url: ‘data_qualification.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
}
});
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 280,
height: 350,
selectionmode: ‘singlecell’,
source: dataAdapter,
theme: theme,
editable: true,
columns: [
{ text: ‘ID’, editable: false, datafield: ‘id’, width: 100 },
{ text: ‘ Certificate Name’, datafield: ‘name’, width: 180 }
]
});
});

2nd function is

script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘ShippedDate’, type: ‘date’},
{ name: ‘ShipName’},
{ name: ‘ShipAddress’},
{ name: ‘ShipCity’},
{ name: ‘ShipCountry’}
],
url: ‘data.php’,
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
};
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width : 900,
source: source,
theme: theme,
filterable: true,
columns: [
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘yyyy-MM-dd’, width: 200 },
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Address’, datafield: ‘ShipAddress’, width: 180 },
{ text: ‘City’, datafield: ‘ShipCity’, width: 100 },
{ text: ‘Country’, datafield: ‘ShipCountry’, width: 140 }
]
});
});

waiting for solution
Regards..
Farhad Idrees

[Peter StoevKeymaster]

Hi Farhad,

In order to enable the filtering in your first function, set the Grid’s filterable property to true and make sure you have the jqxgrid.filter.js and jqxdropdownlist.js, jqxlistbox.js files loaded.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[farhadidreesMember]

Hi Peter..
i have loaded all the files but its not working..
could u please explain?
Regards..
Farhad

[Peter StoevKeymaster]

Hi Farhad,

Please, take a look at the Grid’s filtering examples available on our website. They should help you to get started with the filtering.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts