On Jan 8, 2008 7:04 PM, Jermaine
<Jermaine2028-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Hello everyone,
>
> I have a couple of checkboxes, where each checkbox belongs to a
> specific input field (which has a value). So whenever the user clicks
> on the checkbox, each value of the associated input field is added up
> and placed in the ''result'' ID. I''m using
unobtrusive Javascript to
> make this happen...
>
> However I want to able to add and remove a new line (checkbox with
> input field) as well, where the whole calculation process still needs
> to work.
Element.insert will do :)
Maybe something along the lines of
$$(".fieldpair").last().insert({
after: new Element("div", { className: "fieldpair"
}).insert(
new Element("input", { type: "checkbox"
}).observe("click", calculate)
).insert(
new Element("input", { type: "text"
}).observe("keyup", calculate)
)
});
<input type="textfield" /> has no meaning whatsoever. The type
should
be "text". I guess textfield is working because text is the default
value, but still :)
A couple of notes on your coding style (I''m just picky ;-) ):
- You don''t need to do each in order to call observe("click",
calculate), you can do $$("selector").invoke("observe",
"click",
calculate);
- Enumerable.inject is your friend, instead of doing
var total = 0;
$$("selector").each(function(elem) {
total += parseInt(elem.value)
});
You can do
var total = $$("selector").inject(0, function(accumulated, elem) {
return accumulated + parseInt(elem.value);
});
I know it''s not that different, but once you get the idea of inject
you''ll see plenty of code that can be cleaned up with it :)
I''d advise you read a bit more on the Enumerable methods to see what
they are able to do, since Enumerable is sooo much richer than
''each''
:)
http://prototypejs.org/api/enumerable
Best,
-Nicolas
> Anyone an Idea or suggestion how to fix this?
>
> Many thanks!!
>
> - J
>
> BTW: I''m using Prototype 1.6
>
> This is what I''ve got:
>
> <strong>#My calculate.js file:</strong>
>
> // Our main calculation function
> function calculate() {
> var total = 0;
>
> // For each fieldpair that has a child with a checked input
> // we get the sibling with a text input and add that value
> // to the total.
>
> $$(".fieldpair input:checked +
input:text").each(function(elem) {
> total += parseInt(elem.value);
> });
>
> // Show the result
> $("result").update("The total is: " + total);
> }
>
> // This is called when the document DOM has
> // been fully loaded by the browser.
> Event.observe(window, ''load'', function() {
>
> // Do the initial calculation. Some fields might be pre-checked.
> calculate();
>
> // Attach event handlers for click event on checkboxes
> $$(".fieldpair input:checkbox").each(function(elem) {
> elem.observe(''click'', calculate);
> });
>
> // Attach event handlers for keyup event on text fields
> $$(".fieldpair input:text").each(function(elem) {
> elem.observe(''keyup'', calculate);
> });
> });
>
> <strong>#my HTML:</strong>
>
> <script type="text/javascript"
src="prototype.js"></script>
> <script type="text/javascript"
src="calculate.js"></script>
>
> <!-- Some fieldpairs. -->
> <div class="fieldpair">
> <input type="checkbox" checked="1"/>
> <input type="textfield" value="10" />
> </div>
>
> <div class="fieldpair">
> <input type="checkbox" />
> <input type="textfield" value="20" />
> </div>
>
> <div class="fieldpair">
> <input type="checkbox" />
> <input type="textfield" value="30" />
> </div>
>
> <!-- Result goes here -->
> <p id="result">
> </p>
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---