Question

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.

Answer 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.