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
