CalcBuilder Forum
2 form in the same page, java conflict
my code java:
//DO NOT MODIFY THIS LINE, IS NEEDED TO HANDLE PROPER CALCULATOR INSTANCE
seed=$('cb_layout_wrapper').getParent().getProperty('id').substr(0,$('cb_layout_wrapper').getParent().getProperty('id').indexOf("_"));
CB.validator.messages.required = "Questo campo non può essere vuoto";
CB(".dinstyle").hide();
CB("#optfield2").change(function(){
CB(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield2").find(":selected").attr("mv_option")).show(500);
});
CB('select').change(function(){
// get selected element
var elemSelected=CB(this).find('option:selected').attr('mv_option');
// check to show divs depends on elem selected
if (elemSelected=='val0') {
$(seed+'_calculate').hide();
}
if (elemSelected=='val1') {
$(seed+'_calculate').show();
$(seed+'_calculate').value="Calcola il preventivo";
cb_setValue('metricubi','');
cb_setValue('pagato2','');
cb_setValue('email2','');
cb_setValue('emailocell2','0');
}
if (elemSelected=='val2') {
$(seed+'_calculate').show();
$(seed+'_calculate').value="Inviami un Promemoria";
cb_setValue('metricubi','0');
cb_setValue('pagato2','0');
cb_setValue('email2','0');
cb_setValue('emailocell2','');
}
});
is similar in the other form in the same page
Hi,
we assume you're adding javascript code to the 'on loaded page' tab. That javascript is added to the page and has access to all elements of it, regardeless if they are on the same calculator or not. At the begginning of your code you have a
seed
variable. This is a unique identifier for each form. Each calculator is inside a div section with id="xxxxx_cb_form" where xxxxx is the unique number you have above (seed).
So, when you use these types of selector
CB(".dinstyle")
you're getting all elements with class 'dinstyle' of all calculators, if you use your form id
CB("#"+seed+"_cb_form").find(".dinstyle")....
you will get all elements with class dinstyle inside this specific form.
EDIT::Just noticed you tried to use the seed on some places. Remember to use always the jquery alias CB and when the seed is applied to element id the selector would be
CB("#"+seed+"_calculate")
For the form fields that don't contain the seed themselves you would need to use the above form seed to find elements inside, or refer to them as 'the first/second element with this name', using the eq selector:
http://api.jquery.com/eq-selector/
Hope this helps,
Edited by MSTeam - 24.02.2015 11:35
hi and tks for reply,
this is my first form java code:
//DO NOT MODIFY THIS LINE, IS NEEDED TO HANDLE PROPER CALCULATOR INSTANCE
seed=$('cb_layout_wrapper').getParent().getProperty('id').substr(0,$('cb_layout_wrapper').getParent().getProperty('id').indexOf("_"));
CB.validator.messages.required = "Questo campo non può essere vuoto";
CB("#optfield").change(function(){
cb_setValue('email',seed);
CB("#"+seed+"_cb_form").find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield").find(":selected").attr("mv_option")).show(500);
});
this is my second form java code:
//DO NOT MODIFY THIS LINE, IS NEEDED TO HANDLE PROPER CALCULATOR INSTANCE
seed2=$('cb_layout_wrapper').getParent().getProperty('id').substr(0,$('cb_layout_wrapper').getParent().getProperty('id').indexOf("_"));
CB.validator.messages.required = "Questo campo non può essere vuoto";
CB("#optfield2").change(function(){
cb_setValue('email2',seed2);
CB("#"+seed2+"_cb_form").find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield2").find(":selected").attr("mv_option")).show(500);
});
I noticed that seed is equal to seed2.
how can I retrieve the id right of every form?
I think the error is in this line
seed2=$('cb_layout_wrapper').getParent().getProperty('id').substr(0,$('cb_layout_wrapper').getParent().getProperty('id').indexOf("_"));
that should return the id of each form, but I always get the id of the first form.
tks
Edited by alexanderich - 24.02.2015 15:49
Hi,
yes, the seed line seems to be copied from an example that we created for older versions with $ operator, maybe you could use a more efficient way to refer to your form elements in javascript if you duplicate fields, with the eq operator commented above.
http://api.jquery.com/eq/
Although you get the seed, you're not filtering the right elements when you refer to
CB("#optfield")
(this gets all elements with id=optfield, so you're working at the same time with both calculators fields).
For the first calculator you need the first occurence of the field optfield:
CB("#optfield").eq(0)
and for the second one the second occurence
CB("#optfield").eq(1)
There you can add your needed functions
CB("#optfield").eq(1).find.....
the first form would be
CB(".cb_form").eq(0)
and the second
CB(".cb_form").eq(1)
To fill a value of the first occurence of a field named email:
CB("input").eq(0).val("newvalue");
and so on. The helpers to set values won't be of use for your case because they can't identify which of the fields you want to set.
(Of course changing the variable names among calculators would be of great help too.. :)
Hope this helps, regards
Edited by MSTeam - 25.02.2015 08:51
hi,
I refer my modified form.
first form:
//optfield (name optfield) in first form
CB("#optfield").change(function(){
//hide in first form
CB(".cb_form").eq(0).find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield").find(":selected").attr("mv_option")).show(500);
});
second form:
//optfield (name optfield2) in second form
CB("#optfield2").change(function(){
//hide in second form
CB(".cb_form").eq(1).find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield2").find(":selected").attr("mv_option")).show(500);
});
optfield names are different in the two forms optfield and optfield2.
I tried with your code but the second form does not respond to the selection.
always work and only the first form.
from the first string I wrote:
CB (". Cb_form"). Eq (0) .find (". Dinstyle"). Hide ();
I can also control whether to show or hide the second form by changing the string with
CB (". Cb_form"). Eq (1) .find (". Dinstyle"). Hide ();
but the string that should control the second optfield seems not to work
// optfield (name optfield2) in second form
CB ("# optfield2"). Change (function () {
I tried to change the line of code above with
CB("#optfield").Eq(1).Change (function () {
but nothing
Can you help me?
this is my site page where are the calc forms
xxxxx
Edited by alexanderich - 25.02.2015 11:59
Edited by alexanderich - 02.03.2015 19:13
Hi,
we just visited your page and seems you have duplicated some code:
At the first form we can see:
CB("#optfield2").change(function(){
CB(".cb_form").eq(0).find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield").find(":selected").attr("mv_option")).show(500);
});
You should not have any reference there to optfield2 if its in another form/calculator: For the first form your script should be just:
CB("#optfield").change(function(){
CB(".cb_form").eq(0).find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield").find(":selected").attr("mv_option")).show(500);
});
and for the second:
CB("#optfield2").change(function(){
CB(".cb_form").eq(1).find(".dinstyle").hide();
CB(".dinclass-"+CB("#optfield2").find(":selected").attr("mv_option")).show(500);
});
Please note the index used for each case.
We also noted you have duplicated the .dinclass-val1 and .dinclass-val2 for all calculators, so all of them will show/hide with the comboboxes. If you want to avoid this you can change the values of optfield2 and the classes of the layout for different names, or, select that you want to show only the sections of the actual form, like you do to hide all dinstyle sections.
For form 1:
CB("#optfield").change(function(){
CB(".cb_form").eq(0).find(".dinstyle").hide();
CB(".cb_form").eq(0).find(".dinclass-"+CB("#optfield").find(":selected").attr("mv_option")).show(500);
});
For form 2:
CB("#optfield2").change(function(){
CB(".cb_form").eq(1).find(".dinstyle").hide();
CB(".cb_form").eq(1).find(".dinclass-"+CB("#optfield2").find(":selected").attr("mv_option")).show(500);
});
Hope this helps, regards
hi,
i have 2 calc form in the same page.
both have java code on the page and come into conflict. For example when I go to change the text of the button(with java code) also changes the calculation of one another. I would like to know how I can separate the two processes(instance) in java code.
tks