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