[Resolvido] Chamar função quando carrega elemento

[Rafael R.P 2]

Bom dia pessoal,

 

tem como chamar uma função JS quando carrega tal elemento, porque estou usando ajax e preciso que carregue uma função para dar Hide no elemento assim que o include ajax for carregado!

 

Obrigado :)

[Otata 4]

tem sim.. qual o problema que está tendo?

[Rafael R.P 2]

seguinte, eu estou usando ajax, quando boto para abrir o mensagens.php, ele teria que dar hide no elemento da mensagem e deixar somente assunto, data e tal.. a funcao que da hide é um JS mas não funciona pq ele teria que dar refresh na pagina para pegar o elemento, por isso queria botar quando carrega o elemento..

[Otata 4]

então, quando chamar o ajax você chama a função...posta o code..

[Rafael R.P 2]

Mensagens.php

<div id="ListaMensagens">

<h2>Mensagens</h2>

<table class="lst_msg" border="0" cellspacing="0" width="100%" cellpadding="0">

<tr>

<th></th>

<th>Assunto</th>

<th>Nome</th>

<th>Cidade</th>

<th>Data</th>

</tr>

 

<?php

require('conn.php');

$sql = mysql_query("select * from mensagens order by men_codigo desc");

$cont = 0;

while($x = mysql_fetch_assoc($sql)){

$cont++;

?>

<tr id="listar_mensagens_over" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">

<td width="30" align="center"><?php echo $cont . " - " ?></td>

<td width="400" align="center"><?php echo $x['men_assunto'] ?></td>

<td width="200" align="center"><?php echo $x['men_nome'] ?></td>

<td width="100" align="center"><?php echo $x['men_cidade'] ?></td>

<td width="150" align="center"><?php echo implode("/", array_reverse(explode("-", $x['men_data']))); ?></td>

<td width="25" align="center"><a href="java script:;" onclick="toggle('hidden<?=$cont?>');"><img src="../imagens/add.png" title="Abrir mensagens." /></a></td>

<td width="25" align="center"><a href="java script:;" onclick="abre('config.php?menu=mensagens&acao=responder')"><img src="../imagens/book.png" title="Responder.." /></a></td>

<td width="25" align="center"><a href="java script:;" onclick="abre('config.php?menu=mensagens&acao=excluir&id=<?=$x['men_codigo']?>')"><img src="../imagens/delete.png" title="Excluir." /></a></td>

</tr>

<tr onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">

<td colspan="8" align="center">

<div id="hidden<?=$cont?>" onload="java script:Hide('hidden<?=$cont?>')">

<p><? echo $x['men_mensagem']; ?></p>

</div>

</td>

</tr>

<? } ?>

</table>

</div>

Funtions.js

function Virgula(objeto){

if(objeto.value.length == 2){

objeto.value = objeto.value+".";

}

}

 

function mudar_cor_over(celula){

celula.style.backgroundColor="#F2F0A2"

}

function mudar_cor_out(celula){

celula.style.backgroundColor="#F2EEE5"

}

 

function toggle(obj) {

var element = document.getElementById(obj);

if ( element.style.display != 'none' ) {

element.style.display = 'none';

}

else {

element.style.display = '';

}

}

 

function Hide(obj){

var element = document.getElementById(obj);

element.style.display = '';

}

 

ajax.php

<script type="text/javascript">

function abre(arquivo){

var xmlHttp;

try {

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e) {

// Internet Explorer

try {

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e){

try {

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e) {

alert("Seu navegador não suporta AJAX. Atualize-o em www.getfirefox.com");

return false;

}

}

}

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState == 1) {

document.getElementById("content").innerHTML = '<img src="../imagens/ajax-loader.gif" width="220" height="19" />';

}

if(xmlHttp.readyState == 4) {

document.getElementById("content").innerHTML = xmlHttp.responseText;

}

}

xmlHttp.open("GET",arquivo,true);

xmlHttp.send(null);

}

</script>

 

 

Tenho o principal.php onde tem a div que vai o resultado do ajax..

resumindo.. ajax chama mensagens.php que chama por uma query no banco os dados das mensagens, oque eu preciso é que aconteça um hide na div HIDDEN no mensagens.php

 

:-)

[alexandrepo 0]

Rafael, o próprio método readyState (if(xmlHttp.readyState == 4) {) possui 4 estados:

0 - Ainda não iniciado

1 - Carregando

2 - Carregado

3 - Uma parte recebida

4 - Todos os dados recebido

 

O único que eu confio como crossbrowser é o 4, já tive problemas com o 0 e o 1 no IE6.

 

Para resolver seu problema é só colocar o comando hide abaixo do document.getElementById("content").innerHTML = xmlHttp.responseText;, ficando assim:

if(xmlHttp.readyState == 4) {
	document.getElementById("content").innerHTML = xmlHttp.responseText;
	Hide(obj);
}

Eu recomendo que você use alguns frameworks para js como o caso do http://docs.jquery.com/Ajax/load#urldatacallback que você fará o que precisa com apenas 1 linha de código.

 

editado por Otata 26/02/2009 13:15

[Rafael R.P 2]

deu certo cara, mas tem um problema, eu preciso por um php na funcao, pq tem que ser o seguinte.. Hide('hidden<?=$cont?>'); dai ja não da certo..

[webmind 5]

deu certo cara, mas tem um problema, eu preciso por um php na funcao, pq tem que ser o seguinte.. Hide('hidden<?=$cont?>'); dai ja não da certo..

 

experimenta

Hide('hidden'<?=$cont?>)

[Rafael R.P 2]

nada....

[Rafael R.P 2]

Pessoal o estranho é que se eu boto Hide('hidden4') ele da um hide na div 04 que o programa cria, o problema está sendo botar o php ali mesmo...

[alexandrepo 0]

Faz o seguinte então

 

altere seu function abre(arquivo){

para : function abre(arquivo,el){

 

daí é só colocar no HTML o <?= cont ?>

 

Assim ó :

<a href="java script:;" onclick="abre('config.php?menu=mensagens&acao=excluir&id=<?=$x['men_codigo']?>',<?= cont ?>)">

 

em seguida no javascript você trabalha o elemento

 

if(xmlHttp.readyState == 4) {

document.getElementById("content").innerHTML = xmlHttp.responseText;

Hide('hidden'+el);

}

[Rafael R.P 2]

concegui com um while, coloquei um limite de 50 mensagens..

 

if(xmlHttp.readyState == 4) {

document.getElementById("content").innerHTML = xmlHttp.responseText;

 

cont = 0;

while (cont < 50) {

cont++;

Hide('hidden' + cont);

}

}

mas aproveitando o topico vou fazer outra pergunta..

 

tenho a funcao para alert se o usuario deseja mesmo exluir

function alerta(url,msg) {

deleta = confirm("Deseja mesmo excluir?");

if(deleta==true){

location=url;

}

}

e o link onde clica para exluir, mas a minha duvida é.. como aplico essa funcao com nesse ajax?

 

<td width="25" align="center"><a href="java script:;" onclick="abre('config.php?menu=mensagens&acao=excluir&id=<?=$x['men_codigo']?>')"><img src="../imagens/delete.png" title="Excluir." /></a></td>

[alexandrepo 0]

tenta assim:

<a href="java script:;" onclick="if(confirm('Deseja mesmo excluir')){ abre('config.php?menu=mensagens&acao=excluir&id=<?=$x['men_codigo']?>')}"><img src="../imagens/delete.png" title="Excluir." /></a>

[Rafael R.P 2]

deu certo!!!

 

obrigado por solucionar minhas dúvidas!! :-)