PDA

View Full Version : [SOLVED] Filling ComboBox problem via CI controller



shoopnl
1 Dec 2009, 1:34 PM
Hi,

I am trying to fill up a combobox in form via a CI controller, but it does not seem to work, I suspect I have some problem with returning (JSON) data.
I do not see any JSON data in firebug (or I do not know where to find it ;)).

This is the data store:

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/index.php/extjs/genres'
}),
autoLoad: true
});(Remark: There is no .php at the end of the url, sinc this is a direct call to a controller in CI)

This is the form:

new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: document.body,
frame: true,
title: 'Film Informatie Formulier',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Titel',
name: 'title',
allowBlank: false
},{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'genre_name',
valueField: 'id',
width: 130
}]
});This is the CI Controller:


class Extjs extends Controller {

function Extjs(){
parent::Controller();
}

function index(){
$this->load->view('extjs/test');
}

function genres(){

$this->load->helper('json');
$this->load->model('ext/Genres');
$genres = $this->Genres->getAllGenres();

$data = json_encode($genres);
echo '({"rows":"' . $data . '})';
}

}If I call the CI Controller directly then it returns:


({"rows":"[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},{"id":"6","genre_name":"Sience-Fiction"}]})Which seem to be OK.

Does anyone have any Idea what I am doing wrong, or how I can find my JSON data in firebug ;)?

Thanx in advance

husniadil
1 Dec 2009, 2:25 PM
By default, if you use autoLoad: true, it will use GET method and there's a parameter called _dc
so the URL might be like this: http://localhost/index.php/extjs/genres?_dc=1259706236569


to avoid this, add baseParams into your proxy in the store...



baseParams: {
query: ''
}


or by eliminating autoLoad: true, and changing mode: 'local' into mode: 'remote'

shoopnl
2 Dec 2009, 9:43 AM
Thanx husniadil (http://www.extjs.com/forum/member.php?u=81068) for your reply,

I tried your suggestions, but was not able to solve the problem.

1st, added baseParams like this:

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/index.php/extjs/genres'
}),
baseParams: {
query: ''
},
autoLoad: true
});
//genres.load();Remark: I also tried it with this url:

url: 'http://localhost/index.php?c=extjs&m=genres'And in CI with enabled query strings (where c=controller and m=function trigger)
Maybe I have to do something with the query?

2nd, added Remote like this:

{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'remote',
store: genres,
displayField:'genre_name',
valueField: 'id',
width: 130
}and the data store like this:

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/index.php/extjs/genres'
})
//autoLoad: true
});
genres.load();Both without good result :-|

husniadil
2 Dec 2009, 9:56 AM
Nothing? I mean, if you see in firebug, is there still no json response? hmm weird :-?

shoopnl
2 Dec 2009, 10:05 AM
Good question, difficult to answer, since I do not know what or where to search for or to find my JSON result in firebug :s

husniadil
2 Dec 2009, 10:11 AM
http://www.extjs.com/forum/attachment.php?attachmentid=17504&stc=1&d=1259777450

/:) :-?

shoopnl
2 Dec 2009, 10:22 AM
Golden tip, (My console was not enabled, thanx for that), any way it returns with an error, do I have to do something with this _DC number?

shoopnl
2 Dec 2009, 10:30 AM
Ok with the query back in the script (as described above) I get correct response, but my combo box is still empty, I do not understand why that is still empty?

husniadil
2 Dec 2009, 10:39 AM
try adding config options in your combo:

triggerAction: 'all'

and

remove genres.load(); and autoLoad: true (in the store)

shoopnl
2 Dec 2009, 10:43 AM
Nice to see you laugh about me :D,

Anyway, I followed your suggestions and there is no more _dc,
there is even a good response from the URL call, but my combobox is still empty.
this is what I have now.

Data source:

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/index.php/extjs/genres'
}),
baseParams: {
query: ''
},
autoLoad: true
});
//genres.load();combobox:

{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'genre_name',
valueField: 'id',
width: 130
}I tried the combobox with both mode's local and remote, the both give a good responce (JSON data, see reply above) but the combobox stay's empty :s

