[TUTORIAL] Postar em ajax com avisos

As vezes gostaríamos de postar mensagens sem necessidade de recarregar a pagina. Com esse tutorial isto será possível, e além disto terá avisos como por exemplo: Você pode postar, você deve ter X caracteres para poder postar.


1º - Paginas Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos nos tópicos.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Código a ser usado:
Coloque esse código no conteúdo do javascript

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 {' +
'    -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    background: url(http://imgur.com/J3aqwYE.png) repeat-x 0 0;' +
'    box-shadow: rgba(0,0,0,0.1) 0 1px 3px;' +
'    display: block;' +
'    font-size: 12px;' +
'    line-height: 1.6;' +
'    padding: 10px;' +
'    text-shadow: 0 1px 0 rgba(255,255,255,0.5);' +
'}' +
'.alert-success {' +
'    background-color: #cde3a4;' +
'    border: 1px solid #a8c471;' +
'    color: #436500;' +
'}' +
'.alert-error {' +
'    background-color: #ffbdbd;' +
'    border: 1px solid #d8aba7;' +
'    color: #92463f;' +
'}' +
'</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 = 10; // 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("Carregando...").attr("class", false);
      },
      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;
});
 
});

Clique no botão Salvar.

• Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Postar em ajax com avisos