Problème avec le tutoriel "Système d'alerte en temps réel"

[Invité]

Bonjour,

Alors voila j'ai suivi ce tutoriel de FdF : https://forum.forumactif.com/t377672-systeme-d-alerte-en-temps-reel

Je l'ai suivi à la lettre.

Voici ce que j'ai mis en CSS :

Code:

.realTime_alert{
background:#FDFDFD 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:50px;
right:20px;
min-height:60px;
font-size:13px;
width:200px;
padding:10px 10px 10px 70px;
font-family:Helvetica;
color:#474747;
}
.realTime_alert b{
display:block;
margin-bottom:5px;
font-size:15px;
}
.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;
}
#ebtzd .tooltip{
opacity:0;
position:relative;
overflow:visible;
z-index:100!important;
display:inline-block;
top:5px;
-webkit-transition-duration:500ms;
  -moz-transition-duration:500ms;
    -o-transition-duration:500ms;
        transition-duration:500ms;
background:rgba(0, 0, 0, .8);
padding:10px;
-webkit-border-radius:3px;
  -moz-border-radius:3px;
        border-radius:3px;
font-family:Helvetica;
letter-spacing:1px;
font-size:13px;
width:300px;
color:#fff;
}

Voici ce que j'ai mis en javascript sur toutes les pages :

Code:

function realTime_alert() {
var version="phpbb2";
var topicAlertId="2455";
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(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;
}
 
$(function(){
if($("#logout").length) {
  realTime_alert();
  setInterval('realTime_alert();', 30000); // Reactualisation toutes les 30s
}
});

Voici ce que j'ai mis en page html :

Code:

<br /><style>
.progress-bar {
height: 12px;
margin-bottom: 20px;
overflow: hidden;
background-color: #F5F5FB;
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: #0787DD;
-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: 350px;
height: 60px;
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>  
<form id="form">
     <label for="alert_name">Titre de l'alerte</label> <input style="width: 60%;" placeholder="Exemple: Impossible de changer de mot de passe" id="alert_name" name="alert_name" type="text" />  <br /><br />  <label for="alert_content">Contenu du message</label> <input style="width: 70%;" placeholder="" id="alert_message" name="alert_message" type="text" />  <br /><br />  <label for="alert_image">Image</label> <input style="width: 70%;" placeholder="http://" id="alert_image" name="alert_image" type="text" />  <br /><br /><br />  
   <button id="send" class="button1">
      Envoyer l'alerte
   </button>
</form>
<div class="result">
</div>
<div class="progress-bar">
   <span style="width: 200px;">
   </span>
</div>
  <script>
  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();
  $('.reslt').hide();
$('form#form').submit(function() {
  var message="[code]<div class='realTime_alert' style='display: block; background-image: url("+document.getElementById('alert_image').value+");'><span class='close'>×</span><b>"+document.getElementById('alert_name').value+"</b>\n<span class='inner'>"+document.getElementById('alert_message').value+"</span></div>[/code]";
  $('.progress-bar').show();
  $('form#form').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('Envoyée avec succès');
      $('.result').addClass('done');
        })
      .fail(function() {
          $('.progress-bar span').css('width', '0%');
      $('.result').fadeIn().text('Erreur 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 <img src="http://r23.imgfast.net/users/2316/18/97/34/smiles/1371890812.gif" alt="Sad" longdesc="3" />');
        });
  return false;
});
 
</script>



Et voici ce que j'obtient quand je lance une alerte :

Mais je n'obtiens pas la fenêtre avec l'alerte qui s'ouvre comme sur mon premier forum : 

Voici le forum où il y a le problème : http://www.syndromeklinefelter.org/

Merci pour votre aide.

Cordialement
Romain

[Invité]

Bonjour,

Voyant que le compteur de vue grimpe, je pense que les visiteurs de mon forum voit l'alerte mais pas moi.

Ce n'est rien de grave, du coup, j'édite mon message pour le mettre en résolu.

Cordialement
Romain