Système d'alerte en temps réel ne fonctionne pas

[lolo86]

Bonjour.
j'essaie d'installer le système d'alerte en temps réel j'ai suivi le topic a la lettre mais ça fonctionne pas sur mon forum.
qui est en phpbb2.
lien de mon forum: https://www.forumclub505.com/

voici le code de la page HTML

Code:

<style>
  .panel_notif_global {
      background: #dfdfe1;
      box-shadow: 0px 3px 2px #aab2bd;
      border-radius: 2px;
      margin: 0 auto;
      width: 40%;
  }

  .panel_notif_header_global {
      background-color: #38445A;
      border-radius: 2px;
      color: #fff;
      height: 30px;
      line-height: 1.9em;
      padding: 3px;
      padding-left: 11px;
      text-transform: uppercase;
  }

  .panel_notif_bottom_global {
      display: block;
      height: 30px;
      line-height: 2.5em;
      margin-top: 8px;
      text-align: center;
  }

  .control-label {
      color:#666;
      display: block;
      float: left;
      font-size: 14px;
      line-height: 2.4em;
      text-align: left;
      width: 40%;
  }

  .form-control {
      width: 90%;
      padding: 6px 12px!important;
      font-size: 14px!important;
      line-height: 1.42857143!important;
      color: #555!important;
      background-color: #fff!important;
      background-image: none!important;
      border: 1px solid #ccc!important;
      border-radius: 4px!important;
      -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%)!important;
      box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%)!important;
      -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s!important;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s!important;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s!important;
  }

  .help-block {
      color: #737373;
      display: block;
      font-size:10px;
      margin-top: 5px;
      margin-bottom: 10px;
  }

  .form-horizontal.style-form .form-group {
      border-bottom: 1px solid #eff2f7;
      display: grid;
      margin-bottom: 15px;
      margin-top: 15px;
      padding-bottom: 15px;
      padding-left: 15px;
  }
 
  #comptalert_message{
  color:#666;
  font-size:10px;
  }

  .correct {
      color: #4ECDC4!important;
  }

  .incorrect {
      color: #FF6B6B!important;
  }

  .btn-send {
      color: #fff !important;
      background-color: #ed5565 !important;
      border-color: #da4453 !important;
      border: 1px solid transparent;
      border-radius: 3px;
      color: white;
      cursor: pointer;
      display: inline-block;
      font-family: "Helvetica";
      font-size: 13px;
      font-weight: 600;
      line-height: 1.42857;
      margin-bottom: 0;
      margin-left: 4px;
      padding: 4px 10px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      vertical-align: middle;
      white-space: normal;
  }

  .progress-bar {
      height: 12px;
      margin-bottom: 20px;
      margin-top:20px;
      overflow: hidden;
      background-color: #e0dddd;
      border-radius: 9px;
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  }

  .progress-bar span {
      float: left;
      height: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      background-color: #f0ad4e;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
      -webkit-transition: width .6s ease;
      -o-transition: width .6s ease;
      transition: width .6s ease;
  }

  .result {
      font-size: 25px;
      max-width: 540px;
      margin: auto;
      padding-top: 80px;
      text-align: center;
  }

  .result.done {
      background: url(https://cdn2.iconfinder.com/data/icons/color-svg-vector-icons-part-2/512/ok_check_yes_tick_accept_success-64.png) no-repeat top center;
  }

  .result.fail {
      background: url(https://cdn2.iconfinder.com/data/icons/color-svg-vector-icons-part-2/512/wrong_table_no_navigator_formula-64.png) no-repeat top center;
  }
</style><script type="text/javascript">
  $(document).ready(function(e) {
  $('#alert_message').keyup(function() {
  var nombreCaractere = $(this).val();
  var nombreMots = jQuery.trim($(this).val()).split(' ').length;
  if($(this).val() === '') {
  nombreMots = 0;
  }
  var msg = ' ' + nombreMots + ' mot(s) | ' + (nombreCaractere.match(/\S/g)||[]).length + ' Caractère(s) / 200 maximum conseillés';
  $('#comptalert_message').text(msg);
  if ((nombreCaractere.match(/\S/g)||[]).length >= 200) { $('#comptalert_message').addClass("incorrect"); } else { $('#comptalert_message').addClass("correct").removeClass("incorrect");}
  })
 
});
</script><script type="text/javascript">
  function alertlien(that) {
  if (that.value == "En savoir plus") {
  document.getElementById("lienOK").style.display = "block";
  } else {
  document.getElementById("lienOK").style.display = "none";
  }
}
    function imagelien(that) {
  if (that.value == "Non") {
  document.getElementById("imageOK").style.display = "none";
  } else {
  document.getElementById("imageOK").style.display = "block";
  }
}
</script>
<div class="panel_notif_global" style="display:block;">
  
 <div class="panel_notif_header_global">
    Envoyer une notification en temps réel              
 </div>
  
 <div id="panel_notif_form">
    
 <form id="form" class="form-horizontal style-form">
      
 <div class="form-group">
        <label class="control-label" for="alert_name">Titre de la notification</label>          <input required="" placeholder="Soirée ChatBox !" id="alert_name" name="alert_name" class="form-control" type="text" />          <span class="help-block">Choisissez un titre court et évocateur.</span>      
 </div>
      
 <div class="form-group">
        <label class="control-label" for="alert_message">Contenu de la notification</label>        <textarea required="required" placeholder="N'oubliez pas qu'une soirée ChatBox est organisée le samedi 17 juillet à 21h00. Venez nombreux." id="alert_message" name="alert_message" rows="7" class="form-control" type="text"></textarea>        
 <div style="line-height: 1.5em;" align="center" id="comptalert_message">
 0 mot(s) | 0 Caractère(s) / 200 maximum conseillés
 </div>
        <span class="help-block">La mise en forme du message ne supporte que le <span style="color: rgb(255, 107, 107);"><strong>HTML</strong></span>. Par conséquent, le BBCode est <span style="text-decoration: underline;">interdit</span>.<br />        Soyez bref dans le message à afficher. Prévoyez entre 150 à 200 caractères.</span>      
 </div>
      
 <div class="form-group">
        <label class="control-label" for="alert_lien">Lien de la notification</label>        <select style="width: 15%;" onchange="alertlien(this);" name="alert_lien" id="alert_lien" class="form-control" type="text">
          <option value="">Non</option>
          <option value="En savoir plus">Oui</option></select>          
 <div style="display:none;" id="lienOK">
 <input placeholder="https://" id="alert_lienOK" name="alert_lienOK" class="form-control" type="text" />            <span class="help-block">Vous pouvez renseigner le lien d'un sujet sur lequel votre communauté peut consulter.</span>
 </div>
      
 </div>
        
 <div class="form-group">
        <label class="control-label" for="alert_image">Image de la notification</label>        <select style="width: 15%;" onchange="imagelien(this);" class="form-control" type="text">
          <option value="Non">Non</option>
          <option value="Oui">Oui</option></select>          
 <div style="display:none;" id="imageOK">
 <input placeholder="https://" id="alert_image" name="alert_image" class="form-control" type="text" />          <span class="help-block">Les images sont automatiquement redimensionnées : 50px de hauteur et 50px en largeur.</span>
 </div>
      
 </div>
      
 <div class="panel_notif_bottom_global">
        
 <button id="send" class="btn-send">
 Envoyer la notification
 </button>
      
 </div>
    
 </form>
  
 </div>
</div><br />
<div class="result">
</div>
<div class="progress-bar">
 <span style="width: 200px;">
 </span>
</div>
 <br /><br /><script type="text/javascript">
var _param = function(obj, modifier) {
        var buildParams = function(prefix, obj, traditional, add) {
            var name;
            if (jQuery.isArray(obj)) {
                jQuery.each(obj, function(i, v) {
                    if (traditional || /\[\]$/.test(prefix)) {
                        add(prefix, v);
                    } else {
                        buildParams(prefix + "[" + (typeof v === "object" ? i : "") + "]", v, traditional, add);
                    }
                });
            } else {
                if (!traditional && jQuery.type(obj) === "object") {
                    for (name in obj) {
                        buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
                    }
                } else {
                    add(prefix, obj);
                }
            }
        };
        var prefix, s = [],
            add = function(key, value) {
                var nvalue;
                if (modifier) {
                    if ((nvalue = modifier(key, value)) === null) {
                        return;
                    } else if (nvalue !== undefined) value = nvalue
                }
                value = jQuery.isFunction(value) ? value() : value == null ? "" : value;
                s[s.length] = _encodeURIComponent(key) + "=" + _encodeURIComponent(value);
            };
        if (jQuery.isArray(obj) || obj.jquery && !jQuery.isPlainObject(obj)) {
            jQuery.each(obj, function() {
                add(this.name, this.value);
            });
        } else {
            for (prefix in obj) {
                buildParams(prefix, obj[prefix], undefined, add);
            }
        }
        return s.join("&").replace(/%20/g, "+");
    },
    _encodeURIComponent = function(str) {
        if ((document.charset ? document.charset : document.characterSet).toLowerCase() != "utf-8") {
            return encodeURIComponent(escape(str).replace(/%u[A-F0-9]{4}/g, function(x) {
                return "&#" + parseInt(x.substr(2), 16) + ";";
            })).replace(/%25/g, "%");
        } else {
            return encodeURIComponent(str);
        }
    };
$('.progress-bar').hide();
$('.result').hide();
$('form#form').submit(function() {
  var message = "<strong>Titre de la notification :</strong> " + document.getElementById('alert_name').value + "<br /><br /><strong>Message :</strong> " + document.getElementById('alert_message').value + "<br /><br /><strong>Pour en savoir plus (si lien renseigné) :</strong>" + document.getElementById('alert_lienOK').value + "<br /><br />[hide]
[code]<div class='realTime_alert' style='display: block; background-image: url("+document.getElementById('alert_image').value+");'><span class='close'>×</span><span class='alerttitle'>" + document.getElementById('alert_name').value + "</span><br /><span class='inner'>" + document.getElementById('alert_message').value + "</span><br /><span class='alertlien'><a target='_blank' href=" + document.getElementById('alert_lienOK').value + ">" + document.getElementById('alert_lien').value + "</a></span></div>[/code]
[/hide]";
    $('.progress-bar').show();
    $('.panel_notif_global').hide();
    if ($('.progress-bar span').css('width') != '100%') {
        setTimeout("$('.progress-bar span').css('width', '80%');", 100);
    }
    $.post("/post", _param({
            mode: "reply",
            t: realTime_alert(),
            post: 1,
            notify: 0,
            message: message
        }))
        .done(function() {
            $('.progress-bar span').css('width', '100%');
            $('.result').fadeIn().text('La notification a été envoyée avec succès');
            $('.result').addClass('done');
        })
        .fail(function() {
            $('.progress-bar span').css('width', '0%');
            $('.result').fadeIn().text('Echec lors du traitement');
            $('.progress-bar').fadeOut();
            $('.result').addClass('fail');
            alert('Il semblerait qu\'une erreur se soit produite ! Vérifiez votre connexion internet et réessayez ultérieurement.');
        });
    return false;
});
</script>

et le code javascript

Code:

function realTime_alert() {
 
/******* VARIABLES PARAMÉTRABLES *******/
var version="phpbb2";
 
var topicAlertId="8495";
/***************************************/
 
jQuery.ajax({
        url: "/t"+topicAlertId+"-?view=newest",
        success: function(result) {
            var html = jQuery(result);
    
            if (version=="phpbb3") {
              var alertBody= html.find("div.post .content .codebox code").eq(-1).text();
              var id = html.find("div.post").eq(-1).attr("id");
            }
    
            if (version=="phpbb2") {
              var alertBody= html.find("tr.post .postbody .codebox .cont_code").eq(-1).text();
              var id = html.find("tr.post").eq(-1).attr("id");
            }
    
            if (version=="punbb") {
              var alertBody= html.find("div.post .postbody .entry-content .codebox .cont_code code").eq(-1).text();
              var id = html.find("div.post .postmain .posthead").eq(-1).attr("id");
            }
    
            if (version=="invision") {
              var alertBody= html.find("div.post .post-entry .codebox.contcode dd code").eq(-1).text();
              var id = html.find("div.post").eq(-1).attr("id");
            }
    
            if (version=="modernbb") {
              var alertBody= html.find("div.post .postbody .content .codebox code").eq(-1).text();
              var id = html.find("div.post").eq(-1).attr("id");
            }
    
            if (version=="awesomebb") {
              var alertBody= html.find("div.post-wrap .post-body .post .post-content .codebox code").eq(-1).text();
              var id = html.find("div.post").eq(-1).attr("id");
            }
    
            if(localStorage.getItem(id)!='read' && sessionStorage.getItem(id)!=location.pathname) {
                  $('body').append(alertBody);
                  $('.realTime_alert .close').click(function() {
                    $(this).closest('.realTime_alert').fadeOut();
                    localStorage.setItem(id,"read");
                  });
            }
          if(sessionStorage.getItem(id)!=location.pathname) {
              sessionStorage.setItem(id, location.pathname);
          } else {
              sessionStorage.setItem(id, location.pathname);
          }
        },
});
return topicAlertId;
}
 
/******* Permissions affichage de la notification *******/
 
$(function(){
  if(_userdata.user_id !== -1) {
    realTime_alert();
    setInterval('realTime_alert();', 30000); // Reactualisation toutes les 30s
  }
});

le fichier CSS

Code:

/* Alerte en temps réeel */
 
.realTime_alert {
    background: #2B2B2C no-repeat 10px center;
    -webkit-background-size: 50px;
    -moz-background-size: 50px;
    -o-background-size: 50px;
    background-size: 50px;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    position: fixed;
    top: 70px;
    right: 20px;
    min-height: 60px;
    font-size: 13px;
    width: 250px;
    padding: 10px 10px 10px 70px;
    font-family: Helvetica;
    color: #eee;
    opacity: 0.8;
    border-radius: 10px;
}
 
.alerttitle {
    display: block;
    font-weight: bold;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000;
}
 
.realTime_alert .close {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 15px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    height: 16px;
    width: 16px;
    text-align: center;
    line-height: 13px;
    cursor: pointer;
}
 
.realTime_alert .close:hover {
    color: #FFF;
    background: #666;
}
 
.alertlien {
    display: block;
    padding-top: 10px;
    float: right;
}
 
.alertlien a {
    color: #eee;
    text-decoration:none;
}
 
.alertlien a:hover {
    color: #eee;
    text-decoration:none;
    text-shadow: 1px 1px 0 #000;
}

j'ai du merder a quelque part mais pas asse caler pour résoudre le soucis
Merci d'avance de votre aide.

[Toryudo]

Bonjour !

D'après le code de votre script, vous allez chercher sur la page https://www.forumclub505.com/t8495-systeme-d-alerte-temps-reel le contenu :

Code:

var alertBody= html.find("tr.post .postbody .codebox .cont_code").eq(-1).text();

.codebox .cont_code veut dire que vous cherchez le contenu d'une balise [code], mais dans le message, il n'y en a pas, donc le script ne trouve rien.
Je pense donc que l'adresse url devrait se trouver entre [code] et [/code] pour que le script puisse la récupérer.

[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 »

[lolo86]

Bonjour !

D'après le code de votre script, vous allez chercher sur la page https://www.forumclub505.com/t8495-systeme-d-alerte-temps-reel le contenu :

Code:

var alertBody= html.find("tr.post .postbody .codebox .cont_code").eq(-1).text();

.codebox .cont_code veut dire que vous cherchez le contenu d'une balise

Code:

, mais dans le message, il n'y en a pas, donc le script ne trouve rien.
Je pense donc que l'adresse url devrait se trouver entre [code] et [/code] pour que le script puisse la récupérer.

je doit rajouter la balise (code) (/code) dans la script mais ou ???

[Toryudo]

Bonjour !

Non, je ne parle pas du script, je parle des messages que vous postez dans le sujet https://www.forumclub505.com/t8495-systeme-d-alerte-temps-reel
Dans vos messages, il faut mettre la balise code, et c'est dans cette balise que le script ira chercher les informations !

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

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

[lolo86]

bonjour
Merci au staff d'avoir remis mon poste, j'ai toujours pas réussi a faire fonctionner le système d'alerte
la balise code je ne vois pas ou et comment la mettre.
j'ai essayer d'incorporer la balise code dans un message mais elle s'affiche uniquement mais rien de plus.
merci de m'éclairer comment intégrer la balise dans les messages afin que ça fonctionne.
bien cordialement.

[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 »

[lolo86]

up

[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 »

[Bipo]

Bonsoir @lolo86,

Avez-vous essayé de republier un message d'alerte avec le formulaire ? En effet, si je lis votre sujet : https://www.forumclub505.com/t8495-systeme-d-alerte-temps-reel, vous n'avez qu'un seul message. Le système de notifications fonctionne qu'à partir du deuxième message posté via le formulaire, dans le sujet.

Si vous avez suivi les étapes du tutoriel, il vous suffit donc d'envoyer une notification via le formulaire et cela devrait fonctionner !

Belle soirée sur Forumactif.
Bipo.

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