2 Dec 2009, 10:48 AM
I'm actually using CI to build an application for Ext JS inaction's last two chapters.

I don't have any problems like this.

My first question: Why are you setting the url to "'http://82.171.216.27/index.php/extjs/genres'" instead of "index.php/extjs/genres" ?

Also, i removed index.php from my URLs by modifying my apache config file. It's such an eyesore.

RewriteEngine on
# exclode these
RewriteCond $1 !^(index\.php|user_guide|resources|images|ext3|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]


your json should look like:

{"rows":"[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},{"id":"6","genre_name":"Sience-Fiction"}]}

Without the surrounding ( )'s.

husniadil
2 Dec 2009, 10:56 AM
Nice to see you laugh about me :D,
It's funny, the firebug console was disabled :D

Hmm.. did you see my previous post about triggerAction: 'all'? Put it and your combo should work correctly ;)

shoopnl
2 Dec 2009, 11:14 AM
Yes I added
triggerAction: 'all'
in my combo, when I click on the combo it now does a load of the genres.

I also removed genres.load(); and autoLoad: true (in the store)

Also corrected the JSON, the response is now:

({"rows":"[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},
{"id":"6","genre_name":"Sience-Fiction"}]"})But the box stays empty

husniadil
2 Dec 2009, 11:17 AM
Look at your JSON, it's weird...

({"rows":"[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},
{"id":"6","genre_name":"Sience-Fiction"}]"})it should be:

{"rows":[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},
{"id":"6","genre_name":"Sience-Fiction"}]} look, vBulletin is coloring the code above, but their color are different!

Remove the double-quote " before opening array mark and after closing array mark,

and don't surround it with ( )'s, just like jgarcia said.

shoopnl
2 Dec 2009, 11:17 AM
I'm actually using CI to build an application for Ext JS inaction's last two chapters.

I don't have any problems like this.

My first question: Why are you setting the url to "'http://localhost/index.php/extjs/genres'" instead of "index.php/extjs/genres" ?

Also, i removed index.php from my URLs by modifying my apache config file. It's such an eyesore.

RewriteEngine on
# exclode these
RewriteCond $1 !^(index\.php|user_guide|resources|images|ext3|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
your json should look like:

{"rows":"[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},{"id":"6","genre_name":"Sience-Fiction"}]}Without the surrounding ( )'s.

JSON is corrected.
Removed the IP number and Http.
the index.php is not a problem now, I know about the Rewrite settings,
Anyway the JSON response is good now but the combobox is not filled, this means that server side is correct and the problem is on client side.

shoopnl
2 Dec 2009, 11:23 AM
Finaly, The combobox is filled, due to all my attempts to get some Good JSON in my firebug (while console was disabled ;)) I destroyed the JSON echo in the controller.

Any way,
Many many thanx, I learned a lot today and most of all the combobox is filled via CI.


Look at your JSON, it's weird...

({"rows":"[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},
{"id":"6","genre_name":"Sience-Fiction"}]"})

it should be:
({"rows":[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},
{"id":"6","genre_name":"Sience-Fiction"}]})

husniadil
2 Dec 2009, 11:28 AM
JSlint (http://jslint.com) says that the json with surrounding ( )'s are invalid.. remeber :)

JSlint says "JSON: good." in code below:

{"rows":[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"},{"id":"5","genre_name":"Thriller"},
{"id":"6","genre_name":"Sience-Fiction"}]}

shoopnl
2 Dec 2009, 11:37 AM
JSLint does not say to enable your console in firebug ;)

In CI there is a JSON library which I was using to convert my returned data from the database (model) to correct JSON layout. I stopped using this and build an echo function with another tool there I made a lot of errors. What I realy needed was the Query option in the data store, this seemed to be the real problem.

I will now try to build back to my original setting with the use of the JSON library from CI, then I cannot make any mistakes with my () and "".

For now thank you very much and I will never forget to enable my console in firebug :D

husniadil
2 Dec 2009, 12:26 PM
lol.. you have a sense of humor :D

that's good to remember enabling firebug console while you are working ;)

in forum after your problem is solved, don't forget to edit the title so it contains: [SOLVED] mark.


cheers ~o)

husni.adil