Postar em ajax com avisos

Detalhes da questão

Endereço do fórum: http://bitchcraft.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Então, eu adorei esse script para postar automaticamente, sem dar refresh na página, só há um porém, o meu código de aplicação de background nas mensagens não funciona em conjunto com ele. A mensagem é postada e o javascript resulta, o problema é que a imagem escolhida para plano de fundo não é aplicada.

O código encontra-se abaixo, será que alguém poderia por favor tentar me ajudar a encontrar o problema?

Post BG code:

Código:

$(function() {
  $("div.postbody").each(function() {
    var n = this;
    if($(".post-entry", n).length) {
      n = $(".post-entry", n)[0]
    }else {
      if($(".content", n).length) {
        n = $(".content", n)[0]
      }
    }
    while(n.nodeType != 3 && n.hasChildNodes()) {
      n = n.childNodes[0]
    }
    if(n.nodeType != 3) {
      return;
    }
    if(n.nodeValue.substr(0,8)  != "[postbg=") {
      return;
    }
    var m = n.nodeValue.match(/^\[postbg=([^\]]*)\]/);
    if(!m) return;
    $(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
    n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
    if(!n.nodeValue && n.nextSibling && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
      $(n.nextSibling).remove()
    }
  });
  if($("#text_editor_textarea").length && $.sceditor) {
    var bglist = "http://i.imgur.com/20aRJFn.png,http://i.imgur.com/DcTM2Ng.jpg,http://i.imgur.com/tkC3deY.jpg,http://i.imgur.com/pfTcnqF.png,http://i.imgur.com/dAQtdaR.gif,http://i.imgur.com/48CU2Qx.png,http://i.imgur.com/lRuwoVi.png,http://i.imgur.com/EHp45H1.png,http://i.imgur.com/8bhbqFF.png,http://i.imgur.com/tb80sYG.png,http://i.imgur.com/6LPhzcp.png,http://i.imgur.com/DkRuYf1.png,http://i.imgur.com/57F0z86.jpg,http://i.imgur.com/PZyMuXF.png".split(",");
    var bgnum = -1;
    var val = $("#text_editor_textarea").val();
    if(val.substr(0,8)  == "[postbg=") {
      var m = val.match(/^\[postbg=([^\]]*)\]/);
      if(m) {
        var r = $.inArray(m[1], bglist);
        if(r != -1) {
          bgnum = r
        }else {
          bgnum = bglist.length - 1
        }
        $(function() {
          $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px");
          $(".sceditor-container").css("background-image", "url(" + m[1] + ")")
        });
        $("#text_editor_textarea").val(val.replace(/^\[postbg=[^\[]*\]/, ""))
      }
    }
    $(function() {
      if(!$("#text_editor_textarea").sceditor("instance")) {
        return
      }
      $('<a class="sceditor-button" unselectable="on" title="Background of message"><div unselectable="on" style="background:url(http://i.imgur.com/Hrf5w1i.gif);opacity:1">Background of message</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
        if(e.ctrlKey) {
          $(".sceditor-container").css("background-image", "");
          bgnum = -1
        }else {
          bgnum++;
          if(!bgnum) {
            $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px")
          }
          $(".sceditor-container").css("background-image", "url(" + bglist[bgnum % bglist.length] + ")")
        }
      })
    });
    $(function() {
      $('form[name="post"]').submit(function() {
        if(bgnum != -1) {
          $("#text_editor_textarea").val(function(i, val) {
            return"[postbg=" + bglist[bgnum % bglist.length] + "]" + val
          })
        }
      })
    })
  }
});

O link para o código que causou o problema: Postar em ajax com avisos

Up. :3

Alguém auxilia? Amei ambos os scripts, não quero ter que me livrar de nenhum deles.

Up? D;

Pls help. ;-;

O detalhe é o seguinte. O código para respostas deveria ser aplicado Em todas as páginas, diferente da "personalizar o background" nas postagens, que deve ser aplicado nos tópicos.

Infelizmente não era este o problema, Shek. Queria que fosse assim tão simples.
O BG aparece no editor de texto, mas ao enviar a mensagem, o fundo está em branco. </3

PS: Eu verifiquei o investimento e realmente o problema persiste. ;/

Deixe os códigos ativados para que eu possa verificar o console do fórum, por gentileza.

Ambos ativados, imaginei que você fosse pedir isso.

Tente trocar o script de postagem rápida por esse:

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;
  }
 
  /** BEGIN Fix background image */
 
  var bg = $('#quick_reply .sceditor-container').css('background-image');
 
  if (bg !== 'none') {
    var $textarea = $("#text_editor_textarea");
    $textarea.val('[postbg=' + bg + ']' + $textarea.val());
  }
 
  /** END Fix background image */
 
  $("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;
});
 
});

Não resultou.
Até tentei mudar os investimentos novamente mas mesmo assim não foi. :/

O senhor bloqueou a postagem no tópico de testes. Poderia reabri-lo para continuarmos?

Eu não bloqueei, ele continua aberto. Sequer mexi nas configurações. o-o

Up?

O fórum estava como "em férias".
Desculpe pelo vacilo. haha :X

Tente esse:

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;
        }

        /** BEGIN Fix background image */

        var bg = $('#quick_reply .sceditor-container').css('background-image');

        if (bg !== 'none') {
            var $textarea = $("textarea").sceditor("instance");
            $textarea.val('[postbg=' + bg + ']' + $textarea.val());
            textEditorVal = $textarea.val();
        }

        /** END Fix background image */

        $("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);
                    });

                    /** BEGIN Fix Background Image */

                    $("div.postbody").each(function() {
                        var n = this;
                        if ($(".post-entry", n).length) {
                            n = $(".post-entry", n)[0]
                        } else {
                            if ($(".content", n).length) {
                                n = $(".content", n)[0]
                            }
                        }
                        while (n.nodeType != 3 && n.hasChildNodes()) {
                            n = n.childNodes[0]
                        }
                        if (n.nodeType != 3) {
                            return;
                        }
                        if (n.nodeValue.substr(0, 8) != "[postbg=") {
                            return;
                        }
                        var m = n.nodeValue.match(/^\[postbg=([^\]]*)\]/);
                        if (!m) return;
                        $(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
                        n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
                        if (!n.nodeValue && n.nextSibling && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
                            $(n.nextSibling).remove();
                        }
                    });

                    /** END Fix Background Image */
                });
                resAjax.html("Postado com sucesso!").attr("class", "alert-success");
                $("input[type='submit']").attr("disabled", false);
                $("textarea").sceditor("instance").val("");
            }
        });
        return false;
    });

});

Não resultou da forma esperada... haha

Up ;3

Mais uma tentativa: ._.

Código:

/* globals jQuery*/

/**
 * Código: Postar mensagem sem refresh
 * Versão: 1.0
 * Autor: Daemon
 * Data: 17/09/2016
 */

(function($) {
  'use strict';

  var bg = function() {
    $('div.postbody').each(function() {
      var node;
      var $post = $('.post-entry', this);
      var $content = $('.content', this);

      if ($post.length) {
        node = $post[0];
      } else if ($content.length) {
        node = $content[0];
      }

      while (node.nodeType !== 3 && node.hasChildNodes()) {
        node = node.childNodes[0];
      }

      if (node.nodeType !== 3) {
        return;
      }

      if (node.nodeValue.substr(0, 8) !== '[postbg=') {
        return;
      }

      var matches = node.nodeValue.match(/^\[postbg=([^\]]*)\]/);

      if (!matches) return;

      $(this)
        .closest('div.post-container, div.post, td.row1, td.row2,div.postmain')
        .addClass('postbg')
        .css('background-image', 'url(' + matches[1] + ')');

      node.nodeValue = node.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, '');

      if (
        !node.nodeValue
        && node.nextSibling
        && node.nextSibling.nodeType === 1
        && node.nextSibling.tagName === 'BR'
      ) {
        $(node.nextSibling).remove();
      }
    });
  };

  $(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>',
    ]).join('\n');

    var hrefResposta = $('a[href^="/post?t="]').attr('href');
    var $form = $('#quick_reply');

    $form.prepend($('<div id="resultados_ajax"></div>'));

    $form.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;
      }

      /** BEGIN Fix background image */

      var image = $('#quick_reply .sceditor-container').css('background-image');

      if (image !== 'none') {
        textEditorVal += '[postbg=' + image + ']';
      }

      /** END Fix background image */

      $('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);
              bg();
            });
          });

          resAjax.html('Postado com sucesso!').attr('class', 'alert-success');

          $('input[type="submit"]').attr('disabled', false);
          $('textarea').sceditor('instance').val('');
        },
      });
      return false;
    });
  });
}(jQuery));


Não resultou. Agora posta o BG mas recarrega a página, ou seja, é como se não tivesse o código.

Vamos fazer o seguinte: Remova o script por completo, então me dê um toque aqui. Fica mais fácil de acertar o script quando o antigo não está lá.

Ah, eu achei que fosse necessário manter ele funcionando, me desculpe. Já removi.
Feliz natal a propósito! <3'

O ideal era conseguirmos resolver sem desativar, mas fica complicado às vezes.

Tente:

Código:

/* globals jQuery*/

/**
 * Código: Postar mensagem sem refresh
 * Versão: 1.0
 * Autor: Daemon
 * Data: 17/09/2016
 */

(function($) {
  'use strict';

  var bg = function() {
    $('div.postbody').each(function() {
      var node;
      var $post = $('.post-entry', this);
      var $content = $('.content', this);

      if ($post.length) {
        node = $post[0];
      } else if ($content.length) {
        node = $content[0];
      }

      while (node.nodeType !== 3 && node.hasChildNodes()) {
        node = node.childNodes[0];
      }

      if (node.nodeType !== 3) {
        return;
      }

      if (node.nodeValue.substr(0, 8) !== '[postbg=') {
        return;
      }

      var matches = node.nodeValue.match(/^\[postbg=([^\]]*)\]/);

      if (!matches) return;

      $(this)
        .closest('div.post-container, div.post, td.row1, td.row2,div.postmain')
        .addClass('postbg')
        .css('background-image', 'url(' + matches[1] + ')');

      node.nodeValue = node.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, '');

      if (
        !node.nodeValue
        && node.nextSibling
        && node.nextSibling.nodeType === 1
        && node.nextSibling.tagName === 'BR'
      ) {
        $(node.nextSibling).remove();
      }
    });
  };

  $(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>',
    ].join('\n'));

    var hrefResposta = $('a[href^="/post?t="]').attr('href');
    var $form = $('#quick_reply');

    $form.prepend('<div id="resultados_ajax"></div>');

    $form.on('submit', function(event) {
      event.preventDefault();

      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;
      }

      if (textEditorVal.length > max) {
        resAjax
          .html('Seu post ultrapassou o limite de ' + max + ' caracteres')
          .attr('class', 'alert-error');

        return;
      }

      /** BEGIN Fix background image */

      var image = $('#quick_reply .sceditor-container')
        .css('background-image')
        .match(/url\(('|")?([^'"]+)('|")?\)/i);

      if (image && image.length === 4) {
        textEditorVal = '[postbg=' + image[2] + ']' + textEditorVal;
      }

      /** END Fix background image */

      $('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);
              bg();
            });
          });

          resAjax.html('Postado com sucesso!').attr('class', 'alert-success');

          $('input[type="submit"]').attr('disabled', false);
          $('textarea').sceditor('instance').val('');
        },
      });
    });
  });
}(jQuery));


Eita eu descrevi o bug todo em inglês e quero morrer porque vou ter que digitar tudo de novo. D:

Funcionou em parte, mas tem um problema. Quando o tópico tem várias páginas e você faz um comentário, o scrip funciona mas adiciona o comentário à página em que você estava. Isso tornaria possível bagunçar a ordem dos posts mesmo que de forma não intencional e seria bem prejudicial em RPs onde a ordem dos posts conta bastante.

Tem como arrumar? Se não der eu insiro nas regras que isso é proibido e quem fizer eu vou ter que deletar o post ;x

A exibição do post é apenas "estética", o post sempre vai para a última página, não importa onde seja feito o comentário. Quando o usuário atualizar a página, verá que o post dele não está na página exibida, e sim na última página.

Aaaah tá! Haha ;3

Desculpe, é que quando eu dei F5 acabou ficando a mensagem, devido ao script que salva rascunhos eu acho, mas realmente, está funcionando tudo certinho! :o

Muito obrigado Kyo e Crowley! Não sei o que seria de mim e dos meus javas loucos sem vocês do forumeiros. <3'