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="Remove">Remove</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="Remove">Remove</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="Remove">Remover</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 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
>
> ...
>
> read more »
