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 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)
>
> > ...
>
> > read more »
