Accents non conservés en modification de message sur version mobile

[Invité]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Installation du script
Lien du forum : http://leslamesdudauphine.forumactif.fr/forum

Description du problème

Bonjour à tous

Ce message fait suite à l'installation du script pour ajouter des actions sur la mobile des forums.

N'ayant jamais modifié mon template view_body version mobile, j'ai opter pour le copier/coller décrit dans la solution A pour l'installation du script.

Après validation du template, j'ai tenté de modifié un vieux message de ma corbeille pour vérifier le bon fonctionnement de la nouvelle fonctionnalité. Ce test a été fait depuis mon Android 5.1 sur Chrome.

J'ai eu la désagréable surprise de constater que les accents n'était pas conservés, mais convertit en UTF8 (je pense)....

Après signalement auprès de Vivi qui avait posté le tuto, nous avons tenté une modification du script indiquée par Ange Tuteur (le créateur du script).
J'ai donc remplacé

Code:

encodeURIComponent(escape(this.message)

par

Code:

encodeURIComponent(escape(this.message.value)

.

Malheuresement, nouvelle erreur : l'entière valeur du post modifié est maintenant remplacé par le message

Code:

[object HTMLTextAreaElement]

L'entraide étant interdite par MP, nous avons donc arrêté nos échange avec Vivi afin de poster ici au clair le problème....

D'autres personnes rencontrent-elles le même soucis que moi sur ce code ?

Merci d'avance pour votre aide !

[Ange Tuteur]

Bonjour olcost,

Remplacer le script dans étape 3 par :

Code:

<script type="text/javascript">//<![CDATA[
(function() {
  'ForumActif Mobile Actions';
  window.$FAMA = {
 
    lang : {
      title_reply : '<b>Répondre</b>',
      title_edit : '<b>Éditer le post</b>',
   
      status_progress : 'Envoi en cours...',
      status_done : function(url) {
        return 'Message enregistré avec succès. <a href="' + url + '">Cliquez ici</a> si vous n\'êtes pas redirigé.'
      },
      status_fail : 'Une erreur est survenue, veuillez réessayer plus tard.',
   
      delete_warning : 'Êtes-vous sûr de vouloir supprimer ce message ?',
      delete_done : 'Message supprimé avec succès.',
      delete_fail : 'Le message n\'a pas pu être supprimé, veuillez réessayer plus tard .',
   
      textarea_placeholder : 'Corps du message.',
      button_submit : 'Envoyer'
    },
 
    node : null,
 
    id : window.location.href.replace(/.*?\/t(\d+).*/, '$1'),
 
    store : new Object(),

    encode : function(string) {
      return encodeURIComponent(escape(string).replace(/%u[A-F0-9]{4}/g, function(match) {
        return '&#' + parseInt(match.substr(2), 16) + ';'
      })).replace(/%25/g, '%');
    },
 
    create : function(node, href) {
      var form = document.createElement('form');
      form.action = '/post';
      form.method = 'post';
      form.name = 'post';
      form.id = 'mobile_editor';
      form.innerHTML = '<div id="editor_title" class="post_header"></div><div id="text_box"><textarea placeholder="' + $FAMA.lang.textarea_placeholder + '" name="message"></textarea></div><div><input type="submit" value="' + $FAMA.lang.button_submit + '" name="post" class="defaultBtn"/><div id="post_status" style="display:none"></div></div><div id="mobile_data" style="display:none"></div>';
   
      form.onsubmit = function(e) {
        var t = this,
            data = $(t).serialize() + '&post=1',
            status = document.getElementById('post_status'),
            charSet = document.characterSet || document.charSet;
     
        if (charSet != 'UTF-8') {
          data = data.replace(/message=.*?&/, 'message=' + $FAMA.encode(this.message.value) + '&');
          if (this.subject) data = data.replace(/subject=.*?&/, 'subject=' + $FAMA.encode(this.subject.value) + '&');
        }
     
        t.post.style.display = 'none';
        status.style.display = 'block';
        status.className = 'post_progress';
        status.innerHTML = $FAMA.lang.status_progress;
     
        e.preventDefault();
     
        $.post('/post', data, function(d) {
          var redir = d.match(/.*content="\d;url=(.*?)".*/i, '$1'),
              url = (redir && redir[1]) ? redir[1].replace(/&amp;/g, '&') : window.location.pathname + (/mode=reply/.test(data) ? '?view=newest' : '');
           
          status.className = 'post_done';
          status.innerHTML = $FAMA.lang.status_done(url);
       
          window.setTimeout(function() {
            window.location.href = url;
          }, 1500);
       
        }).fail(function() {
          status.className = 'post_fail';
          status.innerHTML = $FAMA.lang.status_fail;
          t.post.style.display = '';
        });
      };
   
   
      $FAMA.node = form;
      $FAMA.change(node, href);
    },
 
    change : function(node, href) {
      node.appendChild($FAMA.node);
   
      if ($FAMA.node.mode) {
        var oldid = document.getElementById('old_post_id');
        if ($FAMA.node.mode.value == 'reply' && oldid)  {
          if (!$FAMA.store['post_' + oldid.value]) $FAMA.store['post_' + oldid.value] = new Object();
          $FAMA.store['post_' + oldid.value].reply = $FAMA.node.message.value;
        }
        else if ($FAMA.node.mode.value == 'editpost' && $FAMA.node.p) {
          if (!$FAMA.store['post_' + $FAMA.node.p.value]) $FAMA.store['post_' + $FAMA.node.p.value] = new Object();
          $FAMA.store['post_' + $FAMA.node.p.value].editpost = $FAMA.node.message.value;
        }
      }
   
      $FAMA.node.message.value = '';
   
      var mode = href.replace(/.*?mode=(.*)/, '$1'),
          pid = href.replace(/.*?p=(\d+).*/, '$1'),
          data = document.getElementById('mobile_data'),
          title = document.getElementById('editor_title');
   
   
      if (mode == 'quote') {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].reply) $FAMA.node.message.value = $FAMA.store['post_' + pid].reply;
        title.innerHTML = $FAMA.lang.title_reply;
        data.innerHTML = '<input id="old_post_id" type="hidden" value="' + pid + '"/><input type="hidden" name="mode" value="reply"/><input type="hidden" name="t" value="' + $FAMA.id + '"/>';
      } else {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].editpost) $FAMA.node.message.value = $FAMA.store['post_' + pid].editpost;
        title.innerHTML = $FAMA.lang.title_edit;
        data.innerHTML = '<input type="hidden" name="mode" value="editpost"/><input type="hidden" name="p" value="' + pid + '"/>';
      }

      $.get(href, function(d) {
        var titre = $('input[name="subject"]', d)[0],
            editer = $('input[name="edit_reason"]', d)[0];
       
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
        if (titre && titre.value) data.appendChild(titre);
        if (editer && editer.value) data.appendChild(editer);
      });
    }
 
  };
 
  for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
    if (/mobile-actions/.test(a[i].parentNode.parentNode.className)) {
      if (/mode=(?:quote|editpost)/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var node = this.parentNode.parentNode.parentNode, href = this.href;
          e.preventDefault();
          $FAMA.node ? $FAMA.change(node, href) : $FAMA.create(node, href);
        };
      } else if (/mode=delete/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var del = confirm($FAMA.lang.delete_warning);

          if (del) {
            $.post('/post', 'p=' + this.href.replace(/.*?p=(\d+).*/, '$1') + '&mode=delete&confirm=1', function(d) {
              alert($FAMA.lang.delete_done);
              window.location.reload();
            }).fail(function() {
              alert($FAMA.lang.delete_fail);
            });
          }
       
          e.preventDefault();
        };
      }
    }
  }
})();
//]]></script>

