1

I have some accent issues in a shopping cart script. Here's a part of my Javascript code :

//process product groups
        products.each(function(gid) {
            //create groups of products
            var gname = this.id.replace(/_/g, ' ');
            var gbutton = $('<a />',{'title':gname, 'prod_id':this.id,'href':'#'}).text(gname);
            $('<li/>').append(gbutton).appendTo(groups);

            //register onclick event for group link
            gbutton.click(function(e) {
                //make clicked group active
                groups.find('.active-group').removeClass('active-group');
                $(this).parent().addClass('active-group');
                //hide all groups 
                products.css('display','none');
                active_group = $('#' + $(this).attr('prod_id'), shop);
                //show only active group
                active_group.css({'top':0,'display':'block'});
                //animate products by shifting their top position and tweening opacity
                active_group.children('li').each(function(i){
                  $(this).css({'top':parseInt((i+settings.pageColumns)/settings.pageColumns)*settings.groupAnimationShift,'opacity':0});
                  $(this).delay(i*settings.groupAnimationStartDelay).
                  animate({'top':0,'opacity':1},settings.groupAnimationTime,settings.groupAnimationEasing);
                });
                //update number of pages
                active_group.current_page = 1;
                active_group.pages = Math.ceil(active_group.children('li').length / (settings.pageRows*settings.pageColumns));
                //update page scroll
                resetPageScroll();
                e.preventDefault();
            });

It is linked with UL id in the HTML

Ex. :

<ul id="Enseignes_Résidentielles">

                  <li class="product" name="RD-101" price="5" minimum="4" skip="4"> 
                         <a class="product-image fancybox" href="images/product_big.jpg" title="Picture 4">
                             <img src="images/product_2.png" alt="Preview"/>
                             <div class="text-overlay">
                              <p class="product-heading">Description</p>
                               Enseignes résidentielles imprimées sur 2 panneaux 4 mm 36” x 24” collés dos à dos.
                             </div>
                         </a>
                         <p class="product-heading">RD-101 (Simple)</p>
                         <a href="#" id="test" class="product-buy">Ajouter au panier</a>
                         <p class="product-meta">Double de pareterre 32x24</p>
                         <div class="product-price">18<span class="product-currency">$</span></div>

                    </li>

Everything is working except all the functions in the shopping cart DIV when I add accents and other punctuation to the UL id... If my UL id does not contain accent or other utf-8 characters, it works fine.

Any idea why? And any idea how to fix this?

EDIT

Here's the live project... : http://danalcoimpressions.com/remax/index.html Try this...Click "Ajouter au panier" in any items in the first tab (Enseignes Résidentielles)...hover the shopping cart tab and try to add or delete items from that Category and it won't work. But try the same thing in the 2nd tab (Enseignes Balcon) wich doesn't have accent in the tab (UL) name...and it will work great in the shopping cart.

larin555
  • 1,559
  • 3
  • 25
  • 40
  • Have you managed to find exactly what step in your code is not behaving as expected, like by using a debugger or something? – Pointy Jun 12 '12 at 17:29
  • I don't see anything in the HTML you posted with a "prod_id" attribute, but that's the only thing the code references that seems like it might be relevant. I think you need to post more or different excerpts. – Pointy Jun 12 '12 at 17:32
  • I edited my first post with the URL of my issue...maybe with firebug you'll see what's going on? – larin555 Jun 12 '12 at 17:43
  • Your page works fine in Firefox for me; I can add those items to the cart. What browser are you using? – Pointy Jun 12 '12 at 17:58
  • You can add them by clicking the "Ajouter au panier" button, but go in the shopping cart DIV itself (hovering the shopping cart icon) and try to click the + or - icon...nothing happens. Try the same thing in the "Enseignes Balcon" tab and you'll see it will work correctly. – larin555 Jun 12 '12 at 18:01
  • Oh I see. Well you posted the wrong code, first of all; the error is happening in "itemRemoveHandler". – Pointy Jun 12 '12 at 18:02
  • And when clicking on the "X" button (to delete) the item it's not working either. So the errors would be in the itemRemoveHandler function? Why is it causing error when having accent in the UL id? – larin555 Jun 12 '12 at 18:04

2 Answers2

3

from What are valid values for the id attribute in HTML?

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Community
  • 1
  • 1
brianc
  • 1,345
  • 3
  • 14
  • 28
  • So there's no way to use accent in it? Actually, the accent are showing and everything's great...it just seems to have a conflict with the javascript – larin555 Jun 12 '12 at 17:26
  • 1
    Accents are fine, just not as IDs of elements! You won't see it on the screen. – Juan Mendes Jun 12 '12 at 17:27
  • 1
    In HTML5, the only rule is that "id" values must not contain spaces. The accents should be fine; that's not (directly) the problem. I think the UTF-8 issue may be, but then I copy/pasted your example string and it works fine in a jsfiddle. – Pointy Jun 12 '12 at 17:28
  • Note that that question is almost four years old :-) – Pointy Jun 12 '12 at 17:29
  • @Pointy Can you point us to a link talks about any characters in IDs/names? – Juan Mendes Jun 12 '12 at 17:29
  • The HTML 5 spec is [here](http://developers.whatwg.org/elements.html#the-id-attribute). – Pointy Jun 12 '12 at 17:30
  • I edited my first post with the URL of my issue...maybe with firebug you'll see what's going on? – larin555 Jun 12 '12 at 17:40
  • This is definitely not the cause of the problem, it should be noted, though the presence of accented characters in an "id" are involved in the problem. It's not that it's invalid; the problem is that JavaScript's regular expression semantics are antiquated and inadequate. – Pointy Jun 12 '12 at 20:15
1

I think the problem is with this code:

function itemRemoveHandler(p) {
  //look for item in cart
  var filter = /(\w+)::(\w+)/.exec(p.id);
  delete cart[filter[1]][filter[2]];

JavaScript has terrible support for Unicode characters in regular expressions. In particular, the \w operator doesn't work properly. Therefore, the match just doesn't work so the delete line breaks.

I'm not sure what to suggest as a workaround. You could keep the special characters out of "id" values, or else work on the regex.

edit — OK confirmed; the regex, when applied to the string, doesn't match the accented characters.

Pointy
  • 371,531
  • 55
  • 528
  • 584
  • I've read that adding `^` (e.g. /^à/) at the beginning of the regex it supposed to work...is that true? I tried it but doesn't seems to be working – larin555 Jun 12 '12 at 18:18
  • I think the real problem is that the regex relies on `\w` to match something. I'm not sure what that something is, however. – Pointy Jun 12 '12 at 18:21
  • Could it be the UL id? That's the container for all the items that belongs in the "Enseignes Résidentielles" category. – larin555 Jun 12 '12 at 18:27
  • Is there a way to use accents in this situation? – larin555 Jun 12 '12 at 19:29
  • You'd have to explicitly account for them in the regular expression. That is, instead of `\w+`, it'd have to be like `[\wé]+` but including **all** the accented characters you might use. – Pointy Jun 12 '12 at 19:35
  • I tried `var filter = /(\wé+)::(\wé+)/.exec(p.id);` but it's not working – larin555 Jun 12 '12 at 19:38
  • 1
    No, that's not correct - you need the square brackets: `([\wé]+)::([\wé]+)` – Pointy Jun 12 '12 at 20:14