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