Skip to main content

Problem with Jmaki in a jsf project

10 replies [Last post]
lazarus___
Offline
Joined: 2008-08-26

Hi there,
I m new to Jmaki plus i m Italian so my english it is not really good, i ask sorry for that.
I have a problem with jmaki... the situation is that: i have 2 combo boxes. the values of first populates the second, it is a similiar case i found on the web for States and Cities... I did everything well i think, but when i select a value in the first combobox the values of second one don't change and i really don't know why:(
i run the debug and everithing works also the result of jmaki is correct but i can see this result in the second combo box...
Here is the java code

// the 2 comboboxes

the second values depend from the first combo box values

//Managed Bean methos

// to populate the second combobox the first time

public String getAzioniAtStart() throws JSONException {
JSONArray azioniList = new JSONArray();
JSONObject azione = new JSONObject();

azioniAtStart = (List) this.attivitaList.get(0).getTariffarioazioneCollection();
for (int loop = 0; loop < azioniAtStart.size(); loop++) {
azione.put("label", azioniAtStart.get(loop).getNomeAzione());
azione.put("value", azioniAtStart.get(loop).getId());
azioniList.put(azione);
azione = new JSONObject();
}
return jmaki.util.JSONUtil.jsonArrayToString(azioniList, new StringBuffer());
}

// to populate the second combo box the first time

public String getAttivitaList() throws JSONException {
JSONArray attivitaData = new JSONArray();
JSONObject attivitaObject = new JSONObject();
attivitaList = this.getTariffarioattivitas(true);
for (int loop = 0; loop < attivitaList.size(); loop++) {
attivitaObject.put("label", attivitaList.get(loop).getNomeAttivita());
attivitaObject.put("value", attivitaList.get(loop).getId());
attivitaData.put(attivitaObject);
attivitaObject = new JSONObject();
}
return jmaki.util.JSONUtil.jsonArrayToString(attivitaData, new StringBuffer());
}

/*the 2 methos to change the values of second combo box when user select a value in the first one*/

public void service(FacesContext context, AjaxResult result) {
HttpServletRequest request = (HttpServletRequest) context.getExternalContext().getRequest();
String valueid = request.getParameter("value");

result.setResponseType(AjaxResult.JSON);
String nuoveAzioni = new String();
try {
nuoveAzioni = this.getNuoveAzioni(valueid);
} catch (JSONException ex) {
Logger.getLogger(TariffarioattivitaController.class.getName()).log(Level.SEVERE, null, ex);
}
result.append(nuoveAzioni);
}

public String getNuoveAzioni(String valueId) throws JSONException {
JSONArray azioniNewList = new JSONArray();
JSONObject azioneNewObject = new JSONObject();

for (int loop = 0; loop < this.attivitaList.size(); loop++) {
if (valueId.equals(this.attivitaList.get(loop).getId()+"")) {
List tmp = (List) attivitaList.get(loop).getTariffarioazioneCollection();
for (int i = 0; i < tmp.size(); i++) {
azioneNewObject.put("label", tmp.get(i).getNomeAzione());
azioneNewObject.put("value", tmp.get(i).getId());
azioniNewList.put(azioneNewObject);
azioneNewObject = new JSONObject();
}
}

}
return jmaki.util.JSONUtil.jsonArrayToString(azioniNewList, new StringBuffer());
}

// the method in glue.js to call the service to get new values for the second combo box

jmaki.subscribe("/cb/getAttivita/*", function(args){
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
var message = args.value; //prendo il valore selezionato nella combo
jmaki.log("sono qui dopo args.value"+message);
jmaki.doAjax({

method: "POST",
url: jmaki.webRoot+"/faces/tariffarioattivita-service.ajax",

content: {cmd: 'idAttivitaSelezionata', value: message},
callback:function(req){
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval("("+resText+")");
jmaki.log("il risultato finale = " + res);
jmaki.publish('cb/setValues', res);
},

onerror: function (m){

jmaki.log("Error setting filter value.");

}
});
});

here the debugs messages:

Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '*onSelect' , target : {} , acti... [X]
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '*onSelect' , target : {} , action : 'call' , id : 'jmk_3'}
glue.js : onSelect request from: j_id_id20:thisAttivita
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '/cb/getAttivita/*' , target : {... [X]
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '/cb/getAttivita/*' , target : {} , action : 'call' , id : 'jmk_4'}
glue.js : onSelect request from: j_id_id20:thisAttivita
sono qui dopo args.value1
returned response is = [{value:1,label:'Andare in tribunale'}]
il risultato finale = [object Object]
Publish : Topic: cb/setValues message [{value : 1 , label : 'Andare in tribunale'}]

the result value is correct " Andare in tribunale" but i cant see it in the second combo boxe i still see "Parlare con il giudice" that is the old value.

It is going me Crazy i really dont know why it does not work.
I hope someone can help me...
I ask sorry for my english again i hope the question is clear...

Thanks in advance to everyone
All the best ,
Nicola

No one can help me with that problem?
Please...

Message was edited by: lazarus___

Message was edited by: lazarus___

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
sloanb
Offline
Joined: 2003-09-14

Lazarus,

Taking some of your code and running it I found a couple of problems. In your glue.js file you are publishing with {message : { values : res}) this should be as follows.

[code]
jmaki.subscribe("/cb/getAttivita/onSelect", function(args){
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
var message;
if(args.value) message = args.value; //prendo il valore selezionato nella combo
jmaki.log("sono qui dopo args.value"+message);
jmaki.doAjax({

method: "POST",
url: jmaki.webRoot+"/faces/ComboBoxBean-service.ajax",

content: {cmd: 'idAttivitaSelezionata', value: message},
callback:function(req){
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval(resText);
jmaki.log("il risultato finale = " + res);
jmaki.publish("/cb/setValues", { message: {value : res}});
},

onerror: function (m){

jmaki.log("Error setting filter value.");

}
});
});
[/code]

Notice the change from values to value. The next thing I saw was in our jsp you need to change your subscribe to :

[code]
id="thisAzione"
subscribe="/cb"

value="#{tariffarioattivita.azioniAtStart}" />
[/code]

This will catch all publishes to /cb. When the first combobox is select the onSelect event will be fired and your glue.js will call /cb/setValues. This will in turn call the setValues public method on the widget. You might consider renaming that subscription something different than the first such as /cb2 etc.. so it doesn't get confusing. After making these changes I was able to get everything to work as you would expect. You should realize however that the onSelect is being called upon initialization of the combobox widgets due to the fact that the first element is selected upon initialization. Hope this helps.

lazarus___
Offline
Joined: 2008-08-26

Hi sloanb ,
Thank you very much now it works i made ur change but i left
[code]
url: jmaki.webRoot+"/faces/tariffarioattivita-service.ajax",
[/code]
I still get the alert from the browser i dunno why but the value in the secon combo box is updated correctly now.
Thakn you very much for your help, can u tell me some materials to study better jmaki please? Plus i m a computer engeneer and if i can help for somthing i will happy to do what i can.
If you know why the browser say the target id is null or is not an object please let me know...

Thanks alot for your help

sloanb
Offline
Joined: 2003-09-14

Lazarus,

Your very welcome, glad I could help. The reason the targetId is giving you an error is be because the processActions method is being called and there is no associated action with these events. It is nothing to worry about but you can get rid of them by placing a targetId in your payload. {targetId : 'widgetId', message { value : reg } } etc..

As far as helping with jMaki we can always use the help. If you are interested check out this page and read the Contribute Code section. Again glad we got your working.

lazarus___
Offline
Joined: 2008-08-26

/*the 2 methos to change the values of second combo box when user select a value in the first one*/

public void service(FacesContext context, AjaxResult result) {
HttpServletRequest request = (HttpServletRequest) context.getExternalContext().getRequest();
String valueid = request.getParameter("value");

result.setResponseType(AjaxResult.JSON);
String nuoveAzioni = new String();
try {
nuoveAzioni = this.getNuoveAzioni(valueid);
} catch (JSONException ex) {
Logger.getLogger(TariffarioattivitaController.class.getName()).log(Level.SEVERE, null, ex);
}
result.append(nuoveAzioni);
}

public String getNuoveAzioni(String valueId) throws JSONException {
JSONArray azioniNewList = new JSONArray();
JSONObject azioneNewObject = new JSONObject();

for (int loop = 0; loop < this.attivitaList.size(); loop++) {
if (valueId.equals(this.attivitaList.get(loop).getId()+"")) {
List tmp = (List) attivitaList.get(loop).getTariffarioazioneCollection();
for (int i = 0; i < tmp.size(); i++) {
azioneNewObject.put("label", tmp.get(i).getNomeAzione());
azioneNewObject.put("value", tmp.get(i).getId());
azioniNewList.put(azioneNewObject);
azioneNewObject = new JSONObject();
}
}

}
return jmaki.util.JSONUtil.jsonArrayToString(azioniNewList, new StringBuffer());
}

// the method in glue.js to call the service to get new values for the second combo box

jmaki.subscribe("/cb/getAttivita/*", function(args){
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
var message = args.value; //prendo il valore selezionato nella combo
jmaki.log("sono qui dopo args.value"+message);
jmaki.doAjax({

method: "POST",
url: jmaki.webRoot+"/faces/tariffarioattivita-service.ajax",

content: {cmd: 'idAttivitaSelezionata', value: message},
callback:function(req){
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval("("+resText+")");
jmaki.log("il risultato finale = " + res);
jmaki.publish('cb/setValues', res);
},

onerror: function (m){

jmaki.log("Error setting filter value.");

}
});
});

here the debugs messages:

Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '*onSelect' , target : {} , acti... [X]
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '*onSelect' , target : {} , action : 'call' , id : 'jmk_3'}
glue.js : onSelect request from: j_id_id20:thisAttivita
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '/cb/getAttivita/*' , target : {... [X]
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '/cb/getAttivita/*' , target : {} , action : 'call' , id : 'jmk_4'}
glue.js : onSelect request from: j_id_id20:thisAttivita
sono qui dopo args.value1
returned response is = [{value:1,label:'Andare in tribunale'}]
il risultato finale = [object Object]
Publish : Topic: cb/setValues message [{value : 1 , label : 'Andare in tribunale'}]

the result value is correct " Andare in tribunale" but i cant see it in the second combo boxe i still see "Parlare con il giudice" that is the old value.

It is going me Crazy i really dont know why it does not work.
I hope someone can help me...
I ask sorry for my english again i hope the question is clear...

Thanks in advance to everyone
All the best ,
Nicola

lazarus___
Offline
Joined: 2008-08-26

// the method in glue.js to call the service to get new values for the second combo box

jmaki.subscribe("/cb/getAttivita/*", function(args){
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
var message = args.value; //prendo il valore selezionato nella combo
jmaki.log("sono qui dopo args.value"+message);
jmaki.doAjax({
method: "POST",
url: jmaki.webRoot+"/faces/tariffarioattivita-service.ajax",
content: {cmd: 'idAttivitaSelezionata', value: message},
callback:function(req){
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval("("+resText+")");
jmaki.log("il risultato finale = " + res);
jmaki.publish('cb/setValues', res);
},
onerror: function (m){

jmaki.log("Error setting filter value.");

}
});
});

