Isoler des champs du profil

[Phyliono]

Rappel du premier message :

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.universiteuniverselle.com

Description du problème

Bonjour,

J'aimerais déplacer certains champs du profil dans un cadre à part mais je ne sais pas comment faire... J'ai vu plusieurs sujets mais je n'arrive pas à l'appliquer à mon forum, notamment celui-ci : https://forum.forumactif.com/t398576-isoler-des-champs-du-profil-dans-un-onglet-script

Par exemple, je souhaiterais déplacer la ligne "Inscription 04/06/2015" sur ce profil http://www.universiteuniverselle.com/u4 en dessous "Dernière visite : Aujourd'hui à 11:20" dans le cadre de droite.

Comment puis-je faire ?

Je vous remercie.

[Phyliono]

bah up j'ai pas de réponse aussi

[Rivendell.]

Hello,
Alors pour isoler les champs du profil, personnellement j'ai utilisé ceci :

Dans ton template, tu isoles tes éléments avec ce code :

Code:

<!-- BEGIN profile_field -->
                                  <div class="M14_ProfilPerso">{postrow.displayed.profile_field.LABEL}
                                    <span class="M14_profilContent">
                                      {postrow.displayed.profile_field.CONTENT}</span>
                                    {postrow.displayed.profile_field.SEPARATOR}
                                    </div>
 <!-- END profile_field -->

Ensuite dans ton javascript, tu vas ajouter ceci en cochant "dans les messages":

Code:

$(function() {
  for (var field = $('.M14_ProfilPerso'), i = 0, j = field.length; i < j; i++) {
    field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) {
        var c = s.charCodeAt(0);
        if (c == 32) return '-';
        return '__' + ('000' + c.toString(16)).slice(-4);
    });
  }
});

Cependant, après, je saurais pas trop t'aider plus malheureusement. Mais quand tu sélectionnes tes éléments dans le profil, tu vas voir que tout se sépare de la sorte :

Code:

<tr id="field_id-UN NUMERO"></tr>

Ca correspond à l'ordre de ton profil dans Utilisateurs & Groupes > Profil.

Peut-être que si tu prends la balise <tr id="field_id-UN NUMERO"></tr> (sans tout ce qu'il y a dedans) pour l'inscription et que dans le template profile_view_body, tu le places au niveau de {L_LAST_VISITED}, tu arriveras à ce que tu veux. Mais j'sais pas, je n'ai jamais testé de bouger des éléments de la sorte malheureusement donc là je coince.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Phyliono]

j'essaie

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Phyliono]

toujours là

[Phyliono]

@Rivendell. je n'arrive pas à déplacer...

[Rivendell.]

Effectivement après test ça ne fonctionne pas et malheureusement me compétences s'arrêtent là .. Désolée.

[Lixyr]

Bonsoir Phyliono,

Ajoutez ceci dans votre JS, à la suite de ce que vous avez déjà pour les profils, et avant la fermeture de fin du code, marquée par }); :

Code:

if ($(".profile_row5").length) {
$.each( $('tr[id*="field_id"]'), function() {
if ($(this).attr("id") == "field_id-4") {
var fieldid4 = $(this).find("td").last().text();
$("td.profile_row1 .profile_row3 tbody").append('<tr align="center"><td><span class="profile_points gen"><img src="https://i.servimg.com/u/f77/18/72/44/21/inscri17.png" alt="Inscription"> Inscription : '+fieldid4+'</span></td></tr>');
$(this).remove();
}
});
}

Ça ne fonctionne que pour la ligne Inscription : 17/07/2016 car c'est elle que je cible avec la partie

if ($(this).attr("id") == "field_id-4") {
...
}

(cette ligne a comme id field_id-4)

ps : attention, vous avez des erreurs de JS, donc il est possible que ça ne fonctionne pas. Dans ce cas, je vous conseille de corriger vos codes JavaScript, car l'un d'entre eux a une accolade manquante.

[Phyliono]

Bonjour, merci beaucoup mais...

J'ai mis comme ceci dans le template profile_view_body :

Code:

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
      <th style="width: 100%; white-space: nowrap;" class="secondarytitle">
        <h2>Profil de <span class="avatarImpose_nom">{USERNAME}</span></h2>
      </th>
  </tr>
  <tr style="height: 8px;">
      <td></td>
  </tr>
  <tr>
      <td align="center" valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="profile_row2" valign="top">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="profile_row5" align="center">
                    <!-- BEGIN profile_field -->
                    <tr id="field_id{profile_field.ID}" class="id_utilisateur_{USER_ID}">
                        <span class="profile_points">
                          <td width="142" align="right" valign="top" nowrap="nowrap">
                              <div style="margin-top:10px"><span class="profile_points"><span class="gen">{profile_field.LABEL}&nbsp;&nbsp;</span></span></div>
                          </td>
                          <td width="311">
                              <div class="gen" style="margin-top:15px;font-weight:bold">{profile_field.CONTENT}</div>
                              <br /><!-- BEGIN profil_type_user_posts --><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br />
                              <span class="genmed"><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
                              &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                              &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span><!-- END profil_type_user_posts -->
                          </td>
                        </span>
                    </tr>
                    <!-- END profile_field -->
                  </table>
              </td>
              <td class="profile_row1" valign="top" style="text-align:center">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="profile_row3" align="center">
                    <tr align="center">
                        <td><b><span class="gen" style="font-size:16px">{USERNAME}</span></b></td>
                    </tr>
                    <tr align="center">
                        <td><b><span class="gen avatarImpose_image">{AVATAR_IMG}</span></b></td>
                    </tr>
                    <tr align="center">
                        <td><b><span class="gen">{POSTER_RANK}</span></b></td>
                    </tr>
                    <!-- BEGIN switch_show_status -->
                    <tr align="center">
                        <td><b><span class="gen">{USER_ONLINE}</span></b></td>
                    </tr>
                    <!-- END switch_show_status -->
                    <tr align="center">
                        <td><span class="gen">{L_LAST_VISITED}</span><span class="gen">&nbsp;:&nbsp;{LAST_VISIT_TIME}</span></td>
                    </tr>
                    <!-- BEGIN switch_auth_user -->
                    <tr>
                        <td valign="middle" nowrap="nowrap" align="center" style="word-wrap: break-word;white-space: normal"><br /><span class="gen">{L_ADMINISTRATE_USER}&nbsp;:<br />{ADMINISTRATE_USER}{BAN_USER}</span></td>
                    </tr>
                    <!-- END switch_auth_user -->
                  </table>
                  <!-- BEGIN contact_field -->
                  <table id="moyensContact" border="0" cellspacing="0" cellpadding="0" class="profile_row4" align="center" style="display:inline-block;width:35px;margin: 5px;">
                    <tr id="field_id{contact_field.ID}">
                          <td width="1%" valign="middle">
                              <div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div>
                          </td>
                    </tr>
                  <!-- END contact_field -->
                  </table>
                  <table width="100%" border="0" cellspacing="1" cellpadding="0" class="profile_row6" align="center" style="display:none">
                    <tr>
                        <td width="1%" align="center" valign="middle" nowrap="nowrap"><img src="https://compteur2visite.com/visiteur.php/?rvb=%23F8F8F8&texte=%23889CAA&hauteur=50&largeur=120&afficher=total" style="-webkit-mask-image: -webkit-gradient(
                          linear, top bottom, left right,
                          color-stop(0.00,  rgba(0,0,0,1)),
                          color-stop(0.35,  rgba(0,0,0,1)),
                          color-stop(0.50,  rgba(0,0,0,0)),
                          color-stop(0.65,  rgba(0,0,0,0)),
                          color-stop(1.00,  rgba(0,0,0,0)));" alt="Compteur de visite" border="0" /></td>
                    </tr>
                  </table>
                  <br />
              </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN switch_rpg -->
  <tr>
      <td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
  </tr>
  <tr>
      <td class="row1" align="center" valign="top" height="6">
        {RPG_IMAGE}<br /><br />
        <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN rpg_fields_left -->
            <tr>
              <td align="right" valign="middle" nowrap="nowrap">
                  <span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
              </td>
              <td width="100%" valign="middle" nowrap="nowrap">
                  <b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
              </td>
            </tr>
            <!-- END rpg_fields_left -->
        </table>
      </td>
      <td class="row1" align="center" valign="top" height="6">
        <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN rpg_fields -->
            <tr>
              <td align="right" valign="middle" nowrap="nowrap">
                  <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
              </td>
              <td width="100%" valign="baseline">
                  <b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
              </td>
            </tr>
            <!-- END rpg_fields -->
        </table>
      </td>
  </tr>
  <tr>
      <td colspan="2" align="center" class="row1">{U_ADMIN_RPG}</td>
  </tr>
  <!-- END switch_rpg -->
</table>
<br />
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function () {
 
    // on indique le chemin vers la balise qui contient les champs des profils
    // et l'élement html qui contient notre élement déclencheur
    var $chemin = ".profile_row2 .profile_row5 .infos-posteur",
        $eltParent = '.profile_row1';
 
    // On parcourt chaque champs des profils
    $($chemin).each(function(index) {
        // On récupére le contenu html de ces champs
        var champs ;
        if($(this).find('.field_id-4 > td > div > .profile_points > span > span').length){
            champs = $(this).find('.field_id-4 > td > div > .profile_points > span > span').html() ;
        }else{
            champs = $(this).find('.field_id-4').html() ;
        }
 
        // On teste si le champ correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if(champs == "<img src='https://i.servimg.com/u/f62/18/72/44/21/inscri16.png' alt='Inscription&nbsp;'> Inscription&nbsp;"){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents($eltParent).find('.infos-supp').append(this);
 
        }
 
    });
  if ($(".profile_row5").length) {
$.each( $('tr[id*="field_id"]'), function() {
if ($(this).attr("id") == "field_id-4") {
var fieldid4 = $(this).find("td").last().text();
$("td.profile_row1 .profile_row3 tbody").append('<tr align="center"><td><span class="profile_points gen"><img src="https://i.servimg.com/u/f77/18/72/44/21/inscri17.png" alt="Inscription"> Inscription : '+fieldid4+'</span></td></tr>');
$(this).remove();
}
});
}
});
</script>
<script type="text/javascript">
  //<![CDATA[
    $(document).ready(function(){
        $('[id^=field_id]').each(function(){
          if ( $(this).find('.field_editable').is('span, div') )
          {
              $(this).hover(function()
              {
                if( $(this).find('.field_editable.invisible').is('span, div') )
                {
                    $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                    $(this).find('.ajax-profil_edit').attr({
                          alt: "{L_FIELD_EDIT_VALUE}",
                          title: "{L_FIELD_EDIT_VALUE}"
                      }).click(function(){
                      $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                      $(this).prev().find('.ajax-profil_valid').attr({
                          alt: "{L_VALIDATE}",
                          title: "{L_VALIDATE}"
                      }).click(function(){
                          var content = new Array();
                          $(this).parent().find('[name]').each(function(){
                            var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                            if ( (type_special && $(this).is(':checked')) || !type_special )
                            {
                                content.push(new Array($(this).attr('name'), $(this).attr('value')));
                            }
                          });
                          var id_name = $(this).parents('[id^=field_id]').attr('id');
                          var id = id_name.substring(8, id_name.length);
                          $.post(
                            "{U_AJAX_PROFILE}",
                            {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                            function(data){
                                $.each(data, function(i, item){
                                  $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                });
                            },
                            "json"
                          );
                      });
                      $(this).remove();
                    });
                }
              },function()
              {
                if( $(this).find('.field_editable.invisible').is('span, div') )
                {
                    $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                    $(this).find('.ajax-profil_edit').remove();
                }
              });
          }
        });
    });
  //]]>
</script>

Mais ça n'a pas l'air de fonctionner, je n'ai peut-être pas bien compris...

[Phyliono]

up

[Lixyr]

Bonsoir,

Vous devez mettre mon code dans votre code JavaScript ! (panneau > modules > pages JS)
Si possible dans le code JavaScript que vous avez déjà.

[Phyliono]

J’en ai plusieurs... Je ne sais pas lequel et juste à la suite en dessous ?

Je l'ai mis dans celui-ci : https://www.universiteuniverselle.com/32166.js

mais ça n'a pas l'air de fonctionner...

[Lixyr]

Bonjur,

Mettez le dans votre JS /99888 (attention il change de numéro à chaque édition), mais corrigez les fautes d'accolade avant, autrement ça ne fonctionnera pas.

[Phyliono]

Oui je ne vois pas à  quoi  ça correspond... et jeune vois pas de problème d'accolades...

[Phyliono]

Du coup je sais pas si c'est moi ou le code qui ne fonctionne pas...

[Lixyr]

Bonjour @Phyliono,

Ah, à priori l'erreur est dans votre template. Vous avez du HTML en brut dans le code JS qui n'est pas correctement lu par le template. Je vous conseille d'enlever votre JS personnalisé, et de le mettre dans un code JS.

- panneau > modules > gestion des codes JavaScript
- création d'un nouveau JS (sauf si vous en avez déjà un pour le profil, auquel cas éditez-le).

Rajoutez :

Code:

jQuery(function () {
 
  // on indique le chemin vers la balise qui contient les champs des profils
  // et l'élement html qui contient notre élement déclencheur
  var $chemin = ".profile_row2 .profile_row5 .infos-posteur",
      $eltParent = '.profile_row1';
 
  // On parcourt chaque champs des profils
  $($chemin).each(function(index) {
    // On récupére le contenu html de ces champs
    var champs ;
    if($(this).find('.field_id-4 > td > div > .profile_points > span > span').length){
      champs = $(this).find('.field_id-4 > td > div > .profile_points > span > span').html() ;
    }else{
      champs = $(this).find('.field_id-4').html() ;
    }
 
    // On teste si le champ correspond aux blocs qu'on veut isoler
    // pour info || signifie "ou"
    if(champs == '<img src="https://i.servimg.com/u/f62/18/72/44/21/inscri16.pn" alt="Inscription&nbsp;"> Inscription&nbsp;'){
      // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
      $(this).parents($eltParent).find('.infos-supp').append(this);
 
    }
 
  });
 
  // on regarde si on est dans le profil simple
  if ($(".profile_row5").length) {
    var fieldid4 = "";
    $.each( $('tr[id*="field_id"]'), function() {
      // pour chaque champ de profil, si on trouve le champ numero 4
      if ($(this).attr("id") == "field_id-4") {
        // on recupère ses donnees
        fieldid4 = $(this).find("td").last().find(".field_uneditable").text();
        // on le rajoute sous la partie droite du profil
        $("td.profile_row1 .profile_row3 tbody").append('<tr align="center"><td><span class="profile_points gen"><img src="https://i.servimg.com/u/f77/18/72/44/21/inscri17.png" alt="Inscription"> Inscription : '+fieldid4+'</span></td></tr>');
        // et on supprime le champ
        $(this).remove();
      }
    });
  }
 
});

(je vous y ai mis des commentaires)

[Phyliono]

Ca semble fonctionner par contre, je ne peux plus valider un champ du profil directement... quand je clique sur le bouton de validation après avoir modifié, ça reste bloquer en mode édit...?

[Lixyr]

Bonjour,

J'ai amélioré le code JavaScript car au cas où vous aimeriez mettre autre chose, on ne peut pas modifier dans la colonne de droite.

Code:

jQuery(function () {
 
  // on indique le chemin vers la balise qui contient les champs des profils
  // et l'élement html qui contient notre élement déclencheur
  var $chemin = ".profile_row2 .profile_row5 .infos-posteur",
      $eltParent = '.profile_row1';
 
  // On parcourt chaque champs des profils
  $($chemin).each(function(index) {
    // On récupére le contenu html de ces champs
    var champs ;
    if($(this).find('.field_id-4 > td > div > .profile_points > span > span').length){
      champs = $(this).find('.field_id-4 > td > div > .profile_points > span > span').html() ;
    }else{
      champs = $(this).find('.field_id-4').html() ;
    }
 
    // On teste si le champ correspond aux blocs qu'on veut isoler
    // pour info || signifie "ou"
    if(champs == '<img src="https://i.servimg.com/u/f62/18/72/44/21/inscri16.pn" alt="Inscription&nbsp;"> Inscription&nbsp;'){
      // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
      $(this).parents($eltParent).find('.infos-supp').append(this);
 
    }
 
  });
  if ($(".profile_row5").length) {
    var fieldid4, label4, fullHTML, IDTR = "";
    $.each( $('tr[id*="field_id"]'), function() {
      if ($(this).attr("id") == "field_id-4") {
        IDTR = $(this).attr('id'); /* ID de la ligne recuperee */
        label4 = $(this).find("td").first().html(); /* contenu du label */
        fieldid4 = $(this).find("td").last().html(); /* contenu du champ */
        fullHTML = label4 + fieldid4; /* on fusionne le tout */
        /* on rajoute la ligne récupérée dans la colonne de droite */
        $("td.profile_row1 .profile_row3 tbody").append('<tr id="'+IDTR+'"><td>'+fullHTML+'</td></tr>');
        /* on supprime la ligne recuperee pour eviter les doublons */
        $(this).remove();
      }
    });
  }
 
});

Après, s'il y a un bug ça ne vient pas de moi, car le code fonctionne très bien de mon côté.

Par contre, rajoutez ceci dans votre CSS pour que ça s'affiche correctement :

Code:

.profile_row3 td > div {
    display: inline-block;
}

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Phyliono]

j'suis en train d'essayer désolé

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées..