Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde a todos.
Tenho uma pequena dúvida quanto ao enviar dados por javascript. Abaixo segue o link de um tutorial que quase sanou minha dúvida.
http://www.christopherchin.com/blog/demos/jquery/jquerydialog2.html
É o seguinte... preciso abrir algum conteudo especifico dentro de um dialog window do jqueryui, sendo assim achei esse código originado do link acima:
<scritp>
$(document).ready(function(){
//define config object
var dialogOpts = {
title: "My First AJAX dialog",
modal: true,
autoOpen: false,
height: 500,
width: 500,
open: function() {
//display correct dialog content
$("#example").load("beta/loremipsum.html");}
};$('#showdialog').click(
function (){
$("#example").dialog("open");
return false;
}
);
});
</script>
<body>
<a href="" id="showdialog">Mostrar Conteudo Primário</a>
<div style="display: none;" id="example" title="My First Ajax Dialog"></div>
</body>Ou seja, quando é clicado no link ele abri a div "example" em modal window e carrega o arquivo html citado no código.
O que eu quero fazer é quase isso, mas de uma maneira dinamica. Quero ter vários links:
<body>
<a href="" id="showdialog">Mostrar Conteudo Primário</a> <!-- aqui abriria paginaum.php -->
<a href="" id="showdialog">Mostrar Conteudo Segundário</a> <!-- aqui abriria paginadois.php -->
<a href="" id="showdialog">Mostrar Conteudo Terceiro</a> <!-- aqui abriria paginatres.php -->
<div style="display: none;" id="example" title="My First Ajax Dialog"></div>
</body>Só que sempre abrindo na mesma DIV, a questão é como transmitir na hora do click qual página quero abrir. Ou seja, escrever no trecho:
//display correct dialog content
$("#example").load("beta/loremipsum.html");} <----- AQUI, escrever a pagina que quero abrir, só que dinamicamente ---->
};
Entenderam? Espero muito que alguem possa me ajudar por favor.
Desde já sou grato.
Lucas Borges
Putz! Cara Perfeito!!! Me salvou! Funcionou certinho. Só alguns detalhes que ficaram pendentes, tais como o TITLE não aparece na Janela Modal e uma dúvida. Se caso eu opta-se por abrir um site dentro da Dialog, como eu procedo?
Friso novamente, ficou fantástica sua solução, espero que possa me ajudar nesses 2 detalhes acima. Você é um gênio.
Muito Obrigado.
opa Vlw!
Mas eu não entendi o do TITLE, você não quer que apareça o title? Se sim, é só remover a linha:
$('#dialog').dialog({title: $(this).attr('title')});
Assim:
$('.showdialog').click(function (){
$("#dialog").load($(this).attr('href'));
$("#dialog").dialog('open');
return false
});Mas se você for utilizar dependendo do elemento eu acho melhor colocar uma condição apenas, caso tenha um title no elemento 'a' ele pega o title se não não. E sobre carregar a página, você precisa fazer isso na sua linguagem server-side, vejo q você está utilizando php, então pode ser assim:
PHP - teste.php
<?php
if(isset($_POST['url'])){
echo file_get_contents($_POST['url']); echo 'Erro, url inexistente';
}
?>HTML
<ul>
<li><a href="index.html" class="showdialog">Mostrar Conteudo Primário</a></li>
<li><a href="http://www.google.com.br" class="showdialog" title="Conteúdo Secundário">Google</a></li>
<li><a href="paginatres.php" class="showdialog" title="Conteúdo Terceiro">Mostrar Conteudo Terceiro</a></li>
</ul>
<div id="dialog"></div>Jquery
$(document).ready(function(){
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 500,
width: 500,
draggable: true,
resizeable: true
}
$("#dialog").dialog(dialogOpts);
$('a.showdialog').click(function (event){
event.preventDefault();
url = $(this).attr('href');
$("#dialog").load('teste.php',{'url': url});
if($(this).attr('title')){
$('#dialog').dialog({title: $(this).attr('title')});
}
$("#dialog").dialog('open');
});
});Claro que isto é um exemplo simples sem testes de segurança.
Certo senhor Douglash, compreendi sua instrução, quanto a questão do TITLE, eu quis dizer que ele não esta aparecendo... Achei estranho pois no seu código ele aparentemente captura o TITLE da tag "a" ... Mas por algum motivo não está aparecendo, você tem idéia do que está acontecendo?
Obs: Se na DIV dialog eu colocar o atributo TITLE, ai ele aparece na MODAL WINDOW, mas não está capturando a partir da tag "a".
Aguardo e novamente muito obrigado pela ajuda.
Cara, a unica coisa que eu acho q pode ser o problema é a versão do jquery ou do jquery ui que você esteja utilizando, você está utilizando a ultima versão do jquery e do jquery ui dialog?
Acho q só pode ser isso, pois o parametro {title:title} é padrão do dialog.
Opa, seria mais menos assim:
Html
Jquery
Assim o conteúdo da div #dialog que é o form modal do dialog terá o conteúdo chamado na url do elemento que 'a' que possuir a classe 'showdialog'.