I am not using Ajax because I need to submit the form all at once.
I cannot submit the themes because the user is not created yet.
Anyway, the other option you suggested me was what I was trying:
$test = $('#Test');
$test.append(themes);
Where Test would be an hidden input.
I then read this value on the server.
When the page is redisplayed I fill the Test input again.
Then on document ready I read the content of this input, place it in
themes, and call build.
Am I thinking correctly?
The only problem is that I get an error:
Node cannot be inserted at the specified point in the hierarchy" code:
"3
[Break on this error] fragment.appendChild( ret[i] );
I am able to append a test string but not themes.
Am I doing something wrong?
Thanks,
Miguel
On Feb 25, 10:54 pm, mkmanning <michaell...@gmail.com> wrote:
> You could post to the server with ajax, or since you have all the data
> server-side, just render the page with the themes array already
> populated and call the build function
>
> On Feb 25, 11:55 am, shapper <mdmo...@gmail.com> wrote:
>
> > Hi Michael,
>
> > It is working fine. Thank You Very Much.
>
> > Just one final question. This is part of a form.
> > When the form is submitted but not validated on the server I rebuild
> > the themes list.
>
> > There is only one problem: when I delete a theme all disappear.
> > I think it is because themes is being initialized as follows: themes =
> > [];
>
> > Well, that is fine if initially the list is empty ... but if not then
> > I should get all themes.
>
> > So I am trying to create a function named InitThemes that initialize
> > themes.
>
> > <li class="Themes">
> > Economia<br/>
> > Secundário e Universitário<br/>
> > Note 1<br/>
> > <a class="Remove" href="#Remove">Remover</a>
> > <input type="hidden" name="Themes[0].Subject" value="Economy"/>
> > <input type="hidden" name="Themes[0].LevelsCsv"
> > value="Secondary,College"/>
> > <input type="hidden" name="Themes[0].Note" value="Note 1"/>
> > </li>
> > <li class="Themes">
> > Matemática<br/>
> > Universitário<br/>
> > Note 2<br/>
> > <a class="Remove" href="#Remove">Remover</a>
> > <input type="hidden" name="Themes[1].Subject" value="Mathematics"/>
> > <input type="hidden" name="Themes[1].LevelsCsv" value="College"/>
> > <input type="hidden" name="Themes[1].Note" value="Note 2"/>
> > </li>
>
> > So basically in InitThemes I need to parse all this back to themes.
> > The values and text.
> > Maybe the inputs are easy but not the rest ... I think ...
>
> > Is there a better approach to accomplish this?
>
> > Thanks,
> > Miguel
>
> > On Feb 24, 9:39 pm,mkmanning<michaell...@gmail.com> wrote:
>
> > > The problem is t[1] is now an array of objects, so you have to access
> > > the text and value attributes of the objects by their array index.
> > > Here are the buildThemesList function and the friendlyLevels functions
> > > rewritten to account for that.
>
> > > 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].text+'<br />'
> > > +friendlyLevels(t[1])+'<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].value).appendTo(li);
> > >
> > > $('<input>').attr({'type':'hidden','name':'Themes['+i
> > > +'].LevelCsv'}).val($.map(t[1],function(l,i){return l.value;}).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);
> > > }
>
> > > function friendlyLevels(levels) {
> > > if (levels.length == 1){
> > > return levels[0].text;
> > > }
> > > var friendly = "";
> > > $.each(levels,function(i,l){
> > > friendly += l.text +
> > > ((i==levels.length-2)?' e ':
> > > (i==levels.length-1)?'':', ');
> > > });
> > > return friendly;
> > > }
>
> > > Couple of things to note: friendlyLevels now has {} enclosing the
> > > first if statement. You'll see lots of coders not do that, but it's
> > > really a good idea, and not just a style choice: javascript suffers
> > > from automatic semicolon insertion which although not a common problem
> > > to run into, could make things difficult to debug. Even though there
> > > are only three checkboxes, the each function with the ternary means
> > > you don't have to refactor if you decide to add more checkboxes.
>
> > > To get the values into the hidden input, $.map() is used. Check it out
> > > in the documentation. Hope this helps.
>
> > > On Feb 24, 11:20 am, shapper <mdmo...@gmail.com> wrote:
>
> > > > @Michael,
>
> > > > I just installed Firebug and I almost made this working.
> > > > The only problem I have is when I am adding the levels to the list as
> > > > html and as hidden input:
>
> > > > +friendlyLevels(t[1].text.join(', '))+'<br />'
>
> > > > $('<input>').attr({'type':'hidden','name':'Themes['+i
> > > > +'].LevelCsv'}).val(t[1].value.join()).appendTo(li);
>
> > > > I get an error in Firebug:
> > > > t[1].text is undefined
> > > > [Break on this error] +friendlyLevels(t[1].text.join(', '))+'<br />'
>
> > > > But as far as I know to get the text and value I use .text and .value.
>
> > > > My friendlyLevels function is
>
> > > > function friendlyLevels(levels) {
> > > > if (levels.length < 2) return levels.join('');
> > > > var first = levels.slice(0, -1), last = levels.slice(-1);
> > > > var friendly = first.join(', ');
> > > > if (last) { friendly += ' e ' + last; }
> > > > return friendly;
> > > > }
>
> > > > I am trying to display a join of the values in the hidden input and a
> > > > join of the texts in the html but using friendlyLevels or anything
> > > > similar to add the "e" at the end.
> > > > I removed your code just because it was adding the "e" only for 3
> > > > items and using a function makes the code less confusing.
>
> > > > I updated my code in:http://www.27lamps.com/Beta/List/List5.html
>
> > > > I plan to optimize my code but first I would like to make it work so I
> > > > can optimize it step by step.
>
> > > > @seasoup
>
> > > > I didn't forgot the problems you mentioned about using [] ... But what
> > > > would you suggest to replace []?
>
> > > > I can post the suggestion on ASP.NET MVC forums where I participate on
> > > > a daily basis.
>
> > > > I am using Microsoft ASP.NET MVC which gives me complete control of
> > > > the HTML but still allows me to use C# and SQL.
>
> > > > Microsoft ASP.NET MVC ships now with JQuery since there was a
> > > > partnership created between JQuery creators and Microsoft.
>
> > > > This is the reason why I am starting with JQuery but I am still
> > > > learning ... but until now it seams great.
>
> > > > Thanks,
> > > > Miguel
>
> > > >http://www.27lamps.com/Beta/List/List5.html
>
> > > > On Feb 24, 4:57 pm,mkmanning<michaell...@gmail.com> wrote:
>
> > > > > Creating a complete html string won't solve the current problem; it is
> > > > > faster, and usually the way I prefer doing it also (see my note
> > > > > further below though), but as I indicated in a code comment, since
> > > > > this appears to be based on user input, the list (hopefully) won't be
> > > > > very big, so the speed gain probably isn't appreciable.
>
> > > > > @Shapper - get Firebug and use Firefox for debugging, it will tell you
> > > > > immediately that you have an error in your code: you define levelCsv =
> > > > > [] but then use levelsCsv for the array.push()
>
> > > > > Once you get it working you can try seasoups suggestion for a speed
> > > > > improvement if you like (or simply for your own edification); it will
> > > > > definitely benefit you in future if you work with larger lists or
> > > > > blocks of html. An even more important performance gain can be had by
> > > > > not doing string concatenation (I put a caveat about this in the code
> > > > > comment's also), but build an array of your html and then join the
> > > > > array; it's siginficantly faster. Check the forum and you'll see
> > > > > examples of this.
>
> > > > > On Feb 24, 8:23 am, seasoup <seas...@gmail.com> wrote:
>
> > > > > > Hi Miguel, not sure if it will solve your problem, but I find it is
> > > > > > much faster to create a complete html string and then append it
> > > > > > instead of doing lots of appends, which are slow.
>
> > > > > > //this handles the li content
> > > > > > var li =
> > > > > > $('<li>').addClass('Themes').html(t[0].text+'<br />'
> > > > > > +friendlyLevels(t[1])+'<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].value).appendTo(li);
>
> ...
>
> read more »
