Dinamically load data (from server) to "select" type input fields
Dinamically load data (from server) to "select" type input fields
Hello,
I am trying to dinamically load data to "select" type input fields with .ajax. Only when editor form is called (opened).
1) This one works great, but data loads before editor form is called by user. And I'm worried about api performance due many .ajax calls to server. Because I'll use several "select" type fields in one form.
[code]
{
"label": "Label:",
"name": "name",
"type": "select",
"ipOpts": getData() // Returns array of objects - .ajax() with async: false
}
[/code]
So I thought about using Editor.add() method, to manually adding "fields"object, after hole Editor object was loaded.
2) Something, like this, but it doesn't work..
[code]
var Editor = new $.fn.dataTable.Editor( {
"domTable": "#loading",
"idSrc": "id",
"events": {
"onPreCreate":function (){
Editor.add( {
"label": "Label:",
"name": "name",
"type": "select",
"ipOpts": getData() // Returns array of objects - .ajax() with async: false
}
[/code]
Am I on the right track to approach this? Or maybe should I refer to FieldType plug-in?
Any guidance are welcome.
I am trying to dinamically load data to "select" type input fields with .ajax. Only when editor form is called (opened).
1) This one works great, but data loads before editor form is called by user. And I'm worried about api performance due many .ajax calls to server. Because I'll use several "select" type fields in one form.
[code]
{
"label": "Label:",
"name": "name",
"type": "select",
"ipOpts": getData() // Returns array of objects - .ajax() with async: false
}
[/code]
So I thought about using Editor.add() method, to manually adding "fields"object, after hole Editor object was loaded.
2) Something, like this, but it doesn't work..
[code]
var Editor = new $.fn.dataTable.Editor( {
"domTable": "#loading",
"idSrc": "id",
"events": {
"onPreCreate":function (){
Editor.add( {
"label": "Label:",
"name": "name",
"type": "select",
"ipOpts": getData() // Returns array of objects - .ajax() with async: false
}
[/code]
Am I on the right track to approach this? Or maybe should I refer to FieldType plug-in?
Any guidance are welcome.
This discussion has been closed.
Replies
- Trigger form to be displayed
1. onInitCreate
- Trigger form to be submitted
2. onPreSubmit
- Ajax sent
3. onPostSubmit
4. onSetData
5. onPreCreate
- Data added to DataTable
6. onCreate
7. onPostCreate
I've missed one or two events out (like onOpen for brevity), but that's the basic sequence.
I'm thinking this need to be in the documentation! Thanks for highlighting and bring to my attention that it needs to be :-)
Regards,
Allan
I've got it working! As you said, with onInitCreate event.
Because I'm having difficulty in getting the data back to ajax. Or can you give me some advice on how will I pass the value properly?
Here is my php code that is called by function loader that is triggered on onInitCreate event:
[code]
<?
require_once("config.php");
$sql="SELECT lastName, firstName, middleName FROM table_faculty";
$result = mysql_query($sql);
$stack=array();
while($row = mysql_fetch_array($result))
{
$name = $row[0]." ,".$row[1]." ".$row[2];
array_push($stack,array($name,$name));
}
echo json_encode($stack);
?>
[/code]
Here is my jquery code:
[code]
var test= new Array({"label" : "a", "value" : "a"});
function loader(){
test.splice(0,1);
$.ajax({
"url": 'php/getFacultyNames.php',
"async": false,
"dataType": 'json',
"success": function (json) {
for(var a=0;a < json.length;a++){
obj= { "label" : json[a][0], "value" : json[a][1]};
test.push(obj);
}
}
});
return test;
}
[/code]
Hope you can help me. Thanks!
Allan