Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MiguelTb

[Resolvido] Problemas com Ajax Loader

Recommended Posts

Bom dia pessoal,

Seguinte eu tenho um formulário para enviar colunas para o banco de dados até ai tudo bem.

 

Em cima do formulário tem uma div, que mostra coluna publicada com sucesso quando clica em enviar o formulário. O problema que só envia as informações que estão dentro de um textfield, as que estão dentro de textárea, select, combobox simplesmente são nulas. Além disso se uso algum caráctere com acentuação ele troca tudo por códigos estranhos. Segue o código da instrução, se alguém, puder me ajudar ficaria muito grato.

 

/**
$(): utilizado em todas as funções que devem ser referenciadas a jQuery
document: expressão que indica o documento HTML
ready(): associado a leitura do documento enquanto está sendo carregado
*/
$(document).ready(function(){

   // Crio uma variável chamada $forms que pega o valor da tag form
   $forms = $('form');

   // hide(): esconde a div cadastro enquanto carrega o ready()
   $('#cadastro').hide();

   /**
    bind(): é manipulador de evento exemplo submit, click e/ou double click
    a: é a tag <a href>
   */

   $('a').bind('click', function(){
       switch(this.id){
           case 'c':
               $('#cadastro').show(); // show(): mostra div que está oculta (hide()).
               return false;
               break;
       }
   })

   $forms.bind('submit', function(){

       /**
       Crio a variável $button
       attr(): set a propriedade de um atributo, nesse exemplo foi desativado o botão com a tag button
       */
       var $button = $('button',this).attr('disabled',true);

       /**
      Criada a variável params
       serialize(): pega os dados inseridos no formulário
       */
       var params = $(this.elements).serialize();

       var self = this;
       $.ajax({

           // Usando metodo Post
           type: 'POST',

           // this.action pega o script para onde vai ser enviado os dados
           url: this.action,

           // os dados que pegamos com a função serialize()
           data: params,

           // Antes de enviar
           beforeSend: function(){
               // mostro a div loading
               $('#loading').show();

               // html(): equivalente ao innerHTML
               $('#loading').html("Carregando...");
           },
           success: function(txt){
               // Ativo o botão usando a função attr()
               $button.attr('disabled',false);

               // Escrevo a mensagem
               $('#loading').html(txt);

               // Limpo o formulário
               self.reset();
           },

           // Se acontecer algum erro é executada essa função
           error: function(txt){
               $('#loading').html(txt);
           }
       })
       return false;
   });
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

troca:

 

 var params = $(this.elements).serialize();

por:

 var params = $(this).serialize();

 

qnto aos caracteres, lembre-se que o ajax do jQuery, envia e recebe em UTF8

Compartilhar este post


Link para o post
Compartilhar em outros sites

William, não funcionou! Continua a mesma coisa =/.

 

Ele só envia as informações que estão dentro de textfield. outras opções estão indo sem valores.

Compartilhar este post


Link para o post
Compartilhar em outros sites

coloca ai o html do teu formulário.

 

qnto a codificação, atente ao que falei..

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim queria arrumar isso primeiro depois vou atrás da solução da codificação.

 

O form é esse:

<form action="colunas/publicar.php" method="post" name="tinymce">
	<font size='2' face='Trebuchet MS' color='#c0ff00'>Título: </font>
<input type="hidden" name="nome" id="nome" value="<?php echo $_SESSION['nome'] .' '. $_SESSION['sobrenome']; ?>" />
<input type="hidden" name="idautor" id="idautor" value="<?php echo $_SESSION['id']; ?>" />
<input name="titulo" type="text" size="40">
 <font size='2' face='Trebuchet MS' color='#c0ff00'>Data para publicar: </font>
 <input name="data" type="text" value="<?php echo $data; ?>" size="30">
 <br />
 <font size='2' face='Trebuchet MS' color='#c0ff00'>Coluna:</font><br><textarea name="content" cols="80" rows="20" style="{width: 620px;}"></textarea>
<br />	
<input type="submit" name="submit" value="Publicar" />
</form>

 

Sem o ajax funciona direitinho tudo, todos os campos, depois que inventei de colocar esse ajax. o que não é <input mesmo colocando texto fica sem valor na hora de inserir no banco de dados.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para pegar o conteudo do editor TinyMCE, você precisa usar os métodos dele.

exemplo:

http://forum.imasters.com.br/topic/424263-preenchimento-de-textarea-com-jquery/page__view__findpost__p__1673978

 

qnto aos outros campos, troque:

name="tinymce">

por:

id="tinymce">

 

e então:

$forms = $('form');

por:

$forms = $('form#tinymce');

 

debug:

 var params = $(this).serialize();
alert( params );

 

informe que aparecer no alert, e lembre-se de usar o método do tópico que postei, para pegar o conteudo do Tiny

Compartilhar este post


Link para o post
Compartilhar em outros sites

William fiz tudo que você disse, o textarea já esta vindo com o Teste de Texto, alterei as configurações do button conforme o tópico q voce indicou. Mas quando clico em ok. nao acontece nada nao aparece nem o alert com alguma informação que deveria aparecer.

 

<form action="colunas/publicar.php" method="post" id="tinymce">
	<font size='2' face='Trebuchet MS' color='#c0ff00'>Título: </font>
<input type="hidden" name="nome" id="nome" value="<?php echo $_SESSION['nome'] .' '. $_SESSION['sobrenome']; ?>" />
<input type="hidden" name="idautor" id="idautor" value="<?php echo $_SESSION['id']; ?>" />
<input name="titulo" type="text" size="40">
 <font size='2' face='Trebuchet MS' color='#c0ff00'>Data para publicar: </font>
 <input name="data" type="text" value="<?php echo $data; ?>" size="30">
  <br />
 <font size='2' face='Trebuchet MS' color='#c0ff00'>Coluna:</font><br><textarea name="teste" id="teste">Teste de Texto</textarea>
<br />	
<input type="button" name="ok" id="ok" value="ok" />
</form>

 

<script type="text/javascript">
tinyMCE.init({
       theme : "advanced",
       mode : "textareas"
});
window.onload = function(){
       document.getElementById('ok').onclick = function(){
               alert( tinyMCE.get('teste').getContent() );
       }
}
</script>

 

var params = $(this).serialize();
alert( params );

Compartilhar este post


Link para o post
Compartilhar em outros sites

aqui:

window.onclick = function(){

 

 

deveria ser:

window.onload = function(){

 

pelo que testei, está funcionando perfeitamente o getContent();

 

oque você colocar no textarea, e depois clicar no OK, aparece no alert.

Compartilhar este post


Link para o post
Compartilhar em outros sites

o onclick ali foi um teste que fiz testei com onload antes e não deu nada, agora deixei exatamente como você disse, tirei os forms tirei tudo deixei só o textarea e o button e mesmo assim não acontece nada. =/

 

Se quiser testar www.revistahei.net/2011

login: teste

senha: teste

 

colunas > nova coluna.

Compartilhar este post


Link para o post
Compartilhar em outros sites

valide o teu css, valide o teu HTML.

 

 

Aperte Ctrl+Shif+J no Firefox, veja o erro qndo aperte no OK:

tinyMCE.get is not a function

 

ou seja, a tua versão do Tiny não possui esse método. Sugiro que você baixe a mais recente no site.

tem muitos erros, corrija.. valide tudo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vou baixar a nova versão quem sabe nele já tem a solução pra esse problema né?!

 

O que você quer dizer quando diz, valide o css e o html?

 

Valeu William, sempre me ajudando. abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites
  Em 19/02/2011 at 16:01, MiguelTb disse:

O que você quer dizer quando diz, valide o css e o html?

isso aqui:

 

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.revistahei.net%2F2011%2Fgeral.css

 

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.revistahei.net%2F2011%2F

 

escreva tudo oque for propriedades e valores CSS em minúsculo!

o mesmo para tags, atributos e valores HTML

Compartilhar este post


Link para o post
Compartilhar em outros sites

Troquei para uma versão mais nova, e mesma assim continua a mesma coisa, não fiz os testes que você me pediu, vou ter que sair agora, mas depois vou tentar fazer tudo que você disse com uma versão nova. Porque continua com o mesmo problema. Que pena =/ não sei porque o motivo disso.

 

E depois irei validar os meus códigos, valeu a dica desses sites ai.

 

Será que não teria uma forma de antes de inserir no db ele passar o que está escrito dentro do textarea pra um input invisivel com outra variavel e adicionar essa variavel como conteudo da coluna? ^^

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então galera, consegui resolver esse problema da seguinte forma.

 

Ativando uma opção do tinymce que salva qualquer alteração feita no textarea. Você deve acrescentar no seguinte código:

<script type="text/javascript">
tinyMCE.init({

       // General options
       mode : "textareas",
       theme : "advanced",
....

Substitui isso por esse que ele tem uma função que salvar qualquer alteração feita.

 

<script type="text/javascript">
tinyMCE.init({

       // General options
       mode : "textareas",
       theme : "advanced",
       plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

       // Theme options
       theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
       theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
       theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
       theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "bottom",
       theme_advanced_resizing : true,

       // Skin options
       skin : "o2k7",
       skin_variant : "silver",

       // Example content CSS (should be your site CSS)
       content_css : "colunas/editor/css/example.css",

       // Drop lists for link/image/media/template dialogs
       template_external_list_url : "colunas/editor/js/template_list.js",
       external_link_list_url : "colunas/editor/js/link_list.js",
       external_image_list_url : "colunas/editor/js/image_list.js",
       media_external_list_url : "colunas/editor/js/media_list.js",

       // Replace values for the template plugin
       setup : function(ed) {
	ed.onChange.add(function(ed) {
	tinyMCE.triggerSave();
		});
		}
		});
</script>

 

E também acrescentar no botão de enviar o seguinte código:

onClick="'tinyMCE.triggerSave(true,true);'"

ficando:

<input type="submit" onClick="'tinyMCE.triggerSave(true,true);'" name="submit" value="Enviar" />

 

Valeu galera, abraços e obrigado William, as suas dicas me ajudaram a chegar nesse resultado e ainda mais melhorar o desempenho do meu site, com os sites que você citou.

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.