I’m looking at the page now and things seem to be fine. Is it that you’ve managed to resolve the labels issue in the past few hours?
Ok I have made some decent progress i think, and now Im not sure if the array was the was to go ahead with it, as I need to get each label name in the html label, but when I try and put one in they all go in, or I cant work out the code to get one name in each label.
To make it much easier I have put it all in a jsfiddle.
I know it doesnt look the best still, but can hopefully look at that next week, after hopefully getting the maths to work how I need it too.
It seems that for each select, you’re wanting multiple parts. One part about the label and another part about the options.
var selects = [
{
label: 'Some label',
options: { ... }
},
{
label: 'Another label',
options: { ... }
}
];
Does that help?
Hi Paul,
Yes I see, so would I then be able to add the second value that I need for each dropdown.
If I can and all good, would you mind helping me out with it a bit more, so something like this -
[COLOR=#003366][B]var[/B][/COLOR] selects [COLOR=#339933]=[/COLOR] [COLOR=#009900][[/COLOR]
[COLOR=#009900]{[/COLOR]
label[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]'Some label'[/COLOR][COLOR=#339933],
value[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]'400'[/COLOR][COLOR=#339933],[/COLOR][/COLOR]
options[COLOR=#339933]:[/COLOR] [COLOR=#009900]{[/COLOR]"12:" "Monthly", "6:" "Bi-Monthly"[COLOR=#009900], "4:" "Quarterly"[COLOR=#009900], "0:" "N?A"[/COLOR]}[/COLOR]
[COLOR=#009900]}[/COLOR][COLOR=#339933],[/COLOR]
[COLOR=#009900]{[/COLOR]
label[COLOR=#339933]:[/COLOR] [COLOR=#3366CC]'Another label'[/COLOR][COLOR=#339933],[/COLOR]
value: '350',
options[COLOR=#339933]:[/COLOR] [COLOR=#009900]{[/COLOR] ... [COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR]
As Its a big change around again by the looks…
It doesn’t have to be that big of a change.
Currently you have this loop:
$.each(selects, function (index, options) {
where the function can be pulled out and named something meaningful:
function createSelect(index, options) {
...
}
$.each(selects, createSelect);
After making the structure change to the following:
var selects = [
{
label: 'Some label',
value: '400',
options: {"12:" "Monthly", "6:" "Bi-Monthly", "4:" "Quarterly", "0:" "N?A"}
},
{
label: 'Another label',
value: '350',
options: { ... }
},
...
}
you’ll just need to go one level deeper.
function createSelect(index, options) {
...
}
$.each(selects, function (index, select) {
// do stuff with label and/or value
...
$.each(select.options, createSelect);
});
By breaking out more complex parts in to their own dedicated functions, you end up making the program simpler and easier to manage.
Hi Paul,
I cant work it out I’m sorry.
I have changed the array to below, which is the easy bit
var selects = [
{
label: 'Label 1',
value: '400',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 2',
value: '350',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 3',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 4',
value: '320',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 5',
value: '360',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 6',
value: '310',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 7',
value: '370',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 8',
value: '340',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 9',
value: '330',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
]
Then the rest has just confused me big time, I understand what your saying, but as for organising it, I dont get it.
For instance, is creating this function correct in how you see it.
function createSelect(index,option) {
var select = $("<select class='selectD' name='select" + index + "'></select>").appendTo(sumDiv),
optionValues = sortOptions(options);
$.each(optionValues, function (index, value) {
var key = options[value];
$("<option></option>", {
value: value,
text: key
}).appendTo(select)
})
select.change(function () {
fieldset.find("span").text(sum($("select", fieldset)))
$(".sumTotal").find("span").text(sum($("#test select")))
}).change()
}
So at this point i end up with this below.
var selects = [
{
label: 'Label 1',
value: '400',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 2',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 3',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 4',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 5',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 6',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 7',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 8',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 9',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
]
$(function () {
$(".addRow").click(addRow)
})
function sum($els) {
var sum = 0;
$els.each(function () {
sum += +$(this).val()
})
return sum
}
function addRow() {
var fieldset = $('<fieldset></fieldset>').appendTo("#test");
var sumDiv = $("<div class='sum'>total £<span>0</span></div>").appendTo(fieldset)
function sortOptions(options) {
var optionValues = [];
$.each(options, function (value, key) {
optionValues.push(value);
});
function numbersDecreasing(a, b) {
return b - a;
}
optionValues.sort(numbersDecreasing);
return optionValues;
}
function createSelect(index,options) {
var select = $("<select class='selectD' name='select" + index + "'></select>").appendTo(sumDiv),
optionValues = sortOptions(options);
$.each(optionValues, function (index, value) {
var key = options[value];
$("<option></option>", {
value: value,
text: key
}).appendTo(select)
})
select.change(function () {
fieldset.find("span").text(sum($("select", fieldset)))
$(".sumTotal").find("span").text(sum($("#test select")))
}).change()
}
}
$.each(selects, function (index, select) {
var label = $("<label>"+ value +"</label>").prependTo(fieldset);
$.each(select.options, createSelect);
});
Which seems a right muddle of code, and I know its def not right.
Do you have an example online? I would like to take you through how to troubleshoot and debug things.
Which web browser are you using - many of them have good debug tools that can help you out a lot.
I tend to use Mozilla with the console
Okay - use the standard error console (ctrl+shift+j) and having it open while you load the page.
Click on the Error tab to filter out the rest of the noise, and you will see a meaningful error message about a reference error with a variable called value.
Ok , I have sort of guessed it and changed it to
$.each(selects, function (index, select) {
var label = $("<label>"+ select +"</label>").prependTo(fieldset);
$.each(select.options, createSelect);
});
The next one is fieldset is not defined, am I on the right track.
lol,
i’ve made a right pigs ear of it…
actually made me chuckle
http://www.accend4web.co.uk/OCalculator/design.php
<script type="text/javascript">
var selects = [
{
label: 'Label 1',
value: '400',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 2',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 3',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 4',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 5',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 6',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 7',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 8',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
{
label: 'Label 9',
value: '300',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
},
]
$(function () {
$(".addRow").click(addRow)
})
function sum($els) {
var sum = 0;
$els.each(function () {
sum += +$(this).val()
})
return sum
}
function addRow() {
var fieldset = $('<fieldset></fieldset>').appendTo("#test");
var sumDiv = $("<div class='sum'>total £<span>0</span></div>").appendTo(fieldset)
function sortOptions(options) {
var optionValues = [];
$.each(options, function (value, key) {
optionValues.push(value);
});
function numbersDecreasing(a, b) {
return b - a;
}
optionValues.sort(numbersDecreasing);
return optionValues;
}
$.each(selects, function (index, select) {
var label = $("<label>"+ select.label +"</label>").prependTo(fieldset);
$.each(select.options, createSelect);
});
function createSelect(index,options) {
var select = $("<select class='selectD' name='select" + index + "'></select>").appendTo(sumDiv),
optionValues = sortOptions(options);
$.each(optionValues, function (index, value) {
var key = options[value];
$("<option></option>", {
value: value,
text: key
}).appendTo(select)
})
select.change(function () {
fieldset.find("span").text(sum($("select", fieldset)))
$(".sumTotal").find("span").text(sum($("#test select")))
}).change()
}
}
</script>
Nope, just cant work it out, please could you give me a lift up with it.
I’ve reverted it back to the post above as have tried a lot but cant work it out, sorry.
Okay - guessing is not normally a good thing to do.
When the each method works through your data structure, each of the sections of info about the select will be passed to the function.
{
label: 'Label 1',
value: '400',
options: { '12': 'Monthly', '6': 'Bi-Monthly', '4': 'Quarterly', '0': 'N/A' }
}
so the select part from the function could more accurately be renamed to selectInfo, to represent the above data structure that’s given to the function.
$.each(selects, function (index, selectInfo) {
...
});
You could then use selectInfo.label, selectInfo.value and selectInfo.options to access those different parts of the object.
Morning Paul,
I did at one point get to this stage yesterday and it resulted in the label coming out as a single value, but on each click it always showed the first label, and also the dropdowns didnt appear and so the sum didnt work…
$(function () {
$(".addRow").click(addRow)
})
function sum($els) {
var sum = 0;
$els.each(function () {
sum += +$(this).val()
})
return sum
}
function addRow() {
var fieldset = $('<fieldset></fieldset>').appendTo("#test");
var sumDiv = $("<div class='sum'>total £<span>0</span></div>").appendTo(fieldset)
function sortOptions(options) {
var optionValues = [];
$.each(options, function (value, key) {
optionValues.push(value);
});
function numbersDecreasing(a, b) {
return b - a;
}
optionValues.sort(numbersDecreasing);
return optionValues;
}
$.each(selects, function (index, selectInfo) {
var label = $("<label>"+ selectInfo.label +"</label>").prependTo(fieldset);
$.each(selectInfo.options, createSelect);
});
function createSelect(index, selectOptions) {
var select = $("<select class='selectD' name='select" + selectOptions.options + "'></select>").appendTo(sumDiv),
optionValues = sortOptions(selectOptions.options);
$.each(optionValues, function (index, value) {
var key = selectOptions.options[value];
$("<option></option>", {
value: value,
text: key
}).appendTo(select)
})
select.change(function () {
fieldset.find("span").text(sum($("select", fieldset)))
$(".sumTotal").find("span").text(sum($("#test select")))
}).change()
}
}
I’m missing somehting somewhere and i cant see it basically.
I’m stuck Paul I’m sorry, the label comes out but its always the first one, the dropdowns aren’t appearing and the one that has no values, and so the sum and total arent then working.
I understand its close and its a few tweeks but i cant see it.
I have just noticed that the label coming out as label 1 always is correct isnt as its the start of each form, its that the other labels arent coming out, so im only getting 1 loop out of the 9 that it should be.
And when I comment out
$.each(selects, function (index, selectInfo) {
var label = $("<label>"+ selectInfo.label +"</label>").prependTo(fieldset);
//$.each(selectInfo.label, createSelect);
});
all the labels appear in a line, so there something in the function thats stopping it looping.
if i dont get it by the end of play today could you put me out of my misery with it
The problem is def in the functions below and however i try its not right…
$.each(selects, function (index, selectInfo) {
var label = $("<label>"+ selectInfo.label +"</label>").prependTo(fieldset);
$.each(selectInfo.label, createSelect);
});
function sortOptions(options) {
var optionValues = [];
$.each(options, function (value, key) {
optionValues.push(value);
});
function numbersDecreasing(a, b) {
return b - a;
}
optionValues.sort(numbersDecreasing);
return optionValues;
}
function createSelect(index, options) {
var select = $("<select class='selectD' name='select" + options + "'></select>").appendTo(sumDiv),
optionValues = sortOptions(selects.options);
$.each(optionValues, function (index, value) {
var key = options[value];
$("<option></option>", {
value: value,
text: key
}).appendTo(select)
})
I’m simply not able to work it out.
I have updated the fiddle to reflect where i am now.