here the debugs messages:

Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '*onSelect' , target : {} , acti... [X]
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '*onSelect' , target : {} , action : 'call' , id : 'jmk_3'}
glue.js : onSelect request from: j_id_id20:thisAttivita
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '/cb/getAttivita/*' , target : {... [X]
Subscribe Match : : Topic: /cb/getAttivita/onSelect listener {topic : '/cb/getAttivita/*' , target : {} , action : 'call' , id : 'jmk_4'}
glue.js : onSelect request from: j_id_id20:thisAttivita
sono qui dopo args.value1
returned response is = [{value:1,label:'Andare in tribunale'}]
il risultato finale = [object Object]
Publish : Topic: cb/setValues message [{value : 1 , label : 'Andare in tribunale'}]

the result value is correct " Andare in tribunale" but i cant see it in the second combo boxe i still see "Parlare con il giudice" that is the old value.

It is going me Crazy i really dont know why it does not work.
I hope someone can help me...
I ask sorry for my english again i hope the question is clear...
Thanks in advance to everyone
All the best ,
Nicola

sloanb
Offline
Joined: 2003-09-14

Looking at your code here you are publishing to the widget/setValues which is correct but you will want to do it this way.

[code]
jmaki.publish('/cb/setValues', { message : { value : res} });
[/code]

If you want the top if the list to be selected by default you would need to add the selected element to your object literal like this.

[code]
{ value : 1 , label : 'Andare in tribunale', selected: true }
[/code]

Hopefully this will lead you down the right path. Let me know if you need more help.

lazarus___
Offline
Joined: 2008-08-26

Thanks for ur answer,
i corrected my function on glue.js writing what u said
jmaki.publish("/cb/setValues", {messages: {values:res}});
but nothing change :( and i saw the browser give me an error: it says target id is null or is not an object :(

i hope it can help to understand why it does not work if u want i can check it on mozzilla to have more info...
Thanks in advance
Laz

sloanb
Offline
Joined: 2003-09-14

Can you post your jsp page and possibly your function from the glue.js so I can look it over? Surround the posted code with [code] and a closing (minus the ') and it will display properly.

lazarus___
Offline
Joined: 2008-08-26

Hi, Here is my code:

// function in glue.js

[code]
jmaki.subscribe("/cb/getAttivita/*", function(args){
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
var message = args.value; //prendo il valore selezionato nella combo
jmaki.log("sono qui dopo args.value"+message);
jmaki.doAjax({

method: "POST",
url: jmaki.webRoot+"/faces/tariffarioattivita-service.ajax",

content: {cmd: 'idAttivitaSelezionata', value: message},
callback:function(req){
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval(resText);
jmaki.log("il risultato finale = " + res);
jmaki.publish("/cb/setValues", {message: {values:res}});
},

onerror: function (m){

jmaki.log("Error setting filter value.");

}
});
[/code]
here is my jsp page

[code]
<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsf" %>

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>


New Attivitaclienti



New Attivitaclienti













value="#{tariffarioattivita.attivitaList}"
publish="/cb/getAttivita"/>
id="thisAzione"
subscribe="/cb/setValues"

value="#{tariffarioattivita.azioniAtStart}" />















Index




[/code]
Plus i post the function in my Bean

[code]
public void service(FacesContext context, AjaxResult result) {
HttpServletRequest request = (HttpServletRequest) context.getExternalContext().getRequest();
String valueid = request.getParameter("value");

result.setResponseType(AjaxResult.JSON);
String nuoveAzioni = new String();
try {
nuoveAzioni = this.getNuoveAzioni(valueid);
} catch (JSONException ex) {
Logger.getLogger(TariffarioattivitaController.class.getName()).log(Level.SEVERE, null, ex);
}
result.append(nuoveAzioni);
}

public String getNuoveAzioni(String valueId) throws JSONException {
JSONArray azioniNewList = new JSONArray();
JSONObject azioneNewObject = new JSONObject();

for (int loop = 0; loop < this.attivitaList.size(); loop++) {
if (valueId.equals(this.attivitaList.get(loop).getId()+"")) {
List tmp = (List) attivitaList.get(loop).getTariffarioazioneCollection();
for (int i = 0; i < tmp.size(); i++) {
azioneNewObject.put("label", tmp.get(i).getNomeAzione());
azioneNewObject.put("value", tmp.get(i).getId());
azioniNewList.put(azioneNewObject);
azioneNewObject = new JSONObject();
}
}

}
return jmaki.util.JSONUtil.jsonArrayToString(azioniNewList, new StringBuffer());
}

[/code]
Plus there are 2 function to populate 2 combobox with initial values i post them too

[code]
public String getAzioniAtStart() throws JSONException {
JSONArray azioniList = new JSONArray();
JSONObject azione = new JSONObject();

azioniAtStart = (List) this.attivitaList.get(0).getTariffarioazioneCollection();
for (int loop = 0; loop < azioniAtStart.size(); loop++) {
azione.put("label", azioniAtStart.get(loop).getNomeAzione());
azione.put("value", azioniAtStart.get(loop).getId());
azioniList.put(azione);
azione = new JSONObject();
}
String prova= jmaki.util.JSONUtil.jsonArrayToString(azioniList, new StringBuffer());
return prova;
}
public String getAttivitaList() throws JSONException {
JSONArray attivitaData = new JSONArray();
JSONObject attivitaObject = new JSONObject();
attivitaList = this.getTariffarioattivitas(true);
for (int loop = 0; loop < attivitaList.size(); loop++) {
attivitaObject.put("label", attivitaList.get(loop).getNomeAttivita());
attivitaObject.put("value", attivitaList.get(loop).getId());
attivitaData.put(attivitaObject);
attivitaObject = new JSONObject();
}
return jmaki.util.JSONUtil.jsonArrayToString(attivitaData, new StringBuffer());
}
[/code]
Everytihing works well at the start. but when i change the value in the first combobox the second is not udated with new values plus if i click out of second cobobox i get an error message from the browser, it says TagetId is null or is not an object.
Ps in second combo box i can see only the values loaded at start.
I hope to be clear and sorry if i don t explain well my porblem..
Thnx in advance for ur help
Laz

sloanb
Offline
Joined: 2003-09-14

I'll try to make some time tonight to check this out for you. Sorry it has taken me so long. I'll let you know.