JS de envio de mensagem sem refresh com funcionamento alternado

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido JS de envio de mensagem sem refresh com funcionamento alternado

Mensagem por zHugh 29.01.18 20:16

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

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de envio de mensagem sem refresh com funcionamento alternado

Mensagem por Luiz 29.01.18 20:22

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/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de envio de mensagem sem refresh com funcionamento alternado

Mensagem por zHugh 29.01.18 20:42

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

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: JS de envio de mensagem sem refresh com funcionamento alternado

Mensagem por tikky 29.01.18 20:46

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos