Éditer le titre depuis la liste des sujets

[Matriochka]

Rappel du premier message :

Bonjour à tous,

Dans le même ordre d’idée mon précédent topic : outils de modération depuis la liste des sujets, j’aimerais maintenant apprendre à créer le script qui me permettra, si possible, de modifier le titre d’un sujet directement depuis la liste des sujets.

Donc dans l’idéal, j’aimerais avoir un nouveau bouton à côté de ces boutons (pas très visibles car leur opacité a été réduite) :


Sur lequel je clique pour faire apparaître à la place du titre existant une zone de texte, où je pourrai effectuer une modification :


Avec éventuellement un petit bouton juste à droite de la zone de saisie pour valider la modification. Un peu à l’image des champs modifiables depuis le profil, au final…

Voilà à peu près ce que j’aimerais réaliser afin de fignoler la personnalisation de cette liste de sujets. Merci à tous ceux qui prendront le temps de lire ce message et surtout à ceux qui se pencheront sur le sujet

[Matriochka]

Ah, merci Arlem
J’ai repris tout ça de A à Z et maintenant, tout fonctionne au poil chez moi. Nickel !

Pour le petit temps d’attente, il y a moyen qu’il n’y soit plus, ou bien on est obligés de faire ainsi ? Si ça n’est pas possible, ça n’est pas un problème du tout, je chipote juste un peu pour t’ennuyer, huhu

[Arlem]

Le temps d'attente à lieu ici car il faut que les différentes requêtes (envoi, vérification que l'envoi à réussi..) s’exécutent. On peut le faire sans temps de latence mais à ce moment là il sera modifié même si l'envoi a échoué.

Avec ce script, l'actualisation est instantanée et on ajoute un petit "check" quand l'envoi est réussi, ça permet de faire un compromis entre les deux (je colle le code à coller après les variables des images etc. que tu n'aies pas à modifier à nouveau tous les liens) :

Code:

$(function() {
  /* Si l'utilisateur a les droits de modération, on affiche les outils de modération */
  if($('#is_allowed:contains("modérer")').length > 0) {
      $('.mod_tools').each(function() {
        /* Si le topic est verrouillé on affiche le bouton déverrouiller */
        if($(this).children('img').attr('alt').slice(13,19) == "verrou") {
            $(this).append('<img src="'+edit_img+'" class="edit_topic"><img src="'+unlock_img+'" class="mod_unlock"/><img src="'+trash_img+'" class="mod_trash"/><img src="'+delete_img+'" class="mod_delete"/>');
        }
        /* Sinon on affiche le bouton verrouiller */ else {
            $(this).append('<img src="'+edit_img+'" class="edit_topic"><img src="'+lock_img+'" class="mod_lock"/><img src="'+trash_img+'" class="mod_trash"/><img src="'+delete_img+'" class="mod_delete"/>');
        }
      }
      );
  }
  /* Clic sur le bouton déverrouiller */
  $('.mod_unlock').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        $.get('/modcp.forum?t='+$(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1')+'&mode=unlock&sid='+cookie);
        $(this).addClass('mod_lock').removeClass('mod_unlock');
        $(this).attr('src',lock_img);
      }
  }
  );
  /* Clic sur le bouton verrouiller */
  $('.mod_lock').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        $.get('/modcp.forum?t='+$(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1')+'&mode=lock&sid='+cookie);
        $(this).addClass('mod_unlock').removeClass('mod_lock');
        $(this).attr('src',unlock_img);
      }
  }
  );
  /* Clic sur le bouton corbeille */
  $('.mod_trash').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        $.get('/modcp.forum?t='+$(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1')+'&mode=trash&sid='+cookie);
        $(this).closest('tr').remove();
      }
  }
  );
  /* Clic sur le bouton supprimer */
  $('.mod_delete').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        // prendre le tid
        var tid= $("input[name=tid]:first").val() ||  ($("a[href*='&tid=']:first").attr("href")||"").replace(/^.*&tid=([a-f0-9]*)?.*$/,"$1");
        // prendre le fid
        var fid= location.href.replace(/^.*\/f([0-9]+)[p-].*$/,'$1');
        // prendre le topic_id
        var topic_id= $(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1');
        $.post("/modcp?tid="+tid, {
            f:fid, t:topic_id, tid: tid, mode:"delete",confirm:"1"
        }
        );
        $(this).closest('tr').remove();
      }
  }
  );
  /* Clic sur le bouton edit */
  $('.edit_topic').click(function() {
      $(this).closest('tr').find('a.topictitle').hide().after('<input type="text" id="new_title" value="'+$(this).closest('tr').find('a.topictitle').text()+'"/><input type="submit" class="edit_title"/>');
  }
  );
  $('.edit_title').live('click', function() {
  var temp = $(this);
              temp.closest('tr').find('a.topictitle').show().text($('#new_title').val());
              temp.parent().find('#new_title').hide();
              temp.parent().find('.edit_title').hide();
      /* saisie d'une page du sujet */
      $.get($(this).closest('tr').find('a.topictitle').attr('href'), function(c) {
        /* prendre identifiant du premier message */
        var first_post_id = $(".post a[name]", c).first().attr("name");
        /* si pas on fait rien */
        if(!first_post_id) {
            return
        }
        /* saisie du formulaire d'édition du message */
        $.get("/post?p=" + first_post_id + "&mode=editpost", function(c) {
            /* envoi de ce formulaire en ayant changé le titre */
            $.post("/post", $('form[name="post"]', c).serialize().replace(/(^|&)subject=[^&]+(&|$)/, "$1subject=" + encodeURIComponent($('#new_title').val()) + "$2") + "&post=1",function(c) {
              /* test pour voir si ça s'est bien passé */
              if(c.indexOf('Message enregistré avec succès')!=-1) {
temp.after('<img src="http://nsa31.casimages.com/img/2013/02/10/130210020722226189.png" alt="sent"/>');
              }
            }
            )
        }
        )
      });
});
});

[Matriochka]

Ah, c’est parfait, je te remercie ! Vraiment nickel, Arlem

Alors, juste un dernier petit truc avec ce bout de script : du coup, quand j’édite deux fois coup sur coup sans actualiser, la petite icône de check s’affiche deux fois à la suite. Est-ce qu’il y a moyen de remédier à ça ou non ?

[Foufouw']

Salut, je vais faire mon gros flemmard mais pourriez vous poster le script complet ainsi que quelques explications (Ou même actualiser le post d'Arlem sur l'autre topic) ?

Merci d'avance. *Le Mec d'une Grande Aide*...

[Matriochka]

C’est un peu malvenu de se ramener comme ça en demandant un code complet alors que tout est donné sur la page précédente…

Tiens, Arlem a posté un version "flemmard" ici :
https://forum.forumactif.com/t345178-editer-le-titre-depuis-la-liste-des-sujets#2952488

Si ça ne te convient pas, tu peux faire comme Xoumi et moi-même :faire un effort pour reprendre chaque message du sujet

[Foufouw']

C'est ce que j'étais en train de faire au final. mais merci quand même et désolé ._.

[Arlem]

Yep ça doit être faisable, tu voudrais faire quoi, qu'il disparaisse un court temps puis réapparaisse quand il est envoyé à nouveau ?

[Matriochka]

Oui voilà, ce serait pas mal cette alternative

[Bipo]

Hello les amis,

Tout d'abord, merci Arlem pour les modifications que tu as apporté. Le script fonctionne à 90% chez moi ! J'ai découvert un bogue en appliquant le script sur mon forum : un problème d'encodage.

Mon forum (cf. mon profil) a été créé en 2005 avec un charset windows-1252. Quand je valide l'édition d'un titre qui contient des accents, le titre et le premier message du sujet à un problème d'encodage. Les accents deviennent des @"*/, etc. Je n'ai pas ce problème sur mon forum de test qui a un charset UTF8.

Du coup, j'ai suspendu l'édition des titres car j'ai bousillé deux sujets comme ça que je dois entièrement reprendre à la main Je ne sais pas si une solution existe

Bref, je préviens au cas où du problème !
Bonne soirée.
Xoum'

[Ea]

après moult essais, pour un forum non-utf8 ça semble fonctionner en mettant plutôt que :

Code:

/* envoi de ce formulaire en ayant changé le titre */
$.post("/post", $('form[name="post"]', c).serialize().replace(/(^|&)subject=[^&]+(&|$)/, "$1subject=" + encodeURIComponent('nouveau titre') + "$2") + "&post=1",function(c){

ceci :

Code:

/* récupération du formulaire */
var fields= $('form[name="post"]', c).serializeArray();
for(i=0;i<fields.length;i++)
{
    /* changement du titre */
    if(fields[i].name=="subject") fields[i].value= 'nouveau titre éééé \\o/';
    fields[i]=escape(fields[i].name)+'='+escape(fields[i].value)
}

/* envoi formulaire d'édition */
$.post("/post", fields.join('&')+"&post=1",function(c){

quand on utilise le script précédent, il me semble qu'on a les données qui sont encodées de windows-1252 à utf-8, donc sous linux il devrait suffire de faire :

Code:

iconv -t cp1252 -f utf-8 fichier_bad.txt > resultat.txt

edit : et si pas linux, cette page le fait et affiche le résultat

[Matriochka]

Je remonte un petit peu

[Matriochka]

Je remonte à nouveau

[Matriochka]

Hop, je remonte encore

[Matriochka]

Je remonte.

[Matriochka]

Je remonte.

[Matriochka]

Je remonte (hé oui, je suis tenace).

[Ea]

Quel est le script et qu'est-ce qu'il devrait faire plutôt que ce qu'il fait ?

Cordialement.

[Bipo]

après moult essais, pour un forum non-utf8 ça semble fonctionner en mettant plutôt que :

Code:

/* envoi de ce formulaire en ayant changé le titre */
$.post("/post", $('form[name="post"]', c).serialize().replace(/(^|&)subject=[^&]+(&|$)/, "$1subject=" + encodeURIComponent('nouveau titre') + "$2") + "&post=1",function(c){

ceci :

Code:

/* récupération du formulaire */
var fields= $('form[name="post"]', c).serializeArray();
for(i=0;i<fields.length;i++)
{
    /* changement du titre */
    if(fields[i].name=="subject") fields[i].value= 'nouveau titre éééé \\o/';
    fields[i]=escape(fields[i].name)+'='+escape(fields[i].value)
}

/* envoi formulaire d'édition */
$.post("/post", fields.join('&')+"&post=1",function(c){

quand on utilise le script précédent, il me semble qu'on a les données qui sont encodées de windows-1252 à utf-8, donc sous linux il devrait suffire de faire :

Code:

iconv -t cp1252 -f utf-8 fichier_bad.txt > resultat.txt

edit : et si pas linux, cette page le fait et affiche le résultat

Salut Ea,

Alors, je viens d'effectuer la correction et la fonction principale du script fonctionne. Cependant, quand le titre est modifié après avoir cliqué sur "envoyer" ► en actualisant la page, on a "Nouveau titre éééééé" ... Je suppose que la machine est enrayée non ?

Xoum'.

---

Sinon, Matriochka posait cette question :

Ah, c’est parfait, je te remercie ! Vraiment nickel, Arlem

Alors, juste un dernier petit truc avec ce bout de script : du coup, quand j’édite deux fois coup sur coup sans actualiser, la petite icône de check s’affiche deux fois à la suite. Est-ce qu’il y a moyen de remédier à ça ou non ?

[Matriochka]

Oui voilà, merci Xoumi

Le script au cas où :

Code:

/* adresse img modération lock */
var lock_img = "http://img11.hostingpics.net/pics/689379lock.png";
/* adresse img modération unlock */
var unlock_img = "http://img11.hostingpics.net/pics/269944lockunlock.png";
/* adresse img modération corbeille */
var trash_img = "http://img11.hostingpics.net/pics/781353bin.png";
/* adresse img modération supprimer */
var delete_img = "http://img11.hostingpics.net/pics/204355cross.png";
/* adresse img modération edit */
var edit_img= "http://img11.hostingpics.net/pics/630345documentpencil.png";


/* adresse cookie contenant le sid (ne pas éditer) */
var cookie = my_getcookie('fa_nara_jdrforum_com_sid'+location.hostname.replace(/\./g,'_')+'_sid');


$(function() {
  /* Si l'utilisateur a les droits de modération, on affiche les outils de modération */
  if($('#is_allowed:contains("modérer")').length > 0) {
      $('.mod_tools').each(function() {
        /* Si le topic est verrouillé on affiche le bouton déverrouiller */
        if($(this).children('img').attr('alt').slice(13,19) == "verrou") {
            $(this).append('<img src="'+edit_img+'" class="edit_topic"><img src="'+unlock_img+'" class="mod_unlock"/><img src="'+trash_img+'" class="mod_trash"/><img src="'+delete_img+'" class="mod_delete"/>');
        }
        /* Sinon on affiche le bouton verrouiller */ else {
            $(this).append('<img src="'+edit_img+'" class="edit_topic"><img src="'+lock_img+'" class="mod_lock"/><img src="'+trash_img+'" class="mod_trash"/><img src="'+delete_img+'" class="mod_delete"/>');
        }
      }
      );
  }
  /* Clic sur le bouton déverrouiller */
  $('.mod_unlock').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        $.get('/modcp.forum?t='+$(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1')+'&mode=unlock&sid='+cookie);
        $(this).addClass('mod_lock').removeClass('mod_unlock');
        $(this).attr('src',lock_img);
      }
  }
  );
  /* Clic sur le bouton verrouiller */
  $('.mod_lock').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        $.get('/modcp.forum?t='+$(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1')+'&mode=lock&sid='+cookie);
        $(this).addClass('mod_unlock').removeClass('mod_lock');
        $(this).attr('src',unlock_img);
      }
  }
  );
  /* Clic sur le bouton corbeille */
  $('.mod_trash').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        $.get('/modcp.forum?t='+$(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1')+'&mode=trash&sid='+cookie);
        $(this).closest('tr').remove();
      }
  }
  );
  /* Clic sur le bouton supprimer */
  $('.mod_delete').click(function() {
      if (confirm("Êtes-vous sûr ?")) {
        // prendre le tid
        var tid= $("input[name=tid]:first").val() ||  ($("a[href*='&tid=']:first").attr("href")||"").replace(/^.*&tid=([a-f0-9]*)?.*$/,"$1");
        // prendre le fid
        var fid= location.href.replace(/^.*\/f([0-9]+)[p-].*$/,'$1');
        // prendre le topic_id
        var topic_id= $(this).closest('tr').find('a.topictitle').attr('href').replace(/^\/t([1-9][0-9]*)[p-].*$/,'$1');
        $.post("/modcp?tid="+tid, {
            f:fid, t:topic_id, tid: tid, mode:"delete",confirm:"1"
        }
        );
        $(this).closest('tr').remove();
      }
  }
  );
  /* Clic sur le bouton edit */
  $('.edit_topic').click(function() {
      $(this).closest('tr').find('a.topictitle').hide().after('<input type="text" id="new_title" value="'+$(this).closest('tr').find('a.topictitle').text()+'"/><input type="submit" class="edit_title"/>');
  }
  );
  $('.edit_title').live('click', function() {
  var temp = $(this);
              temp.closest('tr').find('a.topictitle').show().text($('#new_title').val());
              temp.parent().find('#new_title').hide();
              temp.parent().find('.edit_title').hide();
      /* saisie d'une page du sujet */
      $.get($(this).closest('tr').find('a.topictitle').attr('href'), function(c) {
        /* prendre identifiant du premier message */
        var first_post_id = $(".post a[name]", c).first().attr("name");
        /* si pas on fait rien */
        if(!first_post_id) {
            return
        }
        /* saisie du formulaire d'édition du message */
        $.get("/post?p=" + first_post_id + "&mode=editpost", function(c) {
            /* envoi de ce formulaire en ayant changé le titre */
            $.post("/post", $('form[name="post"]', c).serialize().replace(/(^|&)subject=[^&]+(&|$)/, "$1subject=" + encodeURIComponent($('#new_title').val()) + "$2") + "&post=1",function(c) {
              /* test pour voir si ça s'est bien passé */
              if(c.indexOf('Message enregistré avec succès')!=-1) {
temp.after('<img src="http://nsa31.casimages.com/img/2013/02/10/130210020722226189.png" alt="sent"/>');
              }
            }
            )
        }
        )
      });
});
});

[Ea]

@xoumi : dans le code que je dis de remplacer, le titre était remplacé par "nouveau titre"

enfin il faut insérer le bout de code dans le code qui permet de choisir le nouveau titre, ça différera suivant la façon d'indiquer un nouveau titre, par exemple on pourrait remplacer 'nouveau titre éééé \\o/' par :

Code:

prompt("Nouveau titre : ",fields[i].value)

ou si c'est dans le même style que macema, remplacer 'nouveau titre éééé \\o/' par temp.parent().find('#new_title').val()

@macema : on pourrait retirer le V ou mettre quelque chose comme ça :

Code:

  /* Clic sur le bouton edit */
  $('.edit_topic').click(function() {
      $(this).closest('tr').find('.title_edited').remove()
      if($(this).closest('tr').find('a.topictitle').is(":visible")) {
        $(this).closest('tr').find('a.topictitle').hide();
        if($(this).closest('tr').find('#new_title').length) {
          $(this).closest('tr').find('#new_title,.edit_title').show()
        }
        else {
          $(this).closest('tr').find('a.topictitle').after('<input type="text" id="new_title" value="'+$(this).closest('tr').find('a.topictitle').text()+'"/><input type="button" value="Renommer" class="edit_title"/>');
        }
      }
      else {
        $(this).closest('tr').find('a.topictitle').show();
        $(this).closest('tr').find('#new_title,.edit_title').hide()
    }
  }
  );
  $('.edit_title').live('click', function() {
      var temp = $(this);
      temp.closest('tr').find('a.topictitle').show().text($('#new_title').val());
      temp.parent().find('#new_title').hide();
      temp.parent().find('.edit_title').hide();
      temp.parent().find('.title_edited').remove()
      /* saisie d'une page du sujet */
      $.get($(this).closest('tr').find('a.topictitle').attr('href'), function(c) {
        /* prendre identifiant du premier message */
        var first_post_id = $(".post a[name]", c).first().attr("name");
        /* si pas on fait rien */
        if(!first_post_id) {
            return
        }
        /* saisie du formulaire d'édition du message */
        $.get("/post?p=" + first_post_id + "&mode=editpost", function(c) {
            /* envoi de ce formulaire en ayant changé le titre */
            $.post("/post", $('form[name="post"]', c).serialize().replace(/(^|&)subject=[^&]+(&|$)/, "$1subject=" + encodeURIComponent(temp.parent().find('#new_title').val()) + "$2") + "&post=1",function(c) {
              temp.parent().find('.title_edited').remove()
              /* test pour voir si ça s'est bien passé */
              if(c.indexOf('Message enregistré avec succès')!=-1) {
                temp.after('<img src="http://nsa31.casimages.com/img/2013/02/10/130210020722226189.png" alt="sent" class="title_edited" />');
              }
              else {
                temp.after('<span class="title_edited">[erreur]</span>');
              }
            }
            )
        }
        )
      });

à la place de :

Code:

 /* Clic sur le bouton edit */
  $('.edit_topic').click(function() {
      $(this).closest('tr').find('a.topictitle').hide().after('<input type="text" id="new_title" value="'+$(this).closest('tr').find('a.topictitle').text()+'"/><input type="submit" class="edit_title"/>');
  }
  );
  $('.edit_title').live('click', function() {
  var temp = $(this);
              temp.closest('tr').find('a.topictitle').show().text($('#new_title').val());
              temp.parent().find('#new_title').hide();
              temp.parent().find('.edit_title').hide();
      /* saisie d'une page du sujet */
      $.get($(this).closest('tr').find('a.topictitle').attr('href'), function(c) {
        /* prendre identifiant du premier message */
        var first_post_id = $(".post a[name]", c).first().attr("name");
        /* si pas on fait rien */
        if(!first_post_id) {
            return
        }
        /* saisie du formulaire d'édition du message */
        $.get("/post?p=" + first_post_id + "&mode=editpost", function(c) {
            /* envoi de ce formulaire en ayant changé le titre */
            $.post("/post", $('form[name="post"]', c).serialize().replace(/(^|&)subject=[^&]+(&|$)/, "$1subject=" + encodeURIComponent($('#new_title').val()) + "$2") + "&post=1",function(c) {
              /* test pour voir si ça s'est bien passé */
              if(c.indexOf('Message enregistré avec succès')!=-1) {
temp.after('<img src="http://nsa31.casimages.com/img/2013/02/10/130210020722226189.png" alt="sent"/>');
              }
            }
            )
        }
        )
      });

j'ai juste modifié un peu pour ajouter un [erreur] si il y a une erreur à la place du V ( par exemple si la longueur de titre minimum est 10 et qu'on met un titre de 3 caractères ), qu'en appuyant sur renommer et l'icône d'édition ça supprime le V ou le [erreur] puis qu'on puisse appuyer plusieurs fois sur l'icône d'édition ( afin d'ouvrir/fermer l'<input> ( avant ça affichait juste plusieurs <input> )

[Matriochka]

@macema :

Moi c’est Matriochka

Merci beaucoup, c’est résolu pour moi.

Je laisse ouvert pour Xoumi, et je passerai l’icône dès que ce sera bon pour lui aussi.

edit ea : j'ai le ma de bon

[Bipo]

C'est bon pour moi aussi Matriochka !

[Matriochka]

Parfait Dans ce cas, je clôture le sujet.

Merci à ceux qui ont pris la peine de nous aider