Adaptation du code javascript et dom pour compatibilité IE7,8,9

src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig

       <ul class="element_tags">
         {% for tag in element.tags %} 
           <li class="element_tag">
-            <a href="#{{ tag.id }}" class="element_tag button">{{ tag.name }}</a>
+            <a id="element_tag_{{ tag.id }}" href="#" class="element_tag button">{{ tag.name }}</a>
             <a 
               href="{{ path('ajax_tag_add_to_favorites', {
                 'tag_id' : tag.id,

src/Muzich/CoreBundle/Resources/views/Tag/tagsList.favorite.html.twig

   <ul id="favorite_tags">
     {% for tag in tags %}
       <li>
-        <a href="#{{ tag.id }}" class="button tag">
+        <a id="filtering_tag_{{ tag.id }}" href="#" class="button tag">
           {{ tag.name }}
         </a>
       </li>

src/Muzich/CoreBundle/Resources/views/Tag/tagsList.show.html.twig

   <ul id="favorite_tags">
     {% for tag in tags %}
       <li>
-        <a href="#{{ tag.id }}" class="button tag">
+        <a id="filtering_tag_{{ tag.id }}" href="#" class="button tag">
           {{ tag.name }}
         </a>
       </li>

web/bundles/muzichcore/js/muzich.js

     $('img.elements_more_loader').show();
     $('ul.elements').html('');
     
-    form = $('form[name="search"]');
+    var form = $('form[name="search"]');
     remove_tags(form.attr('name'));
     form.submit();
   });
     $('img.elements_more_loader').show();
     $('ul.elements').html('');
     
