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)
> > > > > > 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].length>2?t[1].join(',
> > > > > > > ').replace(/(,\s)(\w+)$/,' e $2'):t
> > > > > > > [1].join(', '))+'<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]).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
>
> ...
>
> read more »
