[jQuery] Re: Order Items. Please help me. Thank You.
@mkmanning
An even more important performance gain can be had by
not doing string concatenation (I put a caveat about this in the code
comment's also), but build an array of your html and then join the
array; it's siginficantly faster.
Funny that you mention this. In current browser versions it is ~2-4
times faster to do array.join instead of += and in the next gen
browsers the difference is close to none until you get to extremely
large loops and strings/arrays, around 100,000 or so, where is it
about 1.25 times faster in Chrome, 1.6 times in IE8, and twice as fast
in webkit. See my recent article and tests for a more comprehensive
explanation:
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
To summarize, the most significant things you can do to impact append
performance:
1) Move the append out of the for loop, and append one long string
~9x-10x faster
2) Append one DOM node instead of a collection of DOM nodes. ~6x
faster
tbodytr/trtr/trtr/tr/tbody appends much faster
then tr/trtr/trtr/tr
ulli/lili/lili/li/ul much faster then li/
lili/lili/li/ul
etc...
3) create a long html string instead of smaller nodes and then
appending to and adding attributes to them. ~3x faster
$(selector).append('td class=foo id=somethingcontent/
td');
instead of
$(selector).append($('td/td').append(something).addClass
('foo').attr('id','something'));
Doing those three generally speeds things up enough, and using += is
so much more legible then array.join that I cut my performance gains
off there unless I have really long arrays and speed seems to be an
actual problem instead of a hypothetical one.
[jQuery] Re: Order Items. Please help me. Thank You.
Hi Michael,
It is working fine. Thank You Very Much.
Just one final question. This is part of a form.
When the form is submitted but not validated on the server I rebuild
the themes list.
There is only one problem: when I delete a theme all disappear.
I think it is because themes is being initialized as follows: themes =
[];
Well, that is fine if initially the list is empty ... but if not then
I should get all themes.
So I am trying to create a function named InitThemes that initialize
themes.
li class=Themes
Economiabr/
Secundário e Universitáriobr/
Note 1br/
a class=Remove href=#RemoveRemover/a
input type=hidden name=Themes[0].Subject value=Economy/
input type=hidden name=Themes[0].LevelsCsv
value=Secondary,College/
input type=hidden name=Themes[0].Note value=Note 1/
/li
li class=Themes
Matemáticabr/
Universitáriobr/
Note 2br/
a class=Remove href=#RemoveRemover/a
input type=hidden name=Themes[1].Subject value=Mathematics/
input type=hidden name=Themes[1].LevelsCsv value=College/
input type=hidden name=Themes[1].Note value=Note 2/
/li
So basically in InitThemes I need to parse all this back to themes.
The values and text.
Maybe the inputs are easy but not the rest ... I think ...
Is there a better approach to accomplish this?
Thanks,
Miguel
On Feb 24, 9:39 pm, mkmanning michaell...@gmail.com wrote:
The problem is t[1] is now an array of objects, so you have to access
the text and value attributes of the objects by their array index.
Here are the buildThemesList function and the friendlyLevels functions
rewritten to account for that.
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK if
you aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done in
another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val($.map(t[1],function(l,i){return l.value;}).join
()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
});
//just to keep things exactly as the original
example's UI
$('#Index').val(themes.length);
}
function friendlyLevels(levels) {
if (levels.length == 1){
return levels[0].text;
}
var friendly = ;
$.each(levels,function(i,l){
friendly += l.text + ((i==levels.length-2)?'
e ':
(i==levels.length-1)?'':', ');
});
return friendly;
}
Couple of things to note: friendlyLevels now has {} enclosing the
first if statement. You'll see lots of coders not do that, but it's
really a good idea, and not just a style choice: javascript suffers
from automatic semicolon insertion which although not a common problem
to run into, could make things difficult to debug. Even though there
are only three checkboxes, the each function with the ternary means
you don't have to refactor if you decide to add more checkboxes.
To get the values into the hidden input, $.map() is used. Check it out
in the documentation. Hope this helps.
On Feb 24, 11:20 am, shapper mdmo...@gmail.com wrote:
@Michael,
I just installed Firebug and I almost made this working.
The only problem I have is when I am adding the levels to the list as
html and as hidden input:
+friendlyLevels(t[1].text.join(', '))+'br /'
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].value.join()).appendTo(li);
I get an error in Firebug:
t[1].text is undefined
[Break on this error] +friendlyLevels(t[1].text.join(', '))+'br /'
But as far as I know to get the text and value I use .text and .value.
My friendlyLevels function is
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly
[jQuery] Re: Order Items. Please help me. Thank You.
You could post to the server with ajax, or since you have all the data
server-side, just render the page with the themes array already
populated and call the build function
On Feb 25, 11:55 am, shapper mdmo...@gmail.com wrote:
Hi Michael,
It is working fine. Thank You Very Much.
Just one final question. This is part of a form.
When the form is submitted but not validated on the server I rebuild
the themes list.
There is only one problem: when I delete a theme all disappear.
I think it is because themes is being initialized as follows: themes =
[];
Well, that is fine if initially the list is empty ... but if not then
I should get all themes.
So I am trying to create a function named InitThemes that initialize
themes.
li class=Themes
Economiabr/
Secundário e Universitáriobr/
Note 1br/
a class=Remove href=#RemoveRemover/a
input type=hidden name=Themes[0].Subject value=Economy/
input type=hidden name=Themes[0].LevelsCsv
value=Secondary,College/
input type=hidden name=Themes[0].Note value=Note 1/
/li
li class=Themes
Matemáticabr/
Universitáriobr/
Note 2br/
a class=Remove href=#RemoveRemover/a
input type=hidden name=Themes[1].Subject value=Mathematics/
input type=hidden name=Themes[1].LevelsCsv value=College/
input type=hidden name=Themes[1].Note value=Note 2/
/li
So basically in InitThemes I need to parse all this back to themes.
The values and text.
Maybe the inputs are easy but not the rest ... I think ...
Is there a better approach to accomplish this?
Thanks,
Miguel
On Feb 24, 9:39 pm,mkmanningmichaell...@gmail.com wrote:
The problem is t[1] is now an array of objects, so you have to access
the text and value attributes of the objects by their array index.
Here are the buildThemesList function and the friendlyLevels functions
rewritten to account for that.
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK if
you aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove
class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done
in another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val($.map(t[1],function(l,i){return l.value;}).join
()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
});
//just to keep things exactly as the original
example's UI
$('#Index').val(themes.length);
}
function friendlyLevels(levels) {
if (levels.length == 1){
return levels[0].text;
}
var friendly = ;
$.each(levels,function(i,l){
friendly += l.text +
((i==levels.length-2)?' e ':
(i==levels.length-1)?'':', ');
});
return friendly;
}
Couple of things to note: friendlyLevels now has {} enclosing the
first if statement. You'll see lots of coders not do that, but it's
really a good idea, and not just a style choice: javascript suffers
from automatic semicolon insertion which although not a common problem
to run into, could make things difficult to debug. Even though there
are only three checkboxes, the each function with the ternary means
you don't have to refactor if you decide to add more checkboxes.
To get the values into the hidden input, $.map() is used. Check it out
in the documentation. Hope this helps.
On Feb 24, 11:20 am, shapper mdmo...@gmail.com wrote:
@Michael,
I just installed Firebug and I almost made this working.
The only problem I have is when I am adding the levels to the list as
html and as hidden input:
+friendlyLevels(t[1].text.join(', '))+'br /'
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].value.join()).appendTo(li);
I get an error in Firebug:
t[1].text is undefined
[Break on this error] +friendlyLevels(t[1].text.join(', '))+'br /'
[jQuery] Re: Order Items. Please help me. Thank You.
I am not using Ajax because I need to submit the form all at once.
I cannot submit the themes because the user is not created yet.
Anyway, the other option you suggested me was what I was trying:
$test = $('#Test');
$test.append(themes);
Where Test would be an hidden input.
I then read this value on the server.
When the page is redisplayed I fill the Test input again.
Then on document ready I read the content of this input, place it in
themes, and call build.
Am I thinking correctly?
The only problem is that I get an error:
Node cannot be inserted at the specified point in the hierarchy code:
3
[Break on this error] fragment.appendChild( ret[i] );
I am able to append a test string but not themes.
Am I doing something wrong?
Thanks,
Miguel
On Feb 25, 10:54 pm, mkmanning michaell...@gmail.com wrote:
You could post to the server with ajax, or since you have all the data
server-side, just render the page with the themes array already
populated and call the build function
On Feb 25, 11:55 am, shapper mdmo...@gmail.com wrote:
Hi Michael,
It is working fine. Thank You Very Much.
Just one final question. This is part of a form.
When the form is submitted but not validated on the server I rebuild
the themes list.
There is only one problem: when I delete a theme all disappear.
I think it is because themes is being initialized as follows: themes =
[];
Well, that is fine if initially the list is empty ... but if not then
I should get all themes.
So I am trying to create a function named InitThemes that initialize
themes.
li class=Themes
Economiabr/
Secundário e Universitáriobr/
Note 1br/
a class=Remove href=#RemoveRemover/a
input type=hidden name=Themes[0].Subject value=Economy/
input type=hidden name=Themes[0].LevelsCsv
value=Secondary,College/
input type=hidden name=Themes[0].Note value=Note 1/
/li
li class=Themes
Matemáticabr/
Universitáriobr/
Note 2br/
a class=Remove href=#RemoveRemover/a
input type=hidden name=Themes[1].Subject value=Mathematics/
input type=hidden name=Themes[1].LevelsCsv value=College/
input type=hidden name=Themes[1].Note value=Note 2/
/li
So basically in InitThemes I need to parse all this back to themes.
The values and text.
Maybe the inputs are easy but not the rest ... I think ...
Is there a better approach to accomplish this?
Thanks,
Miguel
On Feb 24, 9:39 pm,mkmanningmichaell...@gmail.com wrote:
The problem is t[1] is now an array of objects, so you have to access
the text and value attributes of the objects by their array index.
Here are the buildThemesList function and the friendlyLevels functions
rewritten to account for that.
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK
if you aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove
class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done
in another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val($.map(t[1],function(l,i){return l.value;}).join
()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
});
//just to keep things exactly as the original
example's UI
$('#Index').val(themes.length);
}
function friendlyLevels(levels) {
if (levels.length == 1){
return levels[0].text;
}
var friendly = ;
$.each(levels,function(i,l){
friendly += l.text +
((i==levels.length-2)?' e ':
(i==levels.length-1)?'':', ');
});
return friendly;
}
Couple of things to note: friendlyLevels now has {} enclosing the
first if statement. You'll see lots of coders not do that, but it's
really a good idea, and not just a style choice: javascript
[jQuery] Re: Order Items. Please help me. Thank You.
Hi,
I think I did that ...
I have this example working with Subjects and FriendlyLevels function
to add the e correctly:
http://www.27lamps.com/Beta/List/List4.html
Then I tried to do the same but for levels:
http://www.27lamps.com/Beta/List/List5.html
But I keep having errors.
What am I missing?
Sorry, but I am just starting with JQuery.
Thank You,
Miguel
On Feb 23, 9:23 pm, mkmanning michaell...@gmail.com wrote:
That's because you changed levels to an object, which you don't need
to. Just use the original var levels = $('input:checkbox:checked'),
and then
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$
(this).next().text()})
})
On Feb 23, 9:37 am, shapper mdmo...@gmail.com wrote:
Hello,
I tried to make the change:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
But I get an error on Firebug:
levels.each is not a function
Am I doing something wrong?
I also made a change on buildThemesList to use text and also to fix
the problem on your code that adds e only when there are 3 items. It
should be also applied when there are 2:
$.each(themes,function(i,t){
var li = $('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1].text)+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemover/a'
).appendTo(ol);
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am not completely sure that I am doing this right because I get the
error before.
Thank You,
Miguel
On Feb 20, 5:02 pm, mkmanning michaell...@gmail.com wrote:
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object, they both
return a jQuery object.
Accessing the levels object as this.value won't work either.
Try this:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
On Feb 20, 5:22 am, shapper mdmo...@gmail.com wrote:
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my
example:http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I do it?
Thank You,
Miguel
- The subject is working fine.
-
On Feb 20, 1:50 am, mkmanning michaell...@gmail.com wrote:
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved
this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels
associated
to which check box ...
I had something like that in my code:
[jQuery] Re: Order Items. Please help me. Thank You.
Hi Miguel, not sure if it will solve your problem, but I find it is
much faster to create a complete html string and then append it
instead of doing lots of appends, which are slow.
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done in
another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].join()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
is faster as
var html = 'li class=Themes + t[0].text + br / + friendlyLevels
(t[1]) + 'br /' + (t[2]==''?'':t[2]+'br /') + 'a href=#Remove
class=RemoveRemove/a +
'input type=hidden name=Themes[' + i + '].Subject value=' + t
[0].value + ' +
'input type=hidden name=Themes[' + i + '].LevelCsv value=' +
t[1].join() + ' +
'input type=hidden name=Themes[' + i + '].Note value=' + t
[2].value + ';
$(ol).append(html); // or $(html).appendTo(ol);
On Feb 24, 7:33 am, shapper mdmo...@gmail.com wrote:
Hi,
I think I did that ...
I have this example working with Subjects and FriendlyLevels function
to add the e correctly:http://www.27lamps.com/Beta/List/List4.html
Then I tried to do the same but for
levels:http://www.27lamps.com/Beta/List/List5.html
But I keep having errors.
What am I missing?
Sorry, but I am just starting with JQuery.
Thank You,
Miguel
On Feb 23, 9:23 pm, mkmanning michaell...@gmail.com wrote:
That's because you changed levels to an object, which you don't need
to. Just use the original var levels = $('input:checkbox:checked'),
and then
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$
(this).next().text()})
})
On Feb 23, 9:37 am, shapper mdmo...@gmail.com wrote:
Hello,
I tried to make the change:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
But I get an error on Firebug:
levels.each is not a function
Am I doing something wrong?
I also made a change on buildThemesList to use text and also to fix
the problem on your code that adds e only when there are 3 items. It
should be also applied when there are 2:
$.each(themes,function(i,t){
var li = $('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1].text)+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemover/a'
).appendTo(ol);
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am not completely sure that I am doing this right because I get the
error before.
Thank You,
Miguel
On Feb 20, 5:02 pm, mkmanning michaell...@gmail.com wrote:
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object, they both
return a jQuery object.
Accessing the levels object as this.value won't work either.
Try this:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
On Feb 20, 5:22 am, shapper mdmo...@gmail.com wrote:
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my
example:http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I
[jQuery] Re: Order Items. Please help me. Thank You.
Creating a complete html string won't solve the current problem; it is
faster, and usually the way I prefer doing it also (see my note
further below though), but as I indicated in a code comment, since
this appears to be based on user input, the list (hopefully) won't be
very big, so the speed gain probably isn't appreciable.
@Shapper - get Firebug and use Firefox for debugging, it will tell you
immediately that you have an error in your code: you define levelCsv =
[] but then use levelsCsv for the array.push()
Once you get it working you can try seasoups suggestion for a speed
improvement if you like (or simply for your own edification); it will
definitely benefit you in future if you work with larger lists or
blocks of html. An even more important performance gain can be had by
not doing string concatenation (I put a caveat about this in the code
comment's also), but build an array of your html and then join the
array; it's siginficantly faster. Check the forum and you'll see
examples of this.
On Feb 24, 8:23 am, seasoup seas...@gmail.com wrote:
Hi Miguel, not sure if it will solve your problem, but I find it is
much faster to create a complete html string and then append it
instead of doing lots of appends, which are slow.
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done in
another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].join()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
is faster as
var html = 'li class=Themes + t[0].text + br / + friendlyLevels
(t[1]) + 'br /' + (t[2]==''?'':t[2]+'br /') + 'a href=#Remove
class=RemoveRemove/a +
'input type=hidden name=Themes[' + i + '].Subject value=' + t
[0].value + ' +
'input type=hidden name=Themes[' + i + '].LevelCsv value=' +
t[1].join() + ' +
'input type=hidden name=Themes[' + i + '].Note value=' + t
[2].value + ';
$(ol).append(html); // or $(html).appendTo(ol);
On Feb 24, 7:33 am, shapper mdmo...@gmail.com wrote:
Hi,
I think I did that ...
I have this example working with Subjects and FriendlyLevels function
to add the e correctly:http://www.27lamps.com/Beta/List/List4.html
Then I tried to do the same but for
levels:http://www.27lamps.com/Beta/List/List5.html
But I keep having errors.
What am I missing?
Sorry, but I am just starting with JQuery.
Thank You,
Miguel
On Feb 23, 9:23 pm, mkmanning michaell...@gmail.com wrote:
That's because you changed levels to an object, which you don't need
to. Just use the original var levels = $('input:checkbox:checked'),
and then
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$
(this).next().text()})
})
On Feb 23, 9:37 am, shapper mdmo...@gmail.com wrote:
Hello,
I tried to make the change:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
But I get an error on Firebug:
levels.each is not a function
Am I doing something wrong?
I also made a change on buildThemesList to use text and also to fix
the problem on your code that adds e only when there are 3 items. It
should be also applied when there are 2:
$.each(themes,function(i,t){
var li = $('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1].text)+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemover/a'
).appendTo(ol);
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am not completely sure that I am doing this right because I get the
error before.
Thank You,
Miguel
On Feb 20, 5:02 pm, mkmanning michaell...@gmail.com wrote:
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object,
[jQuery] Re: Order Items. Please help me. Thank You.
@Michael,
I just installed Firebug and I almost made this working.
The only problem I have is when I am adding the levels to the list as
html and as hidden input:
+friendlyLevels(t[1].text.join(', '))+'br /'
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].value.join()).appendTo(li);
I get an error in Firebug:
t[1].text is undefined
[Break on this error] +friendlyLevels(t[1].text.join(', '))+'br /'
But as far as I know to get the text and value I use .text and .value.
My friendlyLevels function is
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am trying to display a join of the values in the hidden input and a
join of the texts in the html but using friendlyLevels or anything
similar to add the e at the end.
I removed your code just because it was adding the e only for 3
items and using a function makes the code less confusing.
I updated my code in: http://www.27lamps.com/Beta/List/List5.html
I plan to optimize my code but first I would like to make it work so I
can optimize it step by step.
@seasoup
I didn't forgot the problems you mentioned about using [] ... But what
would you suggest to replace []?
I can post the suggestion on ASP.NET MVC forums where I participate on
a daily basis.
I am using Microsoft ASP.NET MVC which gives me complete control of
the HTML but still allows me to use C# and SQL.
Microsoft ASP.NET MVC ships now with JQuery since there was a
partnership created between JQuery creators and Microsoft.
This is the reason why I am starting with JQuery but I am still
learning ... but until now it seams great.
Thanks,
Miguel
http://www.27lamps.com/Beta/List/List5.html
On Feb 24, 4:57 pm, mkmanning michaell...@gmail.com wrote:
Creating a complete html string won't solve the current problem; it is
faster, and usually the way I prefer doing it also (see my note
further below though), but as I indicated in a code comment, since
this appears to be based on user input, the list (hopefully) won't be
very big, so the speed gain probably isn't appreciable.
@Shapper - get Firebug and use Firefox for debugging, it will tell you
immediately that you have an error in your code: you define levelCsv =
[] but then use levelsCsv for the array.push()
Once you get it working you can try seasoups suggestion for a speed
improvement if you like (or simply for your own edification); it will
definitely benefit you in future if you work with larger lists or
blocks of html. An even more important performance gain can be had by
not doing string concatenation (I put a caveat about this in the code
comment's also), but build an array of your html and then join the
array; it's siginficantly faster. Check the forum and you'll see
examples of this.
On Feb 24, 8:23 am, seasoup seas...@gmail.com wrote:
Hi Miguel, not sure if it will solve your problem, but I find it is
much faster to create a complete html string and then append it
instead of doing lots of appends, which are slow.
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove
class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done
in another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].join()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
is faster as
var html = 'li class=Themes + t[0].text + br / + friendlyLevels
(t[1]) + 'br /' + (t[2]==''?'':t[2]+'br /') + 'a href=#Remove
class=RemoveRemove/a +
'input type=hidden name=Themes[' + i + '].Subject value=' + t
[0].value + ' +
'input type=hidden name=Themes[' + i + '].LevelCsv value=' +
t[1].join() + ' +
'input type=hidden name=Themes[' + i + '].Note value=' + t
[2].value + ';
$(ol).append(html); // or $(html).appendTo(ol);
On Feb 24, 7:33 am, shapper mdmo...@gmail.com wrote:
Hi,
I think I did that ...
I have this example working with Subjects and FriendlyLevels function
to add the e correctly:http://www.27lamps.com/Beta/List/List4.html
Then I tried to do the same but for
[jQuery] Re: Order Items. Please help me. Thank You.
The problem is t[1] is now an array of objects, so you have to access
the text and value attributes of the objects by their array index.
Here are the buildThemesList function and the friendlyLevels functions
rewritten to account for that.
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK if you
aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1])+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done in
another loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0].value).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val($.map(t[1],function(l,i){return l.value;}).join
()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Note'}).val(t[2]).appendTo(li);
});
//just to keep things exactly as the original example's
UI
$('#Index').val(themes.length);
}
function friendlyLevels(levels) {
if (levels.length == 1){
return levels[0].text;
}
var friendly = ;
$.each(levels,function(i,l){
friendly += l.text + ((i==levels.length-2)?' e
':
(i==levels.length-1)?'':', ');
});
return friendly;
}
Couple of things to note: friendlyLevels now has {} enclosing the
first if statement. You'll see lots of coders not do that, but it's
really a good idea, and not just a style choice: javascript suffers
from automatic semicolon insertion which although not a common problem
to run into, could make things difficult to debug. Even though there
are only three checkboxes, the each function with the ternary means
you don't have to refactor if you decide to add more checkboxes.
To get the values into the hidden input, $.map() is used. Check it out
in the documentation. Hope this helps.
On Feb 24, 11:20 am, shapper mdmo...@gmail.com wrote:
@Michael,
I just installed Firebug and I almost made this working.
The only problem I have is when I am adding the levels to the list as
html and as hidden input:
+friendlyLevels(t[1].text.join(', '))+'br /'
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].value.join()).appendTo(li);
I get an error in Firebug:
t[1].text is undefined
[Break on this error] +friendlyLevels(t[1].text.join(', '))+'br /'
But as far as I know to get the text and value I use .text and .value.
My friendlyLevels function is
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am trying to display a join of the values in the hidden input and a
join of the texts in the html but using friendlyLevels or anything
similar to add the e at the end.
I removed your code just because it was adding the e only for 3
items and using a function makes the code less confusing.
I updated my code in:http://www.27lamps.com/Beta/List/List5.html
I plan to optimize my code but first I would like to make it work so I
can optimize it step by step.
@seasoup
I didn't forgot the problems you mentioned about using [] ... But what
would you suggest to replace []?
I can post the suggestion on ASP.NET MVC forums where I participate on
a daily basis.
I am using Microsoft ASP.NET MVC which gives me complete control of
the HTML but still allows me to use C# and SQL.
Microsoft ASP.NET MVC ships now with JQuery since there was a
partnership created between JQuery creators and Microsoft.
This is the reason why I am starting with JQuery but I am still
learning ... but until now it seams great.
Thanks,
Miguel
http://www.27lamps.com/Beta/List/List5.html
On Feb 24, 4:57 pm, mkmanning michaell...@gmail.com wrote:
Creating a complete html string won't solve the current problem; it is
faster, and usually the way I prefer doing it also (see my note
further below though), but as I indicated in a code comment, since
this appears to be based
[jQuery] Re: Order Items. Please help me. Thank You.
Hello,
I tried to make the change:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
But I get an error on Firebug:
levels.each is not a function
Am I doing something wrong?
I also made a change on buildThemesList to use text and also to fix
the problem on your code that adds e only when there are 3 items. It
should be also applied when there are 2:
$.each(themes,function(i,t){
var li = $('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1].text)+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemover/a'
).appendTo(ol);
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am not completely sure that I am doing this right because I get the
error before.
Thank You,
Miguel
On Feb 20, 5:02 pm, mkmanning michaell...@gmail.com wrote:
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object, they both
return a jQuery object.
Accessing the levels object as this.value won't work either.
Try this:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
On Feb 20, 5:22 am, shapper mdmo...@gmail.com wrote:
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my
example:http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I do it?
Thank You,
Miguel
- The subject is working fine.
-
On Feb 20, 1:50 am, mkmanning michaell...@gmail.com wrote:
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't be able.
I added a new version of the List where the values and texts are
different in the Select.
And where each CheckBox has the associated label with the text in it.
http://www.27lamps.com/Beta/List/List3.html
Could you, please, help me out?
Thank You,
Miguel
On Feb 18, 5:33 pm, mkmanning michaell...@gmail.com wrote:
The problem is with the version of jQuery you're using. Update to
[jQuery] Re: Order Items. Please help me. Thank You.
P.S: I updated my example as usually:
http://www.27lamps.com/Beta/List/List3.html
On Feb 20, 5:02 pm, mkmanning michaell...@gmail.com wrote:
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object, they both
return a jQuery object.
Accessing the levels object as this.value won't work either.
Try this:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
On Feb 20, 5:22 am, shapper mdmo...@gmail.com wrote:
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my
example:http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I do it?
Thank You,
Miguel
- The subject is working fine.
-
On Feb 20, 1:50 am, mkmanning michaell...@gmail.com wrote:
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't be able.
I added a new version of the List where the values and texts are
different in the Select.
And where each CheckBox has the associated label with the text in it.
http://www.27lamps.com/Beta/List/List3.html
Could you, please, help me out?
Thank You,
Miguel
On Feb 18, 5:33 pm, mkmanning michaell...@gmail.com wrote:
The problem is with the version of jQuery you're using. Update to 1.3
(and don't include a space in the URI).
Try your code with the Google js api and it will work (I just did,
even with the duplicate jQuery wrapper functions).
On Feb 18, 9:28 am, shapper mdmo...@gmail.com wrote:
Yes,
I tried that to but the problem persists. I updated the new
version:http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to
[jQuery] Re: Order Items. Please help me. Thank You.
That's because you changed levels to an object, which you don't need
to. Just use the original var levels = $('input:checkbox:checked'),
and then
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$
(this).next().text()})
})
On Feb 23, 9:37 am, shapper mdmo...@gmail.com wrote:
Hello,
I tried to make the change:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
But I get an error on Firebug:
levels.each is not a function
Am I doing something wrong?
I also made a change on buildThemesList to use text and also to fix
the problem on your code that adds e only when there are 3 items. It
should be also applied when there are 2:
$.each(themes,function(i,t){
var li = $('li').addClass('Themes').html(t[0].text+'br /'
+friendlyLevels(t[1].text)+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemover/a'
).appendTo(ol);
function friendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
}
I am not completely sure that I am doing this right because I get the
error before.
Thank You,
Miguel
On Feb 20, 5:02 pm, mkmanning michaell...@gmail.com wrote:
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object, they both
return a jQuery object.
Accessing the levels object as this.value won't work either.
Try this:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
On Feb 20, 5:22 am, shapper mdmo...@gmail.com wrote:
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my
example:http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I do it?
Thank You,
Miguel
- The subject is working fine.
-
On Feb 20, 1:50 am, mkmanning michaell...@gmail.com wrote:
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't
[jQuery] Re: Order Items. Please help me. Thank You.
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my example:
http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:
http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I do it?
Thank You,
Miguel
- The subject is working fine.
-
On Feb 20, 1:50 am, mkmanning michaell...@gmail.com wrote:
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't be able.
I added a new version of the List where the values and texts are
different in the Select.
And where each CheckBox has the associated label with the text in it.
http://www.27lamps.com/Beta/List/List3.html
Could you, please, help me out?
Thank You,
Miguel
On Feb 18, 5:33 pm, mkmanning michaell...@gmail.com wrote:
The problem is with the version of jQuery you're using. Update to 1.3
(and don't include a space in the URI).
Try your code with the Google js api and it will work (I just did,
even with the duplicate jQuery wrapper functions).
On Feb 18, 9:28 am, shapper mdmo...@gmail.com wrote:
Yes,
I tried that to but the problem persists. I updated the new
version:http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head
of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm,
[jQuery] Re: Order Items. Please help me. Thank You.
levels.text = $('input[name=Levels]:checked + label');
levels.value = $('input[name=Levels]:checked');
Those don't get you the right values for the levels object, they both
return a jQuery object.
Accessing the levels object as this.value won't work either.
Try this:
levels.each(function(){
levelsCsv.push({'text':this.value,'value':$(this).next().text()})
})
On Feb 20, 5:22 am, shapper mdmo...@gmail.com wrote:
Hi,
I followed your tips but I still have a few problems.
The subject is working fine but when I do the same to the levels it
does not work.
I think the problem, but I am not sure, is in:
levels.each(function(){
levelCsv.push(this.value);//array to hold the levels
});
I changed everything else. I updated my
example:http://www.27lamps.com/Beta/List/List3.html
Other problem I notice is that when two levels are added the word e
is not added between the both.
Only when 3 levels are added. On my first example I had a function
that was doing it:http://www.27lamps.com/Beta/List/List.html
I just don't know how to integrate this on your code.
I don't need to use my FriendlyLevels example. I just need to have the
e every time there is more then 1 level.
How can I do it?
Thank You,
Miguel
- The subject is working fine.
-
On Feb 20, 1:50 am, mkmanning michaell...@gmail.com wrote:
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't be able.
I added a new version of the List where the values and texts are
different in the Select.
And where each CheckBox has the associated label with the text in it.
http://www.27lamps.com/Beta/List/List3.html
Could you, please, help me out?
Thank You,
Miguel
On Feb 18, 5:33 pm, mkmanning michaell...@gmail.com wrote:
The problem is with the version of jQuery you're using. Update to 1.3
(and don't include a space in the URI).
Try your code with the Google js api and it will work (I just did,
even with the duplicate jQuery wrapper functions).
On Feb 18, 9:28 am, shapper mdmo...@gmail.com wrote:
Yes,
I tried that to but the problem persists. I updated the new
version:http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a
new
example showing the problem I have:
[jQuery] Re: Order Items. Please help me. Thank You.
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't be able.
I added a new version of the List where the values and texts are
different in the Select.
And where each CheckBox has the associated label with the text in it.
http://www.27lamps.com/Beta/List/List3.html
Could you, please, help me out?
Thank You,
Miguel
On Feb 18, 5:33 pm, mkmanning michaell...@gmail.com wrote:
The problem is with the version of jQuery you're using. Update to 1.3
(and don't include a space in the URI).
Try your code with the Google js api and it will work (I just did,
even with the duplicate jQuery wrapper functions).
On Feb 18, 9:28 am, shapper mdmo...@gmail.com wrote:
Yes,
I tried that to but the problem persists. I updated the new
version:http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm, mkmanning michaell...@gmail.com wrote:
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
[jQuery] Re: Order Items. Please help me. Thank You.
You could modify the subject variable being put into the array to make
it an object: subject = {}
then add the option's value and text to it:
subject.value = $('#Subject option:selected').val();
subject.text = $('#Subject option:selected').text();
or in one line to replace what's there now:
subject = {'text':$('#Subject option:selected').text(),'value':$
('#Subject option:selected').val()}
then put it in the array the same way: temptheme.push(subject)
To access it later when rebuilding just get the attributes of the
object:
var li = $('li').addClass('Themes').html(t[0].text+'br /' etc...
for the display
$('input').attr({'type':'hidden','name':'Themes['+i+'].Subject'}).val
(t[0].value).appendTo(li); etc for the value
Use the same object structure for storing the checkbox names/values
On Feb 19, 4:36 pm, shapper mdmo...@gmail.com wrote:
Hi Michaell,
Sorry for the delay but when I started using JQuery 1.3 I solved this
problem but I got a few others on my application.
Anyway, there is just something else that I am not able to solve.
When I add a theme I need to:
1. For the Select (Subject), add the selected value to hidden input
but the text to the visible text.
2. For the CheckBoxes (Levels) add LevelsCsv (formed with values) to
the hidden inputs.
But the visible text should use the text in the labels associated
to which check box ...
I had something like that in my code:
1. For the subject I add something like:
$subject = $('#Subject option:selected');
$theme.append($subject.text()).append('br /');
And on the hidden input I was using $subject.val()
2. For the levels I was using:
$levelsTexts = $('input[name=Levels]:checked + label');
$levelsValues = $('input[name=Levels]:checked');
So the text goes into the visible part of the theme and the value goes
to the hidden inputs. See?
I have been trying to add this to your code but I haven't be able.
I added a new version of the List where the values and texts are
different in the Select.
And where each CheckBox has the associated label with the text in it.
http://www.27lamps.com/Beta/List/List3.html
Could you, please, help me out?
Thank You,
Miguel
On Feb 18, 5:33 pm, mkmanning michaell...@gmail.com wrote:
The problem is with the version of jQuery you're using. Update to 1.3
(and don't include a space in the URI).
Try your code with the Google js api and it will work (I just did,
even with the duplicate jQuery wrapper functions).
On Feb 18, 9:28 am, shapper mdmo...@gmail.com wrote:
Yes,
I tried that to but the problem persists. I updated the new
version:http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm, mkmanning michaell...@gmail.com wrote:
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You
can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following
[jQuery] Re: Order Items. Please help me. Thank You.
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
buildThemesList()Create (line 453)
(?)()()Create (line 450)
handle()()JQuery-1.2.6.js (line 2093)
(?)()()JQuery-1.2.6.js (line 1875)
[Break on this error] jQuery.cache[ id ][ name ] :
Any idea why?
And a few questions:
1. Shouldn't I place the code inside Document.Ready?
I followed your example and didn't place it inside it but I don't
understand why ...
2. Why do you place the script after the body?
I am placing the script inside a js file and then I include it in
the head of the document.
Thanks,
Miguel
On Feb 18, 7:13 am, mkmanning michaell...@gmail.com wrote:
Here's a wholly different approach for consideration. Rather than try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability standpoint).
Below is a refactored example, and you can see it live
here:http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup fromhttp://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep track, we
can use its indexing to rebuild the themes list, and it can be
serialized if we want to post the data
ol = $('#Themes').bind('click',function(e){//event delegation for
removing themes, livequery's fine, but this works too
e = $(e.target);
if(e.is('a')){
var li_index =
$(this).children('li').index(e.parents('li'));
themes =$.grep(themes, function(n,i){
return (i != li_index);
});
buildThemesList();
}
return false;
});
//Add theme
$('#AddTheme').click(function(){
var levels = $('input:checkbox:checked'), subject =
$('#Subject').val
(), temptheme = [];
//validate before we go any further to avoid unnecessary
operations
if(levels.length==0 || subject == ''){
return false;
}
//process subject
temptheme.push(subject);
//process levels
var levelCsv = []; //array to hold the levels
levels.each(function(){
levelCsv.push(this.value);
});
temptheme.push(levelCsv);
//process note
temptheme.push($('#Note').val());
//finally, add to the themes array
themes.push(temptheme);
//generate markup by rebuilding,
buildThemesList();
});
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK if you aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li = $('li').addClass('Themes').html(t[0]+'br
/'
+(t[1].length2?t[1].join(',
').replace(/(,\s)(\w+)$/,' e $2'):t
[1].join(', '))+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done in another
loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0]).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].join()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i+'].Note'}).val
(t[2]).appendTo(li);
});
//just to keep things exactly as the original example's
[jQuery] Re: Order Items. Please help me. Thank You.
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
buildThemesList()Create (line 453)
(?)()()Create (line 450)
handle()()JQuery-1.2.6.js (line 2093)
(?)()()JQuery-1.2.6.js (line 1875)
[Break on this error] jQuery.cache[ id ][ name ] :
Any idea why?
And a few questions:
1. Shouldn't I place the code inside Document.Ready?
I followed your example and didn't place it inside it but I don't
understand why ...
2. Why do you place the script after the body?
I am placing the script inside a js file and then I include it in
the head of the document.
Thanks,
Miguel
On Feb 18, 7:13 am, mkmanning michaell...@gmail.com wrote:
Here's a wholly different approach for consideration. Rather than try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability standpoint).
Below is a refactored example, and you can see it live
here:http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup fromhttp://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep track, we
can use its indexing to rebuild the themes list, and it can be
serialized if we want to post the data
ol = $('#Themes').bind('click',function(e){//event delegation for
removing themes, livequery's fine, but this works too
e = $(e.target);
if(e.is('a')){
var li_index =
$(this).children('li').index(e.parents('li'));
themes =$.grep(themes, function(n,i){
return (i != li_index);
});
buildThemesList();
}
return false;
});
//Add theme
$('#AddTheme').click(function(){
var levels = $('input:checkbox:checked'), subject =
$('#Subject').val
(), temptheme = [];
//validate before we go any further to avoid unnecessary
operations
if(levels.length==0 || subject == ''){
return false;
}
//process subject
temptheme.push(subject);
//process levels
var levelCsv = []; //array to hold the levels
levels.each(function(){
levelCsv.push(this.value);
});
temptheme.push(levelCsv);
//process note
temptheme.push($('#Note').val());
//finally, add to the themes array
themes.push(temptheme);
//generate markup by rebuilding,
buildThemesList();
});
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK if you
aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li =
$('li').addClass('Themes').html(t[0]+'br /'
[jQuery] Re: Order Items. Please help me. Thank You.
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm, mkmanning michaell...@gmail.com wrote:
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
buildThemesList()Create (line 453)
(?)()()Create (line 450)
handle()()JQuery-1.2.6.js (line 2093)
(?)()()JQuery-1.2.6.js (line 1875)
[Break on this error] jQuery.cache[ id ][ name ] :
Any idea why?
And a few questions:
1. Shouldn't I place the code inside Document.Ready?
I followed your example and didn't place it inside it but I don't
understand why ...
2. Why do you place the script after the body?
I am placing the script inside a js file and then I include it in
the head of the document.
Thanks,
Miguel
On Feb 18, 7:13 am, mkmanning michaell...@gmail.com wrote:
Here's a wholly different approach for consideration. Rather than try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability standpoint).
Below is a refactored example, and you can see it live
here:http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup fromhttp://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep track,
we
can use its indexing to rebuild the themes list, and it can be
serialized if we want to post the data
ol = $('#Themes').bind('click',function(e){//event delegation for
removing themes, livequery's fine, but this works too
e = $(e.target);
if(e.is('a')){
var li_index =
$(this).children('li').index(e.parents('li'));
themes =$.grep(themes, function(n,i){
return (i != li_index);
});
buildThemesList();
}
return false;
});
//Add theme
$('#AddTheme').click(function(){
var levels = $('input:checkbox:checked'), subject =
$('#Subject').val
(), temptheme = [];
//validate before we go any further to avoid unnecessary
operations
if(levels.length==0 || subject == ''){
return false;
}
//process subject
temptheme.push(subject);
//process levels
var levelCsv = []; //array to hold the levels
[jQuery] Re: Order Items. Please help me. Thank You.
Yes,
I tried that to but the problem persists. I updated the new version:
http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm, mkmanning michaell...@gmail.com wrote:
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
buildThemesList()Create (line 453)
(?)()()Create (line 450)
handle()()JQuery-1.2.6.js (line 2093)
(?)()()JQuery-1.2.6.js (line 1875)
[Break on this error] jQuery.cache[ id ][ name ] :
Any idea why?
And a few questions:
1. Shouldn't I place the code inside Document.Ready?
I followed your example and didn't place it inside it but I don't
understand why ...
2. Why do you place the script after the body?
I am placing the script inside a js file and then I include it in
the head of the document.
Thanks,
Miguel
On Feb 18, 7:13 am, mkmanning michaell...@gmail.com wrote:
Here's a wholly different approach for consideration. Rather than try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability standpoint).
Below is a refactored example, and you can see it live
here:http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup
fromhttp://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep
track, we
can use its indexing to rebuild the themes list, and it can be
serialized if we want to post the data
ol = $('#Themes').bind('click',function(e){//event delegation
for
removing themes, livequery's fine, but this works too
e = $(e.target);
if(e.is('a')){
var li_index =
$(this).children('li').index(e.parents('li'));
themes =$.grep(themes,
[jQuery] Re: Order Items. Please help me. Thank You.
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm, mkmanning michaell...@gmail.com wrote:
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
buildThemesList()Create (line 453)
(?)()()Create (line 450)
handle()()JQuery-1.2.6.js (line 2093)
(?)()()JQuery-1.2.6.js (line 1875)
[Break on this error] jQuery.cache[ id ][ name ] :
Any idea why?
And a few questions:
1. Shouldn't I place the code inside Document.Ready?
I followed your example and didn't place it inside it but I don't
understand why ...
2. Why do you place the script after the body?
I am placing the script inside a js file and then I include it in
the head of the document.
Thanks,
Miguel
On Feb 18, 7:13 am, mkmanning michaell...@gmail.com wrote:
Here's a wholly different approach for consideration. Rather than try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability standpoint).
Below is a refactored example, and you can see it live
here:http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup fromhttp://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep
track, we
can use its indexing to rebuild the themes list, and it can be
serialized if we want to post the data
ol = $('#Themes').bind('click',function(e){//event delegation
for
removing themes, livequery's fine, but this works too
e = $(e.target);
if(e.is('a')){
var li_index =
$(this).children('li').index(e.parents('li'));
themes =$.grep(themes, function(n,i){
return (i != li_index);
});
buildThemesList();
}
return false;
});
//Add theme
$('#AddTheme').click(function(){
var levels = $('input:checkbox:checked'), subject =
$('#Subject').val
(), temptheme = [];
//validate before we go any further to avoid
unnecessary operations
if(levels.length==0 || subject == ''){
[jQuery] Re: Order Items. Please help me. Thank You.
The problem is with the version of jQuery you're using. Update to 1.3
(and don't include a space in the URI).
Try your code with the Google js api and it will work (I just did,
even with the duplicate jQuery wrapper functions).
On Feb 18, 9:28 am, shapper mdmo...@gmail.com wrote:
Yes,
I tried that to but the problem persists. I updated the new
version:http://www.27lamps.com/Beta/List/List2.html
I am able to add 1 theme to the list ...
Then all the other themes I add are not added to the list ...
But I think they are being added to the themes array.
The index also does not change ...
... But the index input is on the Html code.
I just can't find the problem.
Thanks,
Miguel
On Feb 18, 5:21 pm, mkmanning michaell...@gmail.com wrote:
if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapper
On Feb 18, 9:13 am, shapper mdmo...@gmail.com wrote:
Hi,
I would like to include the script on the head of the document and
using an external JS file.
So I inserted it inside the Document.Ready function. I upload a new
example showing the problem I have:
http://www.27lamps.com/Beta/List/List2.html
In this example I didn't use the external JS file.
However I placed the code inside the Document.Ready and on the head of
the document.
When I use the external JS file I copy it just like that to the file
and add the include.
Anyway, try to add a theme. The first is added but the second not.
Or better, I think it is added to the list but not to the page ...
Could you tell me what am I doing wrong?
Thanks,
Miguel
On Feb 18, 4:49 pm, mkmanning michaell...@gmail.com wrote:
Scripts block other assets from downloading, so the most appropriate
place for them (most of the time), is at the close of the body. This
allows your page to render, and then allows you to add behavior as
progressive enhancement. It's generally good practice; Google
progressive enhancement/graceful degradation for more on this. You can
still include your script, just include it at the close of the body.
Wrap it in a domready function if you like, I usually do that; one
consequence of including your scripts at the end of the page is the
DOM has been rendered already--which is why mine works :).
If you want to keep the script external AND in the head, then you'll
have to wrap the code in a domready function.
On Feb 18, 8:25 am, shapper mdmo...@gmail.com wrote:
Hi,
I was trying to integrate your code on my web application and the
following happens:
I am able to add a theme. But when I try to add a second theme I get
the following error:
[Exception... 'type property can't be changed' when calling method:
[nsIDOMEventListener::handleEvent] nsresult: 0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING) location: unknown data: no]
data()()JQuery-1.2.6.js (line 696)
remove()()JQuery-1.2.6.js (line 1929)
(?)()()JQuery-1.2.6.js (line 1330)
each()()JQuery-1.2.6.js (line 762)
each()()JQuery-1.2.6.js (line 155)
remove()()JQuery-1.2.6.js (line 1329)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
empty()()JQuery-1.2.6.js (line 1340)
each()()JQuery-1.2.6.js (line 751)
each()()JQuery-1.2.6.js (line 155)
(?)()()JQuery-1.2.6.js (line 1348)
(?)()()JQuery.L...-1.0.3.js (line 178)
buildThemesList()Create (line 453)
(?)()()Create (line 450)
handle()()JQuery-1.2.6.js (line 2093)
(?)()()JQuery-1.2.6.js (line 1875)
[Break on this error] jQuery.cache[ id ][ name ] :
Any idea why?
And a few questions:
1. Shouldn't I place the code inside Document.Ready?
I followed your example and didn't place it inside it but I don't
understand why ...
2. Why do you place the script after the body?
I am placing the script inside a js file and then I include it in
the head of the document.
Thanks,
Miguel
On Feb 18, 7:13 am, mkmanning michaell...@gmail.com wrote:
Here's a wholly different approach for consideration. Rather than
try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances
are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability
standpoint).
Below is a refactored example, and you can see it live
here:http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup
fromhttp://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep
track, we
can use its indexing to rebuild the themes list, and it can be
[jQuery] Re: Order Items. Please help me. Thank You.
I have been trying to make this work but no success ...
... in fact the inputs get undefined.
I am not sure if I am using your function on the right way.
The function should be called, I think, after adding or removing an
item to reorder the ids.
Anyway, I created an example:
http://www.27lamps.com/Beta/List/List.html
Please, not that you have to select a subject and at least one level
to add it to the list.
Could someone, please, help me out with this?
Basically, every time I add or remove an item I need to reorder the
names of the input fields.
Please check my original message on this post. It explains the
situation.
Thanks,
Miguel
On Feb 12, 4:36 am, Ricardo Tomasi ricardob...@gmail.com wrote:
Probably not the most efficient function, but should work:
$('#ThemesList li').each(function(index){
$('input:hidden', this).each(function(){
var fixName = $(this).attr('name').replace(/\[\d\]/, '['+index
+']');
$(this).attr('name', fixName);
});
});
- ricardo
On Feb 11, 7:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden name=Themes[5].Description value=Book /
/li
/ol
Every time I add or remove a Theme I need to be sure that the list is
ordered (name) starting with Themes[0].
So basically I need to loop through each list item in list ThemesList.
- In first list item all HIDDEN inputs names should start with Themes
[0]
- In second list item all HIDDEN inputs names should start with Themes
[1]
...
So in this example, Themes[2]. ... would become Themes[1]. ... and
Themes[5]. ... would become Themes[2]. ...
Could someone please help me out?
I have no idea how to do this.
Thanks,
Miguel
[jQuery] Re: Order Items. Please help me. Thank You.
I added an input which shows the number of items in the list ...
The problem is that I am not able to reorder the list so it is 0
based ...
Any idea?
Thanks,
Miguel
On Feb 18, 1:48 am, shapper mdmo...@gmail.com wrote:
I have been trying to make this work but no success ...
... in fact the inputs get undefined.
I am not sure if I am using your function on the right way.
The function should be called, I think, after adding or removing an
item to reorder the ids.
Anyway, I created an example:http://www.27lamps.com/Beta/List/List.html
Please, not that you have to select a subject and at least one level
to add it to the list.
Could someone, please, help me out with this?
Basically, every time I add or remove an item I need to reorder the
names of the input fields.
Please check my original message on this post. It explains the
situation.
Thanks,
Miguel
On Feb 12, 4:36 am, Ricardo Tomasi ricardob...@gmail.com wrote:
Probably not the most efficient function, but should work:
$('#ThemesList li').each(function(index){
$('input:hidden', this).each(function(){
var fixName = $(this).attr('name').replace(/\[\d\]/, '['+index
+']');
$(this).attr('name', fixName);
});
});
- ricardo
On Feb 11, 7:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden name=Themes[5].Description value=Book /
/li
/ol
Every time I add or remove a Theme I need to be sure that the list is
ordered (name) starting with Themes[0].
So basically I need to loop through each list item in list ThemesList.
- In first list item all HIDDEN inputs names should start with Themes
[0]
- In second list item all HIDDEN inputs names should start with Themes
[1]
...
So in this example, Themes[2]. ... would become Themes[1]. ... and
Themes[5]. ... would become Themes[2]. ...
Could someone please help me out?
I have no idea how to do this.
Thanks,
Miguel
[jQuery] Re: Order Items. Please help me. Thank You.
That's because you have that empty li style=display:none/li. Is
it really necessary?
just decrement the index to start at 0:
$('#Themes li').each(function(index){
index--;
$('input:hidden', this).each(function(){
var fixName = $(this).attr('name').replace(/\[\d\]/, '['+index
+']');
$(this).attr('name', fixName);
});
});
cheers,
- ricardo
On Feb 17, 10:56 pm, shapper mdmo...@gmail.com wrote:
I added an input which shows the number of items in the list ...
The problem is that I am not able to reorder the list so it is 0
based ...
Any idea?
Thanks,
Miguel
On Feb 18, 1:48 am, shapper mdmo...@gmail.com wrote:
I have been trying to make this work but no success ...
... in fact the inputs get undefined.
I am not sure if I am using your function on the right way.
The function should be called, I think, after adding or removing an
item to reorder the ids.
Anyway, I created an example:http://www.27lamps.com/Beta/List/List.html
Please, not that you have to select a subject and at least one level
to add it to the list.
Could someone, please, help me out with this?
Basically, every time I add or remove an item I need to reorder the
names of the input fields.
Please check my original message on this post. It explains the
situation.
Thanks,
Miguel
On Feb 12, 4:36 am, Ricardo Tomasi ricardob...@gmail.com wrote:
Probably not the most efficient function, but should work:
$('#ThemesList li').each(function(index){
$('input:hidden', this).each(function(){
var fixName = $(this).attr('name').replace(/\[\d\]/, '['+index
+']');
$(this).attr('name', fixName);
});
});
- ricardo
On Feb 11, 7:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden name=Themes[5].Description value=Book /
/li
/ol
Every time I add or remove a Theme I need to be sure that the list is
ordered (name) starting with Themes[0].
So basically I need to loop through each list item in list ThemesList.
- In first list item all HIDDEN inputs names should start with Themes
[0]
- In second list item all HIDDEN inputs names should start with Themes
[1]
...
So in this example, Themes[2]. ... would become Themes[1]. ... and
Themes[5]. ... would become Themes[2]. ...
Could someone please help me out?
I have no idea how to do this.
Thanks,
Miguel
[jQuery] Re: Order Items. Please help me. Thank You.
Here's a wholly different approach for consideration. Rather than try
and keep track of LI elements and regex their names with the current
index, just use an array placeholder and rebuild the list. Chances are
if the user is required to add items, the list isn't going to get
unmanageably huge (at least I'd hope not from a usability standpoint).
Below is a refactored example, and you can see it live here:
http://actingthemaggot.com/test/add_theme.html
Refactored (uses markup from http://www.27lamps.com/Beta/List/List.html):
(function($) {
var themes = [], //this will be an array of arrays to keep track, we
can use its indexing to rebuild the themes list, and it can be
serialized if we want to post the data
ol = $('#Themes').bind('click',function(e){//event delegation for
removing themes, livequery's fine, but this works too
e = $(e.target);
if(e.is('a')){
var li_index =
$(this).children('li').index(e.parents('li'));
themes =$.grep(themes, function(n,i){
return (i != li_index);
});
buildThemesList();
}
return false;
});
//Add theme
$('#AddTheme').click(function(){
var levels = $('input:checkbox:checked'), subject =
$('#Subject').val
(), temptheme = [];
//validate before we go any further to avoid unnecessary
operations
if(levels.length==0 || subject == ''){
return false;
}
//process subject
temptheme.push(subject);
//process levels
var levelCsv = []; //array to hold the levels
levels.each(function(){
levelCsv.push(this.value);
});
temptheme.push(levelCsv);
//process note
temptheme.push($('#Note').val());
//finally, add to the themes array
themes.push(temptheme);
//generate markup by rebuilding,
buildThemesList();
});
function buildThemesList(){
ol.empty();
//more string concatenation than I like, but OK if you aren't
building a huge list
$.each(themes,function(i,t){
//this handles the li content
var li = $('li').addClass('Themes').html(t[0]+'br /'
+(t[1].length2?t[1].join(', ').replace(/(,\s)(\w+)$/,'
e $2'):t
[1].join(', '))+'br /'
+(t[2]==''?'':t[2]+'br /')
+'a href=#Remove class=RemoveRemove/a'
).appendTo(ol);
//now the inputs, this could also be done in another
loop with an
array of names, if it gets longer; and the brackets in the name are
still a bad idea
$('input').attr({'type':'hidden','name':'Themes['+i
+'].Subject'}).val(t[0]).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i
+'].LevelCsv'}).val(t[1].join()).appendTo(li);
$('input').attr({'type':'hidden','name':'Themes['+i+'].Note'}).val
(t[2]).appendTo(li);
});
//just to keep things exactly as the original example's UI
$('#Index').val(themes.length);
}
})(jQuery);
Also, syntax like var valid = new Boolean(true); can just be var
valid = true;
Hope this gives you some ideas; I'll leave it to you to optimize (or
ignore) it :)
On Feb 17, 10:03 pm, Ricardo Tomasi ricardob...@gmail.com wrote:
That's because you have that empty li style=display:none/li. Is
it really necessary?
just decrement the index to start at 0:
$('#Themes li').each(function(index){
index--;
$('input:hidden', this).each(function(){
var fixName = $(this).attr('name').replace(/\[\d\]/, '['+index
+']');
$(this).attr('name', fixName);
});
});
cheers,
- ricardo
On Feb 17, 10:56 pm, shapper mdmo...@gmail.com wrote:
I added an input which shows the number of items in the list ...
The problem is that I am not able to reorder the list so it is 0
based ...
Any idea?
Thanks,
Miguel
On Feb 18, 1:48 am, shapper mdmo...@gmail.com wrote:
I have been trying to make this work but no success ...
... in fact the inputs get undefined.
I am not sure if I am using your function on the right way.
The function should be called, I think, after adding or removing an
item to reorder the ids.
Anyway, I created an example:http://www.27lamps.com/Beta/List/List.html
Please, not that you have to select a subject and at least one level
to add it to the list.
Could someone, please, help me out with this?
Basically, every time I add or remove an item I need to reorder the
names of the input fields.
[jQuery] Re: Order Items. Please help me. Thank You.
You could remove the entire list everytime and regenerate it from
javascript. Is Themes[0].Subject the actual name, or are you trying
to refer to a javascript object in an array with the attribute
'Subject' which contains the name you are looking for? If it is the
latter, this won't work. you'll need to create the html in javascript
and append it into the page.
$('liinput type=hidden name=' + Themes[0].Subject + '
value=A/li').appendTo($('#ThemesList'));
I'm actually not sure if jQuery handles appending a list item to a
list properly. Probaby does.
On Feb 11, 1:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden name=Themes[5].Description value=Book /
/li
/ol
Every time I add or remove a Theme I need to be sure that the list is
ordered (name) starting with Themes[0].
So basically I need to loop through each list item in list ThemesList.
- In first list item all HIDDEN inputs names should start with Themes
[0]
- In second list item all HIDDEN inputs names should start with Themes
[1]
...
So in this example, Themes[2]. ... would become Themes[1]. ... and
Themes[5]. ... would become Themes[2]. ...
Could someone please help me out?
I have no idea how to do this.
Thanks,
Miguel
[jQuery] Re: Order Items. Please help me. Thank You.
Themes[0].Subject is the actual name ... It is so to be read by an MVS
framework into a List.
Basically when the page loads some items are already there rendered on
the server.
They are always with the correct order.
However, when I add / remove items to that list the order might
change ...
So I should add and remove all items? How can I do this? And why?
I am posting my entire code:
// Cancel button
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Remove theme
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Add theme
$('#AddTheme').bind('click', function(){
// Define index
$index = $('#Index');
// Set valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Validate
if (!$subject.val()) { valid = false; }
if (!levels.length) { valid = false; }
// Validate
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#ThemesOnTutor');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append(FriendlyLevels(levels) + 'br /');
if ($description.val()) {$theme.append($description.val
()).append('br /');}
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes.Index
value = ' + $index.val() + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].Subject value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].LevelsCsv value = ' + levelsTypes.join(,) + ' /
');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].Description value = ' + $description.val() + ' /
');
// Increment index
$index.val(+$index.val() + 1);
}
});
// FriendlyLevels
function FriendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
} // FriendlyLevels
On Feb 11, 9:47 pm, seasoup seas...@gmail.com wrote:
You could remove the entire list everytime and regenerate it from
javascript. Is Themes[0].Subject the actual name, or are you trying
to refer to a javascript object in an array with the attribute
'Subject' which contains the name you are looking for? If it is the
latter, this won't work. you'll need to create the html in javascript
and append it into the page.
$('liinput type=hidden name=' + Themes[0].Subject + '
value=A/li').appendTo($('#ThemesList'));
I'm actually not sure if jQuery handles appending a list item to a
list properly. Probaby does.
On Feb 11, 1:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden name=Themes[5].Description value=Book /
/li
/ol
Every time I add or remove a Theme I need to be sure that the list is
ordered (name) starting with Themes[0].
So basically I need to loop through each list item in list ThemesList.
- In first list item all HIDDEN inputs names should start with Themes
[0]
- In second list item all HIDDEN inputs names should start with Themes
[1]
...
So in this example, Themes[2]. ... would become Themes[1]. ... and
Themes[5]. ... would become Themes[2]. ...
Could someone please help me out?
I have no idea how to do this.
Thanks,
Miguel
[jQuery] Re: Order Items. Please help me. Thank You.
At the risk of repeating myself from other posts, You might save
yourself future problems if you use standards-based id/name attributes
(and if the framework you're using doesn't allow that, seriously
consider a different framework):
HTML 4 spec section 6.2 says, ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed by any number of letters,
digits
([0-9]), hyphens (-), underscores (_), colons (:), and periods
(.).
XHTML spec section C.8 says, Note that the collection of legal
values
in XML 1.0 Section 2.3, production 5 is much larger than that
permitted to be used in the ID and NAME types defined in HTML 4. When
defining fragment identifiers to be backward-compatible, only strings
matching the pattern [A-Za-z][A-Za-z0-9:_.-]* should be used. See
Section 6.2 of [HTML4] for more information.
On Feb 11, 2:09 pm, shapper mdmo...@gmail.com wrote:
Themes[0].Subject is the actual name ... It is so to be read by an MVS
framework into a List.
Basically when the page loads some items are already there rendered on
the server.
They are always with the correct order.
However, when I add / remove items to that list the order might
change ...
So I should add and remove all items? How can I do this? And why?
I am posting my entire code:
// Cancel button
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Remove theme
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Add theme
$('#AddTheme').bind('click', function(){
// Define index
$index = $('#Index');
// Set valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Validate
if (!$subject.val()) { valid = false; }
if (!levels.length) { valid = false; }
// Validate
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#ThemesOnTutor');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append(FriendlyLevels(levels) + 'br /');
if ($description.val()) {$theme.append($description.val
()).append('br /');}
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes.Index
value = ' + $index.val() + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].Subject value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].Description value = ' + $description.val() + ' /
');
// Increment index
$index.val(+$index.val() + 1);
}
});
// FriendlyLevels
function FriendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
} // FriendlyLevels
On Feb 11, 9:47 pm, seasoup seas...@gmail.com wrote:
You could remove the entire list everytime and regenerate it from
javascript. Is Themes[0].Subject the actual name, or are you trying
to refer to a javascript object in an array with the attribute
'Subject' which contains the name you are looking for? If it is the
latter, this won't work. you'll need to create the html in javascript
and append it into the page.
$('liinput type=hidden name=' + Themes[0].Subject + '
value=A/li').appendTo($('#ThemesList'));
I'm actually not sure if jQuery handles appending a list item to a
list properly. Probaby does.
On Feb 11, 1:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden
[jQuery] Re: Order Items. Please help me. Thank You.
Yes. The W3C validator has...issues.It's been broken and out of step
with specs many times; it's a valid tool but don't take it's word as
gospel. User-agents are written to follow the specs (occasionally), or
their authors ideas of what should be done, but they aren't written to
follow what the validator says. Following spec means you stand a
better chance of forwards-compatibility as more user-agents begin to
recognize standards.
Using symbols like [] in a name/id that also have direct meaning in
JavaScript is really tempting fate. Just my opinion though.
On Feb 11, 2:42 pm, shapper mdmo...@gmail.com wrote:
Are you talking about using Themes[0] in name?
The page was validated by W3C validator ...
Do you mean something else?
On Feb 11, 10:16 pm, mkmanning michaell...@gmail.com wrote:
At the risk of repeating myself from other posts, You might save
yourself future problems if you use standards-based id/name attributes
(and if the framework you're using doesn't allow that, seriously
consider a different framework):
HTML 4 spec section 6.2 says, ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed by any number of letters,
digits
([0-9]), hyphens (-), underscores (_), colons (:), and periods
(.).
XHTML spec section C.8 says, Note that the collection of legal
values
in XML 1.0 Section 2.3, production 5 is much larger than that
permitted to be used in the ID and NAME types defined in HTML 4. When
defining fragment identifiers to be backward-compatible, only strings
matching the pattern [A-Za-z][A-Za-z0-9:_.-]* should be used. See
Section 6.2 of [HTML4] for more information.
On Feb 11, 2:09 pm, shapper mdmo...@gmail.com wrote:
Themes[0].Subject is the actual name ... It is so to be read by an MVS
framework into a List.
Basically when the page loads some items are already there rendered on
the server.
They are always with the correct order.
However, when I add / remove items to that list the order might
change ...
So I should add and remove all items? How can I do this? And why?
I am posting my entire code:
// Cancel button
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Remove theme
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Add theme
$('#AddTheme').bind('click', function(){
// Define index
$index = $('#Index');
// Set valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Validate
if (!$subject.val()) { valid = false; }
if (!levels.length) { valid = false; }
// Validate
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#ThemesOnTutor');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append(FriendlyLevels(levels) + 'br /');
if ($description.val()) {$theme.append($description.val
()).append('br /');}
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes.Index
value = ' + $index.val() + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].Subject value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes[' +
$index.val() + '].Description value = ' + $description.val() + ' /
');
// Increment index
$index.val(+$index.val() + 1);
}
});
// FriendlyLevels
function FriendlyLevels(levels) {
if (levels.length 2) return levels.join('');
var first = levels.slice(0, -1), last = levels.slice(-1);
var friendly = first.join(', ');
if (last) { friendly += ' e ' + last; }
return friendly;
} // FriendlyLevels
On Feb 11, 9:47 pm, seasoup seas...@gmail.com wrote:
You could remove the entire list everytime and regenerate it from
javascript. Is Themes[0].Subject the actual name, or are you trying
to refer to a javascript object in an array with the attribute
'Subject' which contains the name you are looking for? If it is the
[jQuery] Re: Order Items. Please help me. Thank You.
I think your naming should be fine.because i sometimes use these kind of
naming to populate my list on the server side, I use Struts 2.
I ran into a problem similar to yours recently while doing an Ajax example
for my friend.
What i did was just like seasoup suggested.
you might want to try
$(li:has(:hidden[name^=Theme]).each(function(i){
var subject = $(:hidden[name$=Subject], this).val();
//...etc for each input
//then reorganize your index in the name of the fields
// maybe create a new html then insert back into the li
})
my selector may not be the best, just so that hopefully you get get concept
[jQuery] Re: Order Items. Please help me. Thank You.
Probably not the most efficient function, but should work:
$('#ThemesList li').each(function(index){
$('input:hidden', this).each(function(){
var fixName = $(this).attr('name').replace(/\[\d\]/, '['+index
+']');
$(this).attr('name', fixName);
});
});
- ricardo
On Feb 11, 7:19 pm, shapper mdmo...@gmail.com wrote:
Hello,
I am adding and removing a items from a list, using JQuery, which is
rendered has follows:
ol id=ThemesList
li
input type=hidden name=Themes[0].Subject value=A /
input type=hidden name=Themes[0].Levels value=L1,L2 /
input type=hidden name=Themes[0].Description value=Paper /
/li
li
input type=hidden name=Themes[2].Subject value=B /
input type=hidden name=Themes[2].Levels value=L1,L5 /
/li
li
input type=hidden name=Themes[5].Subject value=D /
input type=hidden name=Themes[5].Levels value=L2,L4 /
input type=hidden name=Themes[5].Description value=Book /
/li
/ol
Every time I add or remove a Theme I need to be sure that the list is
ordered (name) starting with Themes[0].
So basically I need to loop through each list item in list ThemesList.
- In first list item all HIDDEN inputs names should start with Themes
[0]
- In second list item all HIDDEN inputs names should start with Themes
[1]
...
So in this example, Themes[2]. ... would become Themes[1]. ... and
Themes[5]. ... would become Themes[2]. ...
Could someone please help me out?
I have no idea how to do this.
Thanks,
Miguel
