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