I have a an extjs 4.2 combobox that I'm using to display some data. Now I'm trying that based on a condition the combo would display a default value. I managed to return the needed data based on that condition, however I'm failing to set the necessary value in the combobox. How am I supposed to set that specific value?
combo:
var locationStore = Ext.create('Ext.data.Store', {
model: 'model_LOCATION',
proxy: {
type: 'ajax',
url: 'Record?DB=GEO&Table=LOCATION',
reader: {
type: 'xml',
record:'record'
}
},
autoLoad:true
});
var C_LOCATION= Ext.create('Ext.form.ComboBox', {
name : 'C_LOCATION',
id : '${DB}.${Table}.C_LOCATION',
store : locationStore,
queryMode : 'local',
displayField : 'display',
valueField : 'value',
});
AJAX call:
var data;
var code = 111;
data = "CODE ='" + code + "'";
var text;
$.ajax({
type: "POST",
url: "Record?DB=GEO&Table=LOCATION",
dataType: 'xml',
data: {
"Where": data
},
success: function(xml) {
text = xml;
Ext.getCmp('${DB}.GEO.LOCATION').setValue(text);
}
});
Give the combo box a reference in the config section (reference: 'comboBox'). Then call comboBox.setValue(defaultValueGoesHere) in your function where you are getting the specific value. You may need to hunt down the comboBox reference depending where you are.
I guess you will have to parse your XML response. Similar as in your code definition for the locationStore, where you specify the record in the xml response.
Why do you make the second ajax call?
Could you not filter the locationStore based on the CODE value, instead?
Related
Hi I have a DataTables DataTable object which requests json data via an ajax call. Each object inside the json data has a property called state that can be one of a number of values. Ultimately, I'd like to create several (Data)tables, one for each state without having each table request the same data via ajax again and again. For now, I haven't managed to make a single table filter out the rows with incorrect state yet and I'd like to solve this problem first.
The DataTable object defined as follows:
$(document).ready(function () {
var table = $('#example').DataTable({
data: example,
ajax: {
url: "{{ callback_url }}",
dataType: 'json',
dataSrc: '',
},
createdRow: function (row, data, index) {
},
columns: [{
data: "Type"
}, {
data: "State",
}
}]
});
});
I want to filter the data that comes from the ajax call based on a parameter (e.g. "if (row.State == 'new') {...};"). How can I do that? Does datatables have a function that can be passed to filter each row?
I really need several tables which show data from the same ajax callback but in different states (e.g. a "New" table, an "Old" table etc.). How can I do this without requesting the same json data again and again for each table rendered? Ideally I can store the ajax in a variable but with the async process I'm not sure how this will work out.
You can use one ajax and store the data, and than create each datatable.
Example:
$(document).ready(function () {
var data = null;
$.ajax(URL, {
dataType: 'json',
success: function(ajaxData){
data = ajaxData;
newData = data.filter(function(item){ return item.State == "New"});
oldData = data.filter(function(item){ return item.State == "Old"});
var newTable = $('#newTable').DataTable({
data: newData,
});
var oldTable = $('#oldTable').DataTable({
data: newData,
});
}
});
}
Within my HTML view file I have a link that looks like this:
url: 'http://localhost:3000/readings?limit=100&nodeID=0001'
This is part of an Ajax call that gets readings from my local database for nodeID = 0001.
In the corresponding .js controller file I have the following function:
.controller('ReadingsViewCtrl', function ($scope, $routeParams)
{
$scope.model = {
message: $routeParams.id}
});
I can now address the ID as {{model.message}} within my HTML view file.
What I want to do is somehow embed the {{model.message}} into the URL above so that I can get readings for arbitrary nodes, i.e. have something like url: 'http://localhost:3000/readings?limit=100&nodeID={{model.message}}'
This way I can get readings for an arbitrary nodeID passed in as a parameter instead of just node 0001. How can I do this?
EDIT: As asked here is the rest of the function that contains the URL property, it is part of an Ajax call that gets data from my database.
$.ajax({
url: 'http://localhost:3000/readings?limit=100&nodeID=0001',
dataType: 'json',
type: 'get',
cache: true,
success: function(data){
var jsonobject = [];
$(data).each(function(index, value){
var list = [];
var m = moment(value.time, 'YYYY-MM-DDTHH:mm:ss.SSSZZ');
var ts = moment(value.time).valueOf();
console.log(ts);
list[0] = ts;
list[1] = value.litres;
jsonobject.push(list);
})
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Water consumption in Litres/sec'
},
series : [{
name : 'Litres per flush',
data : jsonobject,
tooltip: {
valueDecimals: 2
}
}]
});
console.log(jsonobject);
}
});
I have seen several examples and can't seem to get the hang of passing more than one variable to mysql using jquery. Here is my situation:
I have a page with 2 cascading drop downs,( they work great using jquery to update second drop down based on the first drop down.)
when the first drop down is selected jquery updates the second drop down AND passes the customer id to a php script that creates a new record in the tblinvoice table (this also works great no problems.)
when the second drop down is selected I need to pass that value along with the invoice number to my php script so I can update the record with the instid.(this is the part that don't work)
If I only pass the instid and manually put the invoice number in the where clause of the query all works fine. If I omit the where clause all records are updated as expected. I need to know what I am doing wrong or what is missing.
I will try to post the code here
jquery code
$(document).ready(function() {
$("select#cust").change(function() {
var cust_id = $("select#cust option:selected").attr(
'value');
var test = $("#test").val();
var din = $("#idate").val();
$("#inst").html("");
if (cust_id.length > 0) {
$.ajax({
type: "POST",
url: "fetch_inst.php",
data: "cust_id=" + cust_id,
cache: false,
beforeSend: function() {
$('#inst').html(
'<img src="loader.gif" alt="" width="24" height="24">'
);
},
success: function(html) {
$("#inst").html(html);
}
});
if (test == 0) {
$.ajax({
type: "POST",
url: "wo_start.php",
data: "cust_id=" + cust_id,
cache: false,
beforeSend: function() {
},
success: function(html) {
$("#invoice").html(html);
$("#test").val(1);
var inum = $("#inv").val();
$("#invnum").val(din +
"-" + inum);
}
});
}
}
});
$("select#inst").change(function() {
var inst_id = $("select#inst option:selected").attr(
'value');
var custid = $("select#cust option:selected").attr(
'value');
var invid = # ("#inv").val()
if (inst_id.length > 0) {
$.ajax({
type: "POST",
url: "wo_start.php",
data: {
inst_id: inst_id,
}
cache: false,
beforeSend: function() {
},
success: function() {
}
});
}
});
});
I have tried using data: {inst_id:inst_id,custid:custid,invid:invid,} (no update to the table like this)
I also tried data: "inst_id="+inst_id+"&custid="+custid+"&invid="+invid,(this also gives no results.)
Can someone PLEASE look at this jquery and see if I am making a simple error?
Try this format:
data: { inst_id: inst_id, custid: custid, invid: invid },
You can post a JSON object to the server so long as you serialize it and then let the server know the data type.
First you need to define your JSON object:
var postData = { inst_id: inst_id, custid: custid, invid: invid };
Then update your ajax to use the serialized version of that object and let the server know the data type:
$.ajax({
type: "POST",
url: "fetch_inst.php",
data: JSON.stringify(postData),
contentType: "application/json",
..continue the rest of your ajax....
I have a very specific problem: I have a small form with four options. You may fill them out or not, and when you click 'Ok', I load a jqGrid with data depending on those options. But since I do not know what my columns look like, I let my servlet generate the column model and column name; thus I have to make an AJAX request to load the data and then fill it in jqGrid as "local" data. I would like to use pagination though.
Thus my question: How may I load more data into a jqGrid after it is already established through local data?
here's the code:
$.ajax({
type : 'GET',
url : 'data.jsp',
data : reqData,
dataType : 'json',
error: function() {
$("#dialog-message").dialog("open");
$("#ajax-loader").css("display", "none");
},
success : function(result) {
jQuery("#results").jqGrid({
data : result.rows,
datatype : "local",
colNames : result.columnNames,
colModel : result.columnModel,
pager : $('#pager'),
rowNum : 1000,
scroll : true,
viewrecords : true,
sortname : 'TITEL',
width : window.innerWidth - 30,
height : window.innerHeight - 190,
altRows : true,
loadError: function() {
$("#dialog-message").dialog("open");
$("#ajax-loader").css("display", "none");
},
loadComplete: function() {
$("#ajax-loader").css("display", "none");
}
}).jqGrid("navGrid", "#pager", {
edit: false,
add: false,
del: false,
search: true,
refresh: false
}).jqGrid("gridResize");
}
});
/edit: I've tried to do the following, but that still doesn't solve the problem that the grid doesn't know how many total pages there actually are (actually, at that point, I don't even know), and also, after loading, it thinks it only gets local data. Is there maybe an onScroll event or something? I haven't found one.
datatype : !json ? "local" : function(postdata) {
$.ajax({
type: 'GET',
url: 'data.jsp',
data: $.merge(postdata, reqData),
dataType: 'json',
success: function(data, status, jqXHR) {
var mygrid = jQuery("#results")[0];
var myjsongrid = eval("("+jqXHR.responseText+")");
mygrid.addJSONData(myjsongrid);
}
});
},
Can you not do something like this...get the grid, clear the data, define the url to get the data from (it may change depending on what option your user selected) and then change the dataformat to json instead of local.
var grid = $('#TargetGridID');
grid.clearGridData();
grid.setGridParam({ url: '../controller/action?datatype=Option1' });
grid.setGridParam({ datatype: 'json' });
grid.trigger('reloadGrid');
We use this methodology and it works great...use this with stored procedures capable of paging and the grids are blazing fast! I know a 20,000 row grid takes us roughly 700ms with a page count of 500 rows.
If you are using SQL for your data I can upload a sample on how to support paging in a SQL Stored Proc, very useful stuff.
How to disable autoload in jqGrid and load data manually when I need it?
Thanks.
If you set datatype to 'local' the data from the server will be not loaded. To force the loading of data you can change datatype to 'json' or 'xml' with respect of setGridParam method (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options and http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods#grid_related_methods) and then call trigger("reloadGrid") method.
See jqGrid is not loading data which has also the information what you asked.
Just don't set the default URL in the table. And install it just when you need to load data (for example by pressing a button) and then .trigger("reloadGrid").
Example for you:
jQuery("#grid").jqGrid(
{
//Simply comment out the URL
//url :"salepointsprovider.php",
datatype:"json",
colModel :[
{name:'SalePointId', index:'SalePointId'},
{name:'Name', index:'Name'}
]
}
$('#ShowRecordsButton').click(function () {
jQuery("#grid").jqGrid('setGridParam',
{url:"salepointprovider.php?SalePointId=" + argSalePointId, page:1});
jQuery("#grid").trigger('reloadGrid');
}
My grid without url send requests to server:
.../?_search=false&nd=1370817124473&rows=20&page=1&sidx=&sord=asc
Set datatype: "local" solve problem.
Reload grid by
`function reloadGrid(gridId, gridData){
$(gridId).jqGrid('clearGridData'); // need for nonempty grig (see http://www.trirand.com/blog/?page_id=393/help/triggerreloadgrid-not-work/)
$(gridId).jqGrid('setGridParam', {data: gridData}).trigger('reloadGrid');
}
`
No need to change datatype (at least for my json case it is recognized)
In treegrid you couldn't use datatype = 'local'. So instead 'local', I set datatype = 'jsonstring', define empty fake data and jsonReader. jsonReader should be defined correctly according to your retrieved data. Thanks for Oleg's answer. And, when I need to load data, I simply change datatype to 'json'.
var fakeData ={
rows: []
};
...
datatype: 'jsonstring',
datastr: fakeData,
...
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}