-    form = $(this).parent('div').parent('form');
+    var form = $(this).parents('form[name="search"]');
     
     $.getJSON(url_get_favorites_tags, function(response) {
       if (response.status == 'mustbeconnected')
       remove_tags(form.attr('name'));
 //      if (tags.length)
 //      {
-        inputTag = $("div#tags_prompt_"+form.attr('name')+" input.form-default-value-processed");
+        var inputTag = $("div#tags_prompt_"+form.attr('name')+" input.form-default-value-processed");
         for (i in response.tags)
         {
           $('input#tags_selected_tag_'+form.attr('name')).val(i);
   // Tag cliqué dans la liste d'éléments
   $('ul.element_tags li a.element_tag').live('click', function(){
     // Si il y a une liste de tags (comme sur la page favoris, profil)
+    var id;
     if ($('ul#favorite_tags').length)
     {
-      id = str_replace('#', '', $(this).attr('href'));
-      link = $('ul#favorite_tags li a[href="#'+id+'"]');
+      id = str_replace('element_tag', '', $(this).attr('id'));
+      var link = $('ul#favorite_tags li a[href="#'+id+'"]');
       list_tag_clicked(link, true);
     }
     
     {
       $('img.elements_more_loader').show();
       $('ul.elements').html('');
-      form = $('form[name="search"]');
-      id = str_replace('#', '', $(this).attr('href'));
+      var form = $('form[name="search"]');
+      id = str_replace('element_tag', '', $(this).attr('id'));
       remove_tags('search');
-      inputTag = $("div#tags_prompt_search input.form-default-value-processed");
+      var inputTag = $("div#tags_prompt_search input.form-default-value-processed");
       $('input#tags_selected_tag_search').val(id);
       inputTag.val($(this).html());
       inputTag.trigger("selectTag");
   // 1328283201_emblem-symbolic-link.png
   $('a.element_embed_open_link').live("click", function(){
     
-     li = $(this).parent('td').parent('tr').parent().parent().parent('li.element');
+     var li = $(this).parents('li.element');
      
      li.find('a.element_embed_close_link').show();
      li.find('a.element_embed_open_link_text').hide();
   
   $('a.element_name_embed_open_link').live("click", function(){
     
-     li = $(this).parent('span').parent('td').parent('tr').parent().parent().parent('li.element');
+     var li = $(this).parents('li.element');
      
      li.find('a.element_embed_close_link').show();
      li.find('a.element_embed_open_link_text').hide();
   // Fermeture du embed si demandé
   $('a.element_embed_close_link').live("click", function(){
     
-     li = $(this).parent('td').parent('tr').parent().parent().parent('li.element');
+     var li = $(this).parents('li.element');
     
      li.find('div.element_embed').hide();
      li.find('a.element_embed_open_link_text').show();
     mouseenter:
       function()
       {
-        td = $(this).parent('td');
-        a = td.find('a.a_thumbnail');
+        var td = $(this).parent('td');
+        var a = td.find('a.a_thumbnail');
         if (a.hasClass('embed'))
         {
           td.find('img.play').show();
     mouseleave:
       function()
       {
-        td = $(this).parent('td');
-        a = td.find('a.a_thumbnail');
+        var td = $(this).parent('td');
+        var a = td.find('a.a_thumbnail');
         if (a.hasClass('embed'))
         {
           td.find('img.play').hide();
 
   // Mise en favoris
   $('a.favorite_link').live("click", function(){
-    link = $(this);
+    var link = $(this);
     
     // Pour ne pas attendre la fin du chargement ajax:
-    img = link.find('img');
+    var img = link.find('img');
     if (!link.hasClass('loading'))
     {
       if (img.attr('src') == '/bundles/muzichcore/img/favorite_bw.png')
         $(location).attr('href', url_index);
       }
       
-      img = link.find('img');
+      var img = link.find('img');
       link.attr('href', response.link_new_url);
       img.attr('src', response.img_new_src);
       img.attr('title', response.img_new_title);
   );
     
    // Plus d'éléments
-   last_id = null;
+   var last_id = null;
    $('a.elements_more').click(function(){
-     link = $(this);
-     last_element = $('ul.elements li.element:last-child');
-     id_last = str_replace('element_', '', last_element.attr('id'));
-     invertcolor = 0;
+     var link = $(this);
+     var last_element = $('ul.elements li.element:last-child');
+     var id_last = str_replace('element_', '', last_element.attr('id'));
+     var invertcolor = 0;
      if (last_element.hasClass('even'))
      {
        invertcolor = 1;
     cancelAnswer : string_element_delete_confirm_no,
     onYes: function(link){
       
-      li = link.parent('td').parent('tr').parent().parent().parent('li.element');
+      var li = $(this).parents('li.element');
       li.find('img.element_loader').show();
       $.getJSON(link.attr('href'), function(response){
         if (response.status == 'mustbeconnected')
       return false;
     },
     onOpen: function(link){
-      li = link.parent('td').parent('tr').parent().parent().parent('li.element');
+      var li = $(this).parents('li.element');
       li.find('a.element_edit_link').addClass('mustBeDisplayed');
       li.find('a.element_remove_link').addClass('mustBeDisplayed');
     },
     onClose: function(link){
-      li = link.parent('td').parent('tr').parent().parent().parent('li.element');
+      var li = $(this).parents('li.element');
       li.find('a.element_edit_link').removeClass('mustBeDisplayed');
       li.find('a.element_remove_link').removeClass('mustBeDisplayed');
       li.find('a.element_edit_link').hide();
     }
   });
 
- elements_edited = new Array();
+ var elements_edited = new Array();
  // Ouverture du formulaire de modification
   $('a.element_edit_link').live('click', function(){
     
-    link = $(this);
-    li = link.parent('td').parent('tr').parent().parent().parent('li.element');
+    var link = $(this);
+    var li = link.parents('li.element');
     // On garde en mémoire l'élément édité en cas d'annulation
     elements_edited[li.attr('id')] = li.html();
-    div_loader = li.find('div.loader');
+    var div_loader = li.find('div.loader');
     li.html(div_loader);
     li.find('img.element_loader').show();
     
       
       // On rend ce formulaire ajaxFormable
       $('form[name="'+response.form_name+'"] input[type="submit"]').live('click', function(){
-        li = $(this).parent('form').parent('li');
+        var li = $(this).parents('li.element');
         li.prepend(div_loader);
         li.find('img.element_loader').show();
       });
           $(location).attr('href', url_index);
         }
         
-        li = $('li#'+response.dom_id);
+        var li = $('li#'+response.dom_id);
         
         if (response.status == 'success')
         {
         {
           li.find('img.element_loader').hide();
           li.find('ul.error_list').remove();
-          ul_errors = $('<ul>').addClass('error_list');
+          var ul_errors = $('<ul>').addClass('error_list');
           
           for (i in response.errors)
           {
   
   // Annulation d'un formulaire de modification d'élément
   $('form.edit_element input.cancel_edit').live('click', function(){
-    var li = $(this).parent('form').parent('li');
+    var li = link.parents('li.element');
     li.html(elements_edited[li.attr('id')]);
     delete(elements_edited[li.attr('id')]);
   });
  
   ////////////////// TAG PROMPT ///////////////
  
-  ajax_query_timestamp = null;
-  tag_text_help = $('input.tag_text_help').val();
+  var ajax_query_timestamp = null;
+  var tag_text_help = $('input.tag_text_help').val();
  
   // Les deux clicks ci-dessous permettent de faire disparaitre
   // la div de tags lorsque l'on clique ailleurs
     {
 
       // on met en variable l'input
-      inputTag = input;
+      var inputTag = input;
       
       // On récupére la div de tags
-      divtags = $("#search_tag_"+form_name);
+      var divtags = $("#search_tag_"+form_name);
 
       // Si la fenêtre de tags est caché
       if (!divtags.is(':visible'))
       {
         // On la replace
-        position = input.position();
+        var position = input.position();
         divtags.css('left', Math.round(position.left) + 5);
         divtags.css('top', Math.round(position.top) + 28);
         // Et on l'affiche
       // On affiche le loader
       $('#tag_loader_'+form_name).show();
       // On cache la liste de tags
-      search_tag_list = divtags.find('ul.search_tag_list');
+      var search_tag_list = divtags.find('ul.search_tag_list');
       // On supprime les anciens li
       search_tag_list.find('li').remove();
       search_tag_list.hide();
       // Et on affiche une info
-      span_info = divtags.find('span.info');
+      var span_info = divtags.find('span.info');
       span_info.show();
       // TODO: multilingue !
       span_info.text("Recherche des tags correspondants à \""+input.val()+"\" ...");
 
       // On récupère le timestamp pour reconnaitre la dernière requête effectué
       ajax_query_timestamp = new Date().getTime();
-
+      
       // Récupération des tags correspondants
       $.getJSON(url_search_tag+'/'+input.val()+'/'+ajax_query_timestamp, function(data) {
         if (data.status == 'mustbeconnected')
         // ajax a été faite depuis.
         if (data.timestamp == ajax_query_timestamp)
         {
-          status = data.status;
-          tags   = data.data;
+          var status = data.status;
+          var tags   = data.data;
 
           // Si on spécifie une erreur
           if (status == 'error')
           {
             if (tags.length > 0)
             {
-              more = false;
+              var more = false;
               // Pour chaque tags retournés
               for (i in tags)
               {
                 var t_string = tag_name
                 // On construit un li
                 
-                r_string = $.trim(input.val());
+                var r_string = $.trim(input.val());
                 var re = new RegExp(r_string, "i");
                 t_string = t_string.replace(re,"<strong>" + r_string + "</strong>");
                 
                                 
-                li_tag = 
+                var li_tag = 
                   $('<li>').append(
-                    $('<a>').attr('href','#'+tag_id+'#'+tag_name)
+                    $('<a>').attr('id','searched_tag_'+tag_id+'_'+tag_name)
+                      .attr('href', '#')
                     // qui réagit quand on clique dessus
                     .click(function(e){
                       // On récupère le nom du tag
-                      name = $(this).attr('href').substr(1,$(this).attr('href').length);
-                      name = name.substr(strpos(name, '#')+1, name.length);
-                                            
-                      id = $(this).attr('href').substr(1,$(this).attr('href').length);
+                      var name = $(this).attr('id').substr(13,$(this).attr('id').length);
+                      name = name.substr(strpos(name, '_')+1, name.length);
+                      
+                      var id = $(this).attr('id').substr(13,$(this).attr('id').length);
                       id = str_replace(name, '', id);
-                      id = str_replace('#', '', id);
-                                     
+                      id = str_replace('_', '', id);
+                      
                       $('input#tags_selected_tag_'+form_name).val(id);
                       inputTag.val(name);
                       // Et on execute l'évènement selectTag de l'input
             if (!data.same_found)
             {
               // Cette variable nous permettra de stocker le lien nouveau tag
-              link_add_tag = null;
+              var link_add_tag = null;
               
               li_tag = 
                 $('<li>').addClass('new').append(
                     link_add_tag = $(this);
                     
                     // En premier lieux on fait apparaître la fenêtre de confirmation
-                    popup = $('<div>')
+                    var popup = $('<div>')
                     .attr('id', 'add_tag')
                     .addClass('popin_block')
                     .css('width', '400px')
                             $('#add_tag').remove();
                             
                             // On récupère le nom du tag
-                            name = link_add_tag.attr('href').substr(1,link_add_tag.attr('href').length);
+                            var name = link_add_tag.attr('href').substr(1,link_add_tag.attr('href').length);
                             name = name.substr(strpos(name, '#')+1, name.length);
 
-                            link_add_tag.parent('li').parent('ul').parent('div').find('img.tag_loader').show();
+                            link_add_tag.parents('div.search_tag_list').find('img.tag_loader').show();
 
                             var url;
                             if (arguments)
                                 $(location).attr('href', url_index);
                               }
 
-                              tag_id   = response.tag_id;
-                              tag_name = response.tag_name;
+                              var tag_id   = response.tag_id;
+                              var tag_name = response.tag_name;
 
                               $('input#tags_selected_tag_'+form_name).val(tag_id);
                               inputTag.val(tag_name);
                               divtags.hide();
                               inputTag.val(tag_text_help); 
 
-                              link_add_tag.parent('li').parent('ul').parent('div').find('img.tag_loader').hide();
+                              link_add_tag.parents('div.search_tag_list').find('img.tag_loader').hide();
                             });
                             
                             return false;
   }
  
  
-  last_keypress = 0;
+  var last_keypress = 0;
   
   function check_timelaps_and_search(input, form_name, time_id, timed, info)
   {
   // Autocompletion de tags
   $("div.tags_prompt ul.tagbox li.input input").live('keypress', function(e){
     
-    var form_name = $(this).parent('li').parent('ul.tagbox')
-      .parent('div.tags_prompt').parent('form').attr('name')
-    ;
+    var form_name = $(this).parents('form').attr('name');
     var code = (e.keyCode ? e.keyCode : e.which);
 
     if ((e.which !== 0 && e.charCode !== 0) || (code == 8 || code == 46))
   
   // Selection Réseau global / Mon réseau
   $('div.select_network a').live('click', function(){
-    divSelect = $(this).parent('div');
+    var divSelect = $(this).parent('div');
     if ($(this).hasClass('all_network'))
     {
       divSelect.find('a.all_network').addClass('active');
     else if (response.status == 'error')
     {
       $('form[name="add"]').find('ul.error_list').remove();
-      ul_errors = $('<ul>').addClass('error_list');
+      var ul_errors = $('<ul>').addClass('error_list');
       
       for (i in response.errors)
       {
   // TODO.
 
  /////////////////////
+ var tags_ids_for_filter = new Array();
  // Filtre par tags (show, favorite)
  function refresh_elements_with_tags_selected(link)
   {
     $('ul.elements').html('');
     $('div.no_elements').hide();
     $('img.elements_more_loader').show();
-    $.getJSON($('input#get_elements_url').val()+'/'+array2json(tags_ids), function(response){
+    $.getJSON($('input#get_elements_url').val()+'/'+array2json(tags_ids_for_filter), function(response){
       
       if (response.status == 'mustbeconnected')
       {
     }
     
     // On construit notre liste de tags
-    tags_ids = new Array();
+    tags_ids_for_filter = new Array();
     $('ul#favorite_tags a.tag.active').each(function(index){
-      id = str_replace('#', '', $(this).attr('href'));
-      tags_ids[id] = id;
+      var id = str_replace('filtering_tag_', '', $(this).attr('id'));
+      tags_ids_for_filter[id] = id;
     });
     
     // On adapte le lien afficher plus de résultats
-    a_more = $('a.elements_more');
-    a_more.attr('href', $('input#more_elements_url').val()+'/'+array2json(tags_ids));
+    var a_more = $('a.elements_more');
+    a_more.attr('href', $('input#more_elements_url').val()+'/'+array2json(tags_ids_for_filter));
     
     return check_timelaps_and_find_with_tags(link, new Date().getTime(), false);
   }
   ////////////////////////////////////////
   /// Gestion de nouveaux éléments
   
-  do_check_new_elements = false;
+  var do_check_new_elements = false;
   
   function check_new_elements()
   {
           +str_replace('element_', '', $('ul.elements li:first').attr('id'))
         ;
         $.getJSON(url, function(response){
-
+          
           if (response.status == 'mustbeconnected')
           {
             $(location).attr('href', url_index);
   
   // Afficher les commentaires
     $('td.element_content a.display_comments').live('click', function(){
-      display_comments(
-        $('li#element_'+
-          str_replace('#comments_', '', $(this).attr('href'))
-        )
-      );
+      display_comments($(this).parents('li.element'));
     });
     
     $('td.element_content a.hide_comments').live('click', function(){
-      hide_comments(
-        $('li#element_'+
-          str_replace('#hide_comments_', '', $(this).attr('href'))
-        )
-      );
+      hide_comments($(this).parents('li.element'));
     });
   
     function display_comments(li_element)
     
   // Ajouter un commentaire
     $('li.element a.add_comment').live('click', function(){
-      display_add_comment($('li#element_'+
-        str_replace('#add_comment_', '', $(this).attr('href'))
-      ));
+      display_add_comment($(this).parents('li.element'));
     });
     
     $('form.add_comment input[type="submit"]').live('click', function(){
-      $(this).parent('div').parent('form').parent('div.comments').find('img.comments_loader').show();
+      $(this).parents('div.comments').find('img.comments_loader').show();
     });
         
     function display_add_comment(li_element)
         else if (response.status == 'error')
         {
           li_element.find('form.add_comment').find('ul.error_list').remove();
-          ul_errors = $('<ul>').addClass('error_list');
+          var ul_errors = $('<ul>').addClass('error_list');
 
           for (i in response.errors)
           {
     }
     
     $('form.add_comment input.cancel').live('click', function(){
-      li_element = $(this).parent('div').parent('form').parent('div.comments').parent('li.element');
+      var li_element = $(this).parents('li.element');
       hide_add_comment(li_element);
     });
     
     cancelAnswer : string_comment_delete_confirm_no,
     onYes: function(link){
       
-      li = link.parent('li.comment');
+      var li = link.parents('li.comment');
       li.find('img.comment_loader').show();
       
       $.getJSON(link.attr('href'), function(response){
       return false;
     },
     onOpen: function(link){
-      li = link.parent('li.comment');
+      var li = link.parents('li.comment');
       li.find('a.comment_edit_link').addClass('mustBeDisplayed');
       li.find('a.comment_remove_link').addClass('mustBeDisplayed');
     },
     onClose: function(link){
-      li = link.parent('li.comment');
+      var li = link.parents('li.comment');
       li.find('a.comment_edit_link').removeClass('mustBeDisplayed');
       li.find('a.comment_remove_link').removeClass('mustBeDisplayed');
       li.find('a.comment_edit_link').hide();
     }
   });
   
-  comments_edited = new Array();
+  var comments_edited = new Array();
   
   // Modification
   // Ouverture du formulaire de modification
   $('a.comment_edit_link').live('click', function(){
     
-    link = $(this);
-    li = link.parent('li.comment');
+    var link = $(this);
+    var li = link.parents('li.comment');
     // On garde en mémoire l'élément édité en cas d'annulation
     comments_edited[li.attr('id')] = li.html();
-    loader = li.find('img.comment_loader');
+    var loader = li.find('img.comment_loader');
     li.html(loader);
     li.find('img.comment_loader').show();
     
       li.html(response.html);
       // On rend ce formulaire ajaxFormable
       $('li#'+li.attr('id')+' form.edit_comment input[type="submit"]').live('click', function(){
-        li_current = $(this).parent('div').parent('form').parent('li');
+        var li_current = $(this).parents('li.comment');
         li_current.prepend(loader);
         li_current.find('img.comment_loader').show();
       });
         else if (response.status == 'error')
         {
           li.find('ul.error_list').remove();
-          ul_errors = $('<ul>').addClass('error_list');
+          var ul_errors = $('<ul>').addClass('error_list');
           
           for (i in response.errors)
           {
   
   // Annulation d'un formulaire de modification d'un comment
   $('form.edit_comment input.cancel').live('click', function(){
-    var li = $(this).parent('div').parent('form').parent('li');
+    var li = $(this).parents('li.comment');
     li.html(comments_edited[li.attr('id')]);
     delete(comments_edited[li.attr('id')]);
   });
       return false;
     },
     onOpen: function(link){
-      li = link.parent('li.element_tag');
+      var li = link.parents('li.element_tag');
       li.find('a.tag_to_favorites').addClass('mustBeDisplayed');
     },
     onClose: function(link){
-      li = link.parent('li.element_tag');
+      var li = link.parents('li.element_tag');
       li.find('a.tag_to_favorites').removeClass('mustBeDisplayed');
       li.find('a.element_tag').removeClass('element_tag_large_for_fav');
       li.find('a.tag_to_favorites').hide();
   
   $('a.added_element_add_to_group').live('click', function(){
     
-    div = $(this).parent('li').parent('ul').parent('div');
-    div.find('img.loader').show();
+    var loader = $('div#added_element_to_group').find('img.loader');
+    loader.show();
     
     $.getJSON($(this).attr('href'), function(response) {
       
-      div.find('img.loader').hide();
+      loader.hide();
     
       if (response.status == 'mustbeconnected')
       {
   
   $('li.element a.vote').live('click', function(){
     
-    img = $(this).find('img');
-    link = $(this);
+    var img = $(this).find('img');
+    var link = $(this);
     img.attr('src', url_img_ajax_loader);
     
     $.getJSON(link.attr('href'), function(response){
       {
         link.attr('href', response.data.a.href);
         img.attr('src', response.data.img.src);
-        link.parent('li').parent('ul').find('li.score span.score').html(response.data.element.points);
+        link.parents('td.right').find('li.score span.score').html(response.data.element.points);
       }
       
     });
     
     $('img.elements_more_loader').show();
     $('ul.elements').html('');
-    link = $(this);
+    var link = $(this);
     
     $.getJSON(link.attr('href'), function(response){
         
  // Ouverture du formulaire de modification
   $('a.element_propose_tags').live('click', function(){
     
-    link = $(this);
-    li = link.parent('td').parent('tr').parent().parent().parent('li.element');
+    var link = $(this);
+    var li = link.parents('li.element');
     
     li.find('img.element_loader').show();
     
       {
         
         // On prépare le tagBox
-        table = li.find('table:first');
+        var table = li.find('table:first');
         li.find('div.tag_proposition').remove();
         table.after(response.html);
 
       
       // On rend ce formulaire ajaxFormable
       $('form[name="'+response.form_name+'"] input[type="submit"]').live('click', function(){
-        li = $(this).parent('form').parent('div').parent('li');
+        li = $(this).parents('li.element');
         li.find('img.element_loader').show();
       });
       $('form[name="'+response.form_name+'"]').ajaxForm(function(response){
         {
           li.find('img.element_loader').hide();
           li.find('ul.error_list').remove();
-          ul_errors = $('<ul>').addClass('error_list');
+          var ul_errors = $('<ul>').addClass('error_list');
           
           for (i in response.errors)
           {
   
   // Annulation d'un formulaire de modification d'élément
   $('div.tag_proposition input.cancel').live('click', function(){
-    $(this).parent('form').parent('div').slideUp();
+    $(this).parents('div.tag_proposition').slideUp();
   });
   
   $('a.element_view_propositions_link').live('click', function(){
     
-    link = $(this);
-    li = link.parent('td').parent('tr').parent().parent().parent('li.element');
+    var link = $(this);
+    li = link.parents('li.element');
     
     li.find('img.element_loader').show();
     
       
       if (response.status == 'success')
       {
-        table = li.find('table:first');
+        var table = li.find('table:first');
         li.find('div.tags_proposition_view').remove();
         table.after(response.html);
       }
   
   $('a.accept_tag_propotision').live('click', function(){
     
-    link = $(this);
-    li = link.parent('li.tag_proposition').parent('ul.tag_propositions')
-      .parent('div.tags_proposition_view').parent('li.element');
+    var link = $(this);
+    var li = link.parents('li.element');
     
     li.find('img.element_loader').show();
     
   //
   $('a.refuse_tag_propositions').live('click', function(){
     
-    link = $(this);
-    li = link.parent('div.tags_proposition_view').parent('li.element');
+    var link = $(this);
+    var li = link.parents('li.element');
     
     li.find('img.element_loader').show();