J'ai ajouté un vérifier pour le charset.

Code:

if (charSet != 'UTF-8') {
  data = data.replace(/message=.*?&/, 'message=' + $FAMA.encode(this.message.value) + '&');
  if (this.subject) data = data.replace(/subject=.*?&/, 'subject=' + $FAMA.encode(this.subject.value) + '&');
}

Attention : Cela devrait affecter les messages normaux. Les messages qu'ont été remplacé par "[object HTMLTextAreaElement]" devoir être restauré manuellement.

[Invité]

Désolé mais cela ne fonctionne pas pour moi (test effectué après avoir vider le cache et recharger la page)

Après essai je me rend compte que le message n'est pas mis a jour, que les modifications ne sont pas enregistrées

Au cas où, voici l'intégralité du code du template

viewTopic_body:

[Ange Tuteur]

C'est trés bizarre !

J'ai edité mon post :



hum.. remplacer le template par :

Code:

<style type="text/css">.mobile-actions{float:right;padding-top:3px}
.mobile-actions li{float:left;list-style:none}
#mobile_editor {text-align:center}
#text_box {padding:6px 5%}
#mobile_editor textarea {width:100%;height:100px}
#post_status {color:#000;background:#FFF;border:1px solid #2F6BC2;border-left-width:4px;margin:4px auto;padding:4px;width:90%}
#post_status.post_progress {background-color:#FFE;border-color:#990}
#post_status.post_done {background-color:#EFE;border-color:#090}
#post_status.post_fail {background-color:#FEE;border-color:#C33}
blockquote {display:block}</style>
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
   
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
        {
            if( $(this).is(":visible") )
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
        });
        }
    }
    catch(e) { }
 
  return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}">
  <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <div class="postbody">
            <div class="post_header">
              <li style="text-transform: capitalize; margin-top:12px; display:inline; float:left;">
                {L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}
              </li>
              <ul class="mobile-actions">
                <li><a href="#{postrow.displayed.U_POST_ID}"><img src="http://asf.escrime.free.fr/FORUM/img/button-test/link.png" alt="Lien du message" title="lien du message"></img></a></li>
                <li>{postrow.displayed.QUOTE_IMG}</li>
                <li>{postrow.displayed.EDIT_IMG}</li>
                <li>{postrow.displayed.DELETE_IMG}</li>
              </ul>
            </div>
                                <br class="clear"/>
                                <div class="content">
              <div>{postrow.displayed.MESSAGE}</div>
                    <!-- BEGIN switch_attachments -->
                    <div class="attachbox">
                        <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                        <dl class="attachments">
                          <!-- BEGIN switch_post_attachments -->
                              <dt>
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
                              <dd>
                                <!-- BEGIN switch_no_comment -->
                                <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                <!-- END switch_no_comment -->
                                <!-- BEGIN switch_no_dl_att -->
                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                <!-- END switch_no_dl_att -->
                  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
              </dd>
                          <!-- END switch_post_attachments -->
                        </dl>
                    </div>
                    <!-- END switch_attachments -->
            </div>
            <!-- {postrow.displayed.EDITED_MESSAGE} -->
        </div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
  <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<script type="text/javascript">//<![CDATA[
