Dinamically load data (from server) to "select" type input fields

balnys

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.

allan

You want to use the `onInitCreate` event rather than `onPreCreate` . The order of events is:

- 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

balnys

Thanks.

I've got it working! As you said, with onInitCreate event.

veydecapia

Sir can you post the code on your function getData()?
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

Can you link to a test case showing the issue please?

Allan