Ir para conteúdo

POWERED BY:

Arquivado

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

Mr. Borges

Jquery UI Dialog

Por , em Javascript

Recommended Posts

Mr. Borges    0

Mr. Borges
Postado

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");}
       };
$("#example").dialog(dialogOpts);    //end dialog

   $('#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

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

Opa, seria mais menos assim:

 

Html

   <ul>
       <li><a href="paginaum.php" class="showdialog" title="Conteúdo Primário">Mostrar Conteudo Primário</a></li>
       <li><a href="paginadois.php" class="showdialog" title="Conteúdo Secundário">Mostrar Conteudo Segundário</a></li>
       <li><a href="paginatres.php" class="showdialog" title="Conteúdo Terceiro">Mostrar Conteudo Terceiro</a></li>
   </ul>

   <div id="dialog"></div>

 

Jquery


<script type="text/javascript">

   $(document).ready(function(){

   var dialogOpts = {
	modal: true,
	bgiframe: true,
	autoOpen: false,
	height: 500,
	width: 500,
	draggable: true,
	resizeable: true	
	}

   $("#dialog").dialog(dialogOpts);
   $('.showdialog').click(function (){
        $("#dialog").load($(this).attr('href'));
        $('#dialog').dialog({title: $(this).attr('title')});
 $("#dialog").dialog('open');
        return false
   });

});


</script>

 

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'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr. Borges    0

Mr. Borges
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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']);
}else{
  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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr. Borges    0

Mr. Borges
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito