Portlet+JQuery+PHP

[Dark Tranquility 0]

Boa noite pessoal,

bom, sabe no jquery quando precisamos pegar o valor de um input por exemplo?

 

Pois é, desta vez, o problema é que preciso pegar o array das posições das colunas do portlet e jogar no post do jquery para eu poder salvar em banco de dados com PHP.

 

Bom, acontece que nunca consigo passar o valor das posições para uma variável no jquery.

 

Vou postar todo o código aqui para não restarem mais dúvidas:

 

* transformei a função javascript em função do jquery.

 

script.js

 

$(document).ready(function saveImageOrder()
{

    var orderString = "";
    var objects = document.getElementsByTagName('div');

	for(var no=0;no<objects.length;no++){
		if(objects[no].className=='portlet' || objects[no].className=='portletHighlighted'){
			if(objects[no].id != "foo" && objects[no].parentNode.id != "dragDropContent")
                        { // Check if it's not the fake image, or the drag&drop box
				if(orderString.length>0){
					orderString = orderString + ',';
					}
				orderString = orderString + objects[no].id;
                            }
			}
		}

	//document.getElementById('debug').innerHTML = 'This is the new order of the images(IDs) : <br />' + orderString;

        var box = document.getElementById('box').innerHTML=orderString;

	$("#portlet_form").submit(function()
	{
            // To disable button
             $('#submit').attr('disabled', 'disabled');

            //remove all the class add the messagebox classes and start fading
            $("#debug").removeClass().addClass('messagebox').text('Aguarde...').fadeIn(1000);
            //check the username exists or not from ajax
            $.post("trata_portlet.php",
            {
                $box: $('#box').val(box),
                rand:Math.random()
            }
            ,function(data)
            {
                if(data=='yes') //if correct login detail
		  {
                      $("#debug").fadeTo(200,0.1,function()  //start fading the messagebox
                      {
                          //add message and change the class of the box and start fading
			  $(this).html('Salvando...').addClass('messageboxok').fadeTo(900,1, function()
			  {
			  	 //redirect to secure page
				 //document.location='?param=adminSiteHdd&pg=home';
                                 //document.location=document.location; // para entrar de onde parou
                                 $(this).html('Dados salvos com sucesso').addClass('messageboxok').fadeTo(900,1);
                                 $("#portlet_form").hide();
                          });

			});
		  }
		  else
		  {
		  	$("#debug").fadeTo(200,0.1,function() //start fading the messagebox
			{
			  //add message and change the class of the box and start fading
			  //$(this).html('Problemas ao efetuar cadastro!').addClass('messageboxerror').fadeTo(900,1);
                          $(this).html(data).addClass('messageboxerror').fadeTo(900,1);
                          // To enable
                          $('#submit').removeAttr('disabled');
                          // OR you can set attr to ""
                          $('#submit').attr('disabled', '');
			});
                    }
                });
                return false; //not to post the  form physically
                });

                //now call the ajax also focus move from
	$('#box').blur(function()
	{
		$("#portlet_form").trigger('submit');
	});
});

Aqui está o trecho do problema:

 

var box = document.getElementById('box').innerHTML=orderString;

 

$.post("trata_portlet.php",

{

$box: $('#box').val(box),

rand:Math.random()

}

 

a variável $box nunca recebe o valor de box, mesmo eu tentando add um

document.getElementById('box') em value de um input do tipo hidden no form.

 

exemplo:

index.php

<script src="media/system/js/jquery.js"></script>
<script type="text/javascript" src="modules/mod_portlet/ff_portlet_img-adaptado/js/floating-gallery.js"></script>
<style>
    @import "modules/mod_portlet/ff_portlet_img-adaptado/css/style.css";
</style>
<?php
             // inicio da tabela de portlet
            //  echo "<div id=\"container\">";  // container do portlet
              echo "<table cellspacing=\"0\" id=\"columns\"><tr>";
              echo "<td valign=\"top\" style=\"border: solid 2px #ccc;\">";
            ?>
            <div id="esquerda" class="grid_3">

                <div class="portlet" id="portlet0">
                    <div class="portlet_topper">
                        1. <a href="#" class="toggle">Prefeitura</a>
                    </div>
                    <div class="moduletable-menu">
                        <div class="portlet_topper">
                            <!--<a href="#" class="toggle">-->
                                <h3>
                                    <span <?php //title="Clique para editar" style="cursor: pointer;" ?> id="userName" class="editText">Prefeitura</span>
                                </h3>
                            <!--</a>-->
                        </div>
                        <div class="portlet_content">
                            <ul class="menu">
                                <li class="item55"><a href="/index.php/prefeito"><span>Prefeito</span></a></li>
                                <li class="item56"><a href="/index.php/vice-prefeito"><span>Vice-Prefeito</span></a></li>
                                <li class="item57"><a href="/index.php/projetos"><span>Projetos</span></a></li>
                                <li class="item58"><a href="/index.php/orgaos-municipais"><span>Órgãos Municipais</span></a></li>
                                <li class="item59"><a href="/index.php/administracao-regional"><span>Administração Regional</span></a></li>
                                <li class="item60"><a href="/index.php/noticias"><span>Notícias</span></a></li>
                                <li class="item61"><a href="/index.php/ex-prefeitos"><span>Ex-Prefeitos</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="portlet" id="portlet1">
                    <div class="portlet_topper">
                        2. <a href="#" class="toggle">Secretarias</a>
                    </div>
                    <div class="moduletable-menu">
                        <div class="portlet_topper">
                            <h3>Secretarias</h3>
                        </div>
                        <div class="portlet_content">
                            <ul id="mainlevel">
                                <li><a href="/index.php/comunicacao" class="mainlevel">Comunicação</a></li>
                                <li><a href="/index.php/administracao" class="mainlevel">Administração</a></li>
                                <li><a href="/index.php/agricultura" class="mainlevel">Agricultura</a></li>
                                <li><a href="/index.php/acao-social" class="mainlevel">Ação Social</a></li>
                                <li><a href="/index.php/educacao" class="mainlevel">Educação</a></li>
                                <li><a href="/index.php/esportes" class="mainlevel">Esportes</a></li>
                                <li><a href="/index.php/financas" class="mainlevel">Finanças</a></li>
                                <li><a href="/index.php/governo" class="mainlevel">Governo</a></li>
                                <li><a href="/index.php/industria-e-comercio" class="mainlevel">Indústria e Comércio</a></li>
                                <li><a href="/index.php/meio-ambiente" class="mainlevel">Meio Ambiente</a></li>
                                <li><a href="/index.php/obras" class="mainlevel">Obras</a></li>
                                <li><a href="/index.php/proger" class="mainlevel">Proger</a></li>
                                <li><a href="/index.php/saude" class="mainlevel" >Saúde</a></li>
                                <li><a href="/index.php/turismo" class="mainlevel" >Turismo</a></li>
                                <li><a href="/index.php/transportes" class="mainlevel" >Transportes</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
<form id="portlet_form" method="post" onsubmit="return false">
                    <div style="clear:both;padding-bottom:10px">
                        <input type="hidden" name="box" id="box">
                        <input type="submit" id="submit" style="width:100px" value="Salvar" onclick="saveImageOrder();">
                    </div>
                </form>

                <div id="insertionMarker">
                    <img src="modules/mod_portlet/ff_portlet_img-adaptado/images/marker_top.gif">
                    <img src="modules/mod_portlet/ff_portlet_img-adaptado/images/marker_middle.gif" id="insertionMarkerLine">
                    <img src="modules/mod_portlet/ff_portlet_img-adaptado/images/marker_bottom.gif">
                </div>
                <div id="dragDropContent"></div>
                <div id="debug" style="clear:both"></div>

Aqui está o formulario.

<form id="portlet_form" method="post" onsubmit="return false">

<div style="clear:both;padding-bottom:10px">

<input type="hidden" name="box" id="box">

<input type="submit" id="submit" style="width:100px" value="Salvar" onclick="saveImageOrder();">

</div>

 

Se no código javascript eu der um alerta ao clicar no botão funciona belezinha, as posições são mostradas, mas se eu tentar enviar pelo post não pega o valor. Por favor, gostaria de esclarecer isso, já tentei de várias formas passar o valor para a variável $box.

 

Aguardo respostas.

 

Att.

[William Bruno 1501]

Assim:

$.post(
  'trata_portlet.php',
  {box: $('#box').val(),rand:Math.random()},
  function(data){
    alert( data );
}

O que você vai receber do outro lado é:

$_POST['box']

[Dark Tranquility 0]

Sim, sim, eu sei, esta seria a maneira de se fazer se a variável "box" estivesse de fato pegando um valor do formulário, o que não é.

 

Já percebeu que no formulário nem precisava do input hidden de name=box ?

Mas para o jquery acho que precisa, então não sei como fazer outra variável que por si, pega o valor e pode repassar para o jquery. Do modo tradicional não vai funcionar. =/

 

Att.

[William Bruno 1501]

Não tô te entendendo..

var box = document.getElementById('box').innerHTML=orderString;

existem 2 atribuições ai..

oque é orderString ??

 

para enviar variáveis, é só seguir o modelo:

{var1: 'valor1', var2: 'valor2'},

sendo que você receberá:

echo $_POST['var1']; //vai printar 'valor1'

Já deu um alert na tua varíavel box, para ver se ela tem algum valor antes de tentar enviar?

pq não continua usando os métodos jQuery??

 

document.getElementById('box')

seria:

$('#box')

[Dark Tranquility 0]

Seguinte:

 

A variável orderString recebe as posições do portlet, então nada mais normal eu tentar passar esta variável como valor para o post não?! E era por isso que tinha duas atribuições, pq talvez eu tente desmontar o array e enviar no post separadamente para salvar em banco de dados, ou talvez faça isso no tratamento da página php mesmo, ainda não decidi. Mas o que estou tentando dizer é que o jquery não tá recebendo o valor da variável orderString, que recebe as posições mas no alerta consigo, já que é apenas javascript simples.

[Dark Tranquility 0]

Acho que não dá pra fazer isso, tipo:

 

Passar para dentro de: box: $('#box').val() o valor de orderString, pois é apenas isto que preciso.

 

Já tentei:

 

$.post("trata_portlet.php",
            {
                //$box: $('#box').val(),
                $box: $('#box')=orderString,
                rand:Math.random()
            }

mas só fica no aguarde... não é submetido =/

[William Bruno 1501]

?

box: orderString,

ai você recebe um $_POST['box']; com o valor dessa variavel ai.

você está errando a sintaxe da função que é:

variavel: 'valor', outra_variavel: outro_valor_ou_variavel_contendo_o_valor

[Dark Tranquility 0]

Mas sério, não tá dando certo. Eu já tentei assim também mas não dava certo antes.

 

$.post("trata_portlet.php",
            {
                //$box: $('#box').val(),
                $box:orderString,
                rand:Math.random()
            }

trata_portlet.php

<?php
// pegando posicoes do portlet para salvar no banco de dados
$box = $_POST['box'];
if($box) {
    echo 'yes';
} else {
    echo "Não foi possível salvar as posições das colunas do site!";
    return;
}
?>

Resultado após clicar no botão "salvar"

 

Print:

 

[William Bruno 1501]

rapaz!! não tem $ ali não.. em vez de:

$box:orderString,

é só:

box:orderString,

!!

[Dark Tranquility 0]

Afz, funcionou ~~

Só que agora o problema é outro:

 

Coloquei um alert na mensagem de sucesso e nunca recebe o valor da mudança de posições, só recebe de 0 a 7, que é o padrão ~~

 

Vou enviar um arquivo zip com o formulario e o script inteiro, com a função normal e a mesma convertida para jquery.

 

Na função em modo javascript comum: function saveImageOrder(), funciona perfeitamente, mas é claro não é enviada por post com o jquery, então pra mim não vale, pois tem que ser com jquery.

 

Portlet.zip

 

Att.

[Dark Tranquility 0]

Caso seja algo que dê muito trabalho, peço ajuda para realizar a mesma tarefa com este exemplo:

 

http://interface.eyecon.ro/demos/sort.html

* no meu exemplo, incluí o código html:

<input type="button" onClick="serialize(['Coluna1', 'Coluna2', 'Coluna3']); return false;" value="SALVAR">

 

ou este:

 

http://host.sonspring.com/portlets/

 

Ou se possível (que procurei e encontrei no máximo estes 2 links) um tutorial de

portlet+jquery+php+banco de dados

 

Eu queria resolver este problema para postar um tuto com este assunto no fórum mas como não consigo nem resolver a parte do jquery, então não será possível postá-lo =/

 

Agradeço desde já!

Att.

[Tylër 0]

Ow, desculpe reviver este tópico, mas isto muito me interessa em uma cms q estou a utilizar com cakePHP hehe =D

 

Seguinte, vamos nos reunir aqui e estudar este caso, pois é interessante saber isso não acham?

 

Att.