[Resolvido] Problemas com Ajax Loader

[MiguelTb 2]

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

[William Bruno 1501]

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

[MiguelTb 2]

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.

[William Bruno 1501]

coloca ai o html do teu formulário.

 

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

[MiguelTb 2]

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.

[William Bruno 1501]

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

[MiguelTb 2]

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

[William Bruno 1501]

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.

[MiguelTb 2]

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.

[William Bruno 1501]

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.

[MiguelTb 2]

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

[William Bruno 1501]

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

[MiguelTb 2]

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? ^^

[MiguelTb 2]

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