(function() {
  'ForumActif Mobile Actions';
  window.$FAMA = {
 
    lang : {
      title_reply : '<b>Répondre</b>',
      title_edit : '<b>Éditer le post</b>',
   
      status_progress : 'Envoi en cours...',
      status_done : function(url) {
        return 'Message enregistré avec succès. <a href="' + url + '">Cliquez ici</a> si vous n\'êtes pas redirigé.'
      },
      status_fail : 'Une erreur est survenue, veuillez réessayer plus tard.',
   
      delete_warning : 'Êtes-vous sûr de vouloir supprimer ce message ?',
      delete_done : 'Message supprimé avec succès.',
      delete_fail : 'Le message n\'a pas pu être supprimé, veuillez réessayer plus tard .',
   
      textarea_placeholder : 'Corps du message.',
      button_submit : 'Envoyer'
    },
 
    node : null,
 
    id : window.location.href.replace(/.*?\/t(\d+).*/, '$1'),
 
    store : new Object(),

    encode : function(string) {
      return encodeURIComponent(escape(string).replace(/%u[A-F0-9]{4}/g, function(match) {
        return '&#' + parseInt(match.substr(2), 16) + ';'
      })).replace(/%25/g, '%');
    },
 
    create : function(node, href) {
      var form = document.createElement('form');
      form.action = '/post';
      form.method = 'post';
      form.name = 'post';
      form.id = 'mobile_editor';
      form.innerHTML = '<div id="editor_title" class="post_header"></div><div id="text_box"><textarea placeholder="' + $FAMA.lang.textarea_placeholder + '" name="message"></textarea></div><div><input type="submit" value="' + $FAMA.lang.button_submit + '" name="post" class="defaultBtn"/><div id="post_status" style="display:none"></div></div><div id="mobile_data" style="display:none"></div>';
   
      form.onsubmit = function(e) {
        e.preventDefault();

        try {
          var t = this,
              data = $(t).serialize() + '&post=1',
              status = document.getElementById('post_status'),
              charSet = document.characterSet || document.charset;
     
          if (charSet != 'UTF-8') {
            if (t.message) data = data.replace(/message=.*?&/, 'message=' + $FAMA.encode(t.message.value) + '&');
            if (t.subject) data = data.replace(/subject=.*?&/, 'subject=' + $FAMA.encode(t.subject.value) + '&');
          }
     
          t.post.style.display = 'none';
          status.style.display = 'block';
          status.className = 'post_progress';
          status.innerHTML = $FAMA.lang.status_progress;
     
          $.post('/post', data, function(d) {
            var redir = d.match(/.*content="\d;url=(.*?)".*/i, '$1'),
                url = (redir && redir[1]) ? redir[1].replace(/&amp;/g, '&') : window.location.pathname + (/mode=reply/.test(data) ? '?view=newest' : '');
           
            status.className = 'post_done';
            status.innerHTML = $FAMA.lang.status_done(url);
       
            window.setTimeout(function() {
              window.location.href = url;
            }, 1500);
       
          }).fail(function() {
            status.className = 'post_fail';
            status.innerHTML = $FAMA.lang.status_fail;
            t.post.style.display = '';
          });
        } catch (err) {
          var status = document.getElementById('post_status');
          this.onsubmit = null;
          status.innerHTML = err + '<div style="text-align:center;">In case of error : <input type="submit" name="post" value="Force Submit"/></div>';
          status.className = 'post_fail';
          status.style.display = 'block';
        }
      };
   
   
      $FAMA.node = form;
      $FAMA.change(node, href);
    },
 
    change : function(node, href) {
      node.appendChild($FAMA.node);
   
      if ($FAMA.node.mode) {
        var oldid = document.getElementById('old_post_id');
        if ($FAMA.node.mode.value == 'reply' && oldid)  {
          if (!$FAMA.store['post_' + oldid.value]) $FAMA.store['post_' + oldid.value] = new Object();
          $FAMA.store['post_' + oldid.value].reply = $FAMA.node.message.value;
        }
        else if ($FAMA.node.mode.value == 'editpost' && $FAMA.node.p) {
          if (!$FAMA.store['post_' + $FAMA.node.p.value]) $FAMA.store['post_' + $FAMA.node.p.value] = new Object();
          $FAMA.store['post_' + $FAMA.node.p.value].editpost = $FAMA.node.message.value;
        }
      }
   
      $FAMA.node.message.value = '';
   
      var mode = href.replace(/.*?mode=(.*)/, '$1'),
          pid = href.replace(/.*?p=(\d+).*/, '$1'),
          data = document.getElementById('mobile_data'),
          title = document.getElementById('editor_title');
   
   
      if (mode == 'quote') {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].reply) $FAMA.node.message.value = $FAMA.store['post_' + pid].reply;
        title.innerHTML = $FAMA.lang.title_reply;
        data.innerHTML = '<input id="old_post_id" type="hidden" value="' + pid + '"/><input type="hidden" name="mode" value="reply"/><input type="hidden" name="t" value="' + $FAMA.id + '"/>';
      } else {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].editpost) $FAMA.node.message.value = $FAMA.store['post_' + pid].editpost;
        title.innerHTML = $FAMA.lang.title_edit;
        data.innerHTML = '<input type="hidden" name="mode" value="editpost"/><input type="hidden" name="p" value="' + pid + '"/>';
      }

      $.get(href, function(d) {
        var titre = $('input[name="subject"]', d)[0],
            editer = $('input[name="edit_reason"]', d)[0];
       
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
        if (titre && titre.value) data.appendChild(titre);
        if (editer && editer.value) data.appendChild(editer);
      });
    }
 
  };
 
  for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
    if (/mobile-actions/.test(a[i].parentNode.parentNode.className)) {
      if (/mode=(?:quote|editpost)/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var node = this.parentNode.parentNode.parentNode, href = this.href;
          e.preventDefault();
          $FAMA.node ? $FAMA.change(node, href) : $FAMA.create(node, href);
        };
      } else if (/mode=delete/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var del = confirm($FAMA.lang.delete_warning);

          if (del) {
            $.post('/post', 'p=' + this.href.replace(/.*?p=(\d+).*/, '$1') + '&mode=delete&confirm=1', function(d) {
              alert($FAMA.lang.delete_done);
              window.location.reload();
            }).fail(function() {
              alert($FAMA.lang.delete_fail);
            });
          }
       
          e.preventDefault();
        };
      }
    }
  }
})();
//]]></script>

Si une erreur se produit, il affiche le message suivant :

[Invité]

Ça marche !

je viens de faire le test depuis mon téléphone, et pas de problème !

Merci beaucoup pour ta solution !