JS de envio de mensagem sem refresh com funcionamento alternado

Detalhes da questão

Endereço do fórum: http://pokemonillium.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá, estive a utilizar o seguinte código:

Código:

/ *
* Código: Postar mensagem sem refresh
* Versão: 1.0
* Autor: Daemon
* Data: 17/09/2016
*/
$(document).on("ready", function() {
 
$("body").append(
'<style>' +
'.alert-success, .alert-error, .posting-load {' +
'    -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    display: block;' +
'    font-size: 12px;' +
'    line-height: 1.6;' +
'    padding: 10px;' +
'}' +
'.alert-success {' +
'    background-color: #40a930;' +
'    color: #ffffff;' +
'    width: 70%;' +
'    margin: auto;' +
'    margin-bottom: 10px;' +
'    text-align: center;' +
'    border-radius: 10px;' +
'    padding: 15px;' +
'}' +
'.alert-error {' +
'    background-color: #d63939;' +
'    color: #ffffff;' +
'    width: 70%;' +
'    margin: auto;' +
'    margin-bottom: 10px;' +
'    text-align: center;' +
'    border-radius: 10px;' +
'    padding: 15px;' +'}' +
'.posting-load {' +
'    background-color: #36b1f1;' +
'    color: #ffffff;' +
'    width: 70%;' +
'    margin: auto;' +
'    margin-bottom: 10px;' +
'    text-align: center;' +
'    border-radius: 10px;' +
'    padding: 15px;' +'}' +
'</style>'
);
 
var hrefResposta = $("a[href^='/post?t=']").attr("href");
var form = $("#quick_reply");
 
$("<div id='resultados_ajax'></div>").prependTo(form);
 
$("#quick_reply").submit(function(form) {
 
  var resAjax = $("#resultados_ajax"); // Elemento resultados_ajax
  var textEditorVal = $("textarea").sceditor("instance").val(); // Valor do editor
  var min = 5; // Mínimo de caracteres para o post
  var max = 15000; // Máximo de caracteres para o post (Não ultrapasse o valor limite estipulado pela forumeiros)
 
  if(textEditorVal.length < min) {
    resAjax.html("Digite pelo menos " + min + " caracteres para enviar o post").attr("class","alert-error");
    return false;
  }
  if(textEditorVal.length > max) {
    resAjax.html("Seu post ultrapassou o limite de " + max + " caracteres").attr("class","alert-error");
    return false;
  }
 
  $("input[type='submit']").attr("disabled", true);
  var parametros = $(form).serialize();
  $.ajax({
      type: "POST",
      url: hrefResposta,
      data: parametros + "&message=" + textEditorVal + "&post=1",
      beforeSend: function(objeto){
            resAjax.html("Postando...").attr("class", "posting-load");
      },
      success: function(dados){
          var href = $("a[href^='/viewtopic']", dados).attr("href");
              $.get(href, function(e) {
                  $(".post:last", e).hide().insertAfter(".post:last").slideDown("fast", function() {
                      $("html, body").animate({
                          scrollTop: $(".post:last").offset().top
                      }, 500);
                  });
              });
              resAjax.html("Postado com sucesso!").attr("class","alert-success");
              $("input[type='submit']").attr("disabled", false);
              $("textarea").sceditor("instance").val("");
      }
  });
  return false;
});
 
});

No entanto, percebi que o mesmo começou a apresentar um mal funcionamento, este que consiste no botão pre-visualizar, estar enviando as mensagens ao invés de exercer sua real função.

Não é mau funcionamento do script. É que da forma como esse script foi feito, não há como diferenciar o botão de enviar com o de pré-visualizar.

Troque por este:

Código:

/ *
* Código: Postar mensagem sem refresh
* Versão: 1.0
* Autor: Daemon
* Data: 17/09/2016
*/
$(document).on("ready", function() {
 
$("body").append(
'<style>' +
'.alert-success, .alert-error, .posting-load {' +
'    -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    display: block;' +
'    font-size: 12px;' +
'    line-height: 1.6;' +
'    padding: 10px;' +
'}' +
'.alert-success {' +
'    background-color: #40a930;' +
'    color: #ffffff;' +
'    width: 70%;' +
'    margin: auto;' +
'    margin-bottom: 10px;' +
'    text-align: center;' +
'    border-radius: 10px;' +
'    padding: 15px;' +
'}' +
'.alert-error {' +
'    background-color: #d63939;' +
'    color: #ffffff;' +
'    width: 70%;' +
'    margin: auto;' +
'    margin-bottom: 10px;' +
'    text-align: center;' +
'    border-radius: 10px;' +
'    padding: 15px;' +'}' +
'.posting-load {' +
'    background-color: #36b1f1;' +
'    color: #ffffff;' +
'    width: 70%;' +
'    margin: auto;' +
'    margin-bottom: 10px;' +
'    text-align: center;' +
'    border-radius: 10px;' +
'    padding: 15px;' +'}' +
'</style>'
);
 
var hrefResposta = $("a[href^='/post?t=']").attr("href");
var form = $("#quick_reply");
 
$("<div id='resultados_ajax'></div>").prependTo(form);
 
$("#quick_reply").find('[name="post"]').click(function(ev) {
  ev.preventDefault();
  var form = $(this).parents('form');
 
  var resAjax = $("#resultados_ajax"); // Elemento resultados_ajax
  var textEditorVal = $("textarea").sceditor("instance").val(); // Valor do editor
  var min = 5; // Mínimo de caracteres para o post
  var max = 15000; // Máximo de caracteres para o post (Não ultrapasse o valor limite estipulado pela forumeiros)
 
  if(textEditorVal.length < min) {
    resAjax.html("Digite pelo menos " + min + " caracteres para enviar o post").attr("class","alert-error");
    return false;
  }
  if(textEditorVal.length > max) {
    resAjax.html("Seu post ultrapassou o limite de " + max + " caracteres").attr("class","alert-error");
    return false;
  }
 
  $("input[type='submit']").attr("disabled", true);
  var parametros = $(form).serialize();
  $.ajax({
      type: "POST",
      url: hrefResposta,
      data: parametros + "&message=" + textEditorVal + "&post=1",
      beforeSend: function(objeto){
            resAjax.html("Postando...").attr("class", "posting-load");
      },
      success: function(dados){
          var href = $("a[href^='/viewtopic']", dados).attr("href");
              $.get(href, function(e) {
                  $(".post:last", e).hide().insertAfter(".post:last").slideDown("fast", function() {
                      $("html, body").animate({
                          scrollTop: $(".post:last").offset().top
                      }, 500);
                  });
              });
              resAjax.html("Postado com sucesso!").attr("class","alert-success");
              $("input[type='submit']").attr("disabled", false);
              $("textarea").sceditor("instance").val("");
      }
  });
  return false;
});
 
});

o/

Que estranho, eu devo ter mexido em algo quando criei a variável para personalizar o "Postando..." porque inicialmente estava funcionando normal kkk

Obrigado Luiz, resultou.