if you're using the ready function, remove the inner (function($)
{ ... })(jQuery); wrapperOn 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 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 > > ... > > read more »
