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 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
