Configurar botões ajax Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Configurar botões ajax

3 participantes

Ir para baixo

Tópico resolvido Configurar botões ajax

Mensagem por NatO_MagiC 19.12.18 5:27

Detalhes da questão


Endereço do fórum: http://brasilmagicrpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá, pode me ajudar?
Coloquei ícones de botões na gestão de imagens e apliquei os botões pelo "javascript", só que quando cliconos botões buga, não vai para o que eu cliquei.

Me ajuda?!
Triste

Exemplo (Imagem)
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por tikky 19.12.18 9:48

Olá @NatO_MagiC,
Irei precisar de duas coisas suas, o código em uso e uma conta teste para que possa ver os ícones e fazer a alteração do código, script.


Aguardo uma resposta sua,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por NatO_MagiC 19.12.18 15:04

Código:
/*globals jQuery, FA, _userdata*/
 
/**
 * Change the topic icon with AJAX and JavaScript.
 *
 * @author Luiz
 * @version 1.2
 * @licence MIT
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id  : 1, background: '#76be52', onlyForMod: true },
    { name: 'Em Curso', id  : 2, background: '#ecb73c' },
    { name: 'Aceito', id: 3, background: '#6d66a3', onlyForAdmin: true },
    { name: 'Recusado', id: 4, background: '#c837a1', onlyForAdmin: true },
    { name: 'Importante', id: 5, background: '#e55649', onlyForAdmin: true }
  ];
 
  window.FA = window.FA || {};
  FA.Topic = FA.Topic || {};
 
  var MarkIcon;
  FA.Topic.MarkIcon = MarkIcon = function (config) {
    var self = this;
 
    self.userConfig = config;
    self.defaults = {
      name: undefined,
      id: undefined,
      background: undefined,
      onlyForMod: false,
      onlyForAdmin: false
    };
 
    self.config = $.extend({}, self.defaults, self.userConfig);
 
    $.each(self.config, function (key, value) {
      if (key === undefined) {
        throw new Error ('[Topic Icons] The ' + key + ' key was not specified in the script config.');
      }
 
      if (value === undefined) {
        throw new Error ('[Topic Icons] The ' + value + ' value was not specified in the settings.');
      }
    });
  };
 
  MarkIcon.prototype.init = function () {
    var self = this;
 
    var $post = $('.post:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      return false;
    }
 
    if (this.config.onlyForMod && (_userdata.user_level !== 1 && _userdata.user_level !== 2)) {
      return false;
    }
 
    if (this.config.onlyForAdmin && _userdata.user_level !== 1) {
      return false;
    }
 
    self.messageLink = $link.attr('href');
 
    self.$button = $('<button>', {
      'class'  : 'fa-mark-icon-button',
      'data-id': self.config.id,
      'text'  : self.config.name
    });
 
    self.$button
      .css('background-color', self.config.background)
      .on('click', function (event) {
        event.preventDefault();
 
        self.runAjax();
      })
      .insertBefore($post)
    ;
 
    self.appendStyles();
  };
 
  MarkIcon.prototype.runAjax = function () {
    var self = this;
 
    self.changeText('<i class="fa fa-refresh fa-spin"></i> Marking...');
 
    $.get(self.messageLink)
      .done(function (context) {
        var $form = $('form[action="/post"]', context);
 
        var encode  = document.charset.toLowerCase() === 'utf-8' ? window.encodeURIComponent : window.escape;
 
        var formData = $form.serializeArray();
 
        var data = {};
        $.each(formData, function () {
          var obj = this;
 
          data[obj.name] = obj.value;
        });
 
        data.post_icon = self.config.id;
        data.post = 1;
 
        var encoded = $.map(data, function (value, key) {
          return key + '=' + encode(value);
        }).join('&');
 
        $.post(self.messageLink, encoded)
          .done(self.changeText('<i class="fa fa-check"></i> Marked!'))
          .fail(self.error)
        ;
      })
      .fail(self.error)
    ;
  };
 
  MarkIcon.prototype.changeText = function (text) {
    var self = this;
 
    self.runAjax = function () {
      return false;
    };
 
    self.$button
      .html(text)
      .prop('disabled', true)
    ;
  };
 
  MarkIcon.prototype.error = function () {
    alert([
      '[Topic Icons] AJAX Error.',
      'Refresh the page and try again.'
    ].join('\n'));
  };
 
  MarkIcon.prototype.appendStyles = function () {
    $('<style>', {
      'text': [
        '.fa-mark-icon-button {',
        '  padding: 5px 5px 5px 5px;',
        '  border: none;',
        '  color: #ffffff;',
        '  margin: 7px 0 7px 3px;',
        '  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.08);',
        '  border-radius: 5px;',
        '}'
      ].join('\n')
    }).appendTo('head');
  };
 
  $(function () {
    $.each(config, function () {
      var self = this;
 
      (new FA.Topic.MarkIcon(self)).init();
    });
  });
}(jQuery));

Aqui está o código e a conta teste é a seguinte:
Login: Teste_Forum
Senha: @Testando01
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por NatO_MagiC 19.12.18 16:17

Aqui tem o link com as imagens que eu quero que apareça nos tópicos ao clicar em umas das opções.

Link:
https://imgur.com/a/mBClLzC
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por tikky 19.12.18 17:28

Atenção!


Você não pode postar mensagens consecutivas ou UP's antes de se completarem 24 horas desde a sua última mensagem em um tópico.

Por este motivo, pedimos que leia as regras do Setor de Suporte e as regras do Fórum dos Fóruns para não cometer novos erros.
Dê permissões a conta de moderação em um fórum qualquer, para que possa ver os ícones! Moderação não é igual a Administração, nós nunca pedimos isso!
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por NatO_MagiC 19.12.18 18:52

Pronto, está como moderador em: Inscrições para liderança
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por RafaelS. 20.12.18 14:18

@NatO_MagiC,

Pelo que podemos ver, não têm os botões ativos em seu fórum ou a permissão está apenas para administrador.
Tente dar uma olhada nisso, por favor.

Atenciosamente,
Rafael. King
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por NatO_MagiC 20.12.18 15:40

Desculpe-me, já adicionei os botões!
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por RafaelS. 20.12.18 16:04

Olá!

Troque o código por este:

Código:
/*globals jQuery, FA, _userdata*/
 
/**
 * Change the topic icon with AJAX and JavaScript.
 *
 * @author Luiz
 * @version 1.2
 * @licence MIT
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id  : 0, background: '#76be52', onlyForMod: true },
    { name: 'Em Curso', id  : 2, background: '#ecb73c' },
    { name: 'Aceito', id: 1, background: '#6d66a3', onlyForAdmin: true },
    { name: 'Recusado', id: 3, background: '#c837a1', onlyForAdmin: true },
    { name: 'Importante', id: 4, background: '#e55649', onlyForAdmin: true }
  ];
 
  window.FA = window.FA || {};
  FA.Topic = FA.Topic || {};
 
  var MarkIcon;
  FA.Topic.MarkIcon = MarkIcon = function (config) {
    var self = this;
 
    self.userConfig = config;
    self.defaults = {
      name: undefined,
      id: undefined,
      background: undefined,
      onlyForMod: false,
      onlyForAdmin: false
    };
 
    self.config = $.extend({}, self.defaults, self.userConfig);
 
    $.each(self.config, function (key, value) {
      if (key === undefined) {
        throw new Error ('[Topic Icons] The ' + key + ' key was not specified in the script config.');
      }
 
      if (value === undefined) {
        throw new Error ('[Topic Icons] The ' + value + ' value was not specified in the settings.');
      }
    });
  };
 
  MarkIcon.prototype.init = function () {
    var self = this;
 
    var $post = $('.post:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      return false;
    }
 
    if (this.config.onlyForMod && (_userdata.user_level !== 1 && _userdata.user_level !== 2)) {
      return false;
    }
 
    if (this.config.onlyForAdmin && _userdata.user_level !== 1) {
      return false;
    }
 
    self.messageLink = $link.attr('href');
 
    self.$button = $('<button>', {
      'class'  : 'fa-mark-icon-button',
      'data-id': self.config.id,
      'text'  : self.config.name
    });
 
    self.$button
      .css('background-color', self.config.background)
      .on('click', function (event) {
        event.preventDefault();
 
        self.runAjax();
      })
      .insertBefore($post)
    ;
 
    self.appendStyles();
  };
 
  MarkIcon.prototype.runAjax = function () {
    var self = this;
 
    self.changeText('<i class="fa fa-refresh fa-spin"></i> Marking...');
 
    $.get(self.messageLink)
      .done(function (context) {
        var $form = $('form[action="/post"]', context);
 
        var encode  = document.charset.toLowerCase() === 'utf-8' ? window.encodeURIComponent : window.escape;
 
        var formData = $form.serializeArray();
 
        var data = {};
        $.each(formData, function () {
          var obj = this;
 
          data[obj.name] = obj.value;
        });
 
        data.post_icon = self.config.id;
        data.post = 1;
 
        var encoded = $.map(data, function (value, key) {
          return key + '=' + encode(value);
        }).join('&');
 
        $.post(self.messageLink, encoded)
          .done(self.changeText('<i class="fa fa-check"></i> Marked!'))
          .fail(self.error)
        ;
      })
      .fail(self.error)
    ;
  };
 
  MarkIcon.prototype.changeText = function (text) {
    var self = this;
 
    self.runAjax = function () {
      return false;
    };
 
    self.$button
      .html(text)
      .prop('disabled', true)
    ;
  };
 
  MarkIcon.prototype.error = function () {
    alert([
      '[Topic Icons] AJAX Error.',
      'Refresh the page and try again.'
    ].join('\n'));
  };
 
  MarkIcon.prototype.appendStyles = function () {
    $('<style>', {
      'text': [
        '.fa-mark-icon-button {',
        '  padding: 5px 5px 5px 5px;',
        '  border: none;',
        '  color: #ffffff;',
        '  margin: 7px 0 7px 3px;',
        '  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.08);',
        '  border-radius: 5px;',
        '}'
      ].join('\n')
    }).appendTo('head');
  };
 
  $(function () {
    $.each(config, function () {
      var self = this;
 
      (new FA.Topic.MarkIcon(self)).init();
    });
  });
}(jQuery));

Abraços,
Rafael. King
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por NatO_MagiC 21.12.18 2:45

Obrigado pela ajuda, funcionou perfeitamente!
Só que sempre que vou criar um tópico ele aparece em cima como mostra na imagem:


Como removo isso?
Para qualquer um fica assim!
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por tikky 21.12.18 9:12

Adicione na sua folha de estilo, o seguinte código:
Código:
form[action="/post"] dl:nth-of-type(1) {
    display: none;
}
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por NatO_MagiC 21.12.18 10:18

Grato pela ajuda!
Pode fechar o tópico.

Até mais...
NatO_MagiC
NatO_MagiC
*

Membro desde : 14/12/2018
Mensagens : 48
Pontos : 74

http://brasilplaymagic.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Configurar botões ajax

Mensagem por tikky 21.12.18 10:25

Tópico resolvido


Movido para "Questões resolvidas".
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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