[Resolvido] window.open - target - modal

Tem, reescreva a window.open para trabalhar de forma modal.

Você pode utilizar uma biblioteca como a jQuery UI e apontar window.open para abrir a modal

window.open = function (url, targetId) {
 var item = $('#' + targetId);
 item.load(url, function () { item.dialog({modal: true}); });
}

Obrigado pela resposta, mas não consegui

Tentei assim

<script type="text/javascript">
function consulta() {

var url = "add_bairro.php?estadoID=";
url+= document.getElementById("lstEstado").value;
url+= "&cidadeID=" + document.getElementById("lstCidade").value;
window.open = function (url, targetId) {
 var item = $('#' + "modal_bairro");
 item.load(url, function () { item.dialog({modal: true}); });
}
}

e chamando a biblioteca jquery.js no HEAD, mas não funcionou ..

Também é necessário importar a jQuery UI e as suas modificações devem ficar depois do evento de load para que toda a API da jQuery esteja disponível:

;(function (window, $) {
 $(document).ready(function () {
 window.open = function (url, data) {
 if (!this.prototype.modal) {
 this.prototype.modal = $('#modal_bairro');
 }
 modal.load(url, data, function () {
 modal.dialog({ modal: true });
 );
 };
 window.consulta = function () {
 var data = {
 estadoId: document.getElementById('lstEstado').value,
 cidadeId: document.getElementById('lstCidade').value
 };
 window.load('add_bairro.php', data);
 };
 });
}(this, jQuery));

Mais uma vez obrigado, desculpe pela ignorância ...

-> coloco este script no lugar do meu ou apenas acrescento ele ? Pergunto isso pq no inicio do seu script tem um ";"

-> como faço para chamar a função que você criou?

Obrigado

>
Mais uma vez obrigado, desculpe pela ignorância ...

-> coloco este script no lugar do meu ou apenas acrescento ele ? Pergunto isso pq no inicio do seu script tem um ";"

-> como faço para chamar a função que você criou?

Obrigado

Depois ou no lugar, tanto faz.

Deveria funcionar do jeito que está. Tem o mesmo nome da função que você já utilizava.

Ok

Coloquei na minha função / / e substitui pela sua mas não funcionou - não abriu nada.

Mas vamos lá - quero aprender.

Pq você colocou "protype.modal" eu chamo o modal de um js externo

<script type="text/javascript" src="../pacientes/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">var lwmwLinkedBy="LiknoWebModalWindows [1]",lwmwName="moda-paciente",lwmwBN="210";</script><script charset="UTF-8" src="js/moda-paciente.js" type="text/javascript"></script>

Pelo que pesquisei não é necessário um função tipo (#id).click na sua função ?

Mudei para isso

 $(document).ready(function () {
	$(#addBairro).click(function {
	function (window, $) {
 window.open = function (url, data) {
 if (!this.prototype.modal) {
 this.prototype.modal = $('#modal_bairro_single');
 }
 modal.load(url, data, function () {
 modal.dialog({ modal: true });
 );
 };
 window.addBairro = function () {
 var data = {
 estadoId: document.getElementById('lstEstado').value,
 cidadeId: document.getElementById('lstCidade').value
 };
 window.load('add_bairro.php', data);
 };
 });
});
}(this, jQuery));
</script>

E não funcionou

Obrigado

Consegui abrir o modal assim:

<script type="text/javascript">
$(document).ready(function () {
 $("a[rel~=external]").attr("target", "modal_bairro_single");
});
</script>

e no link:

<a href="javascript:consulta()" rel="external">Cadastrar bairro</a>

Abri o modal mas não executa a função consulta() ...

Estamos chegando lá ...

Tinham alguns errinhos de sintaxe. Este aqui está inclusive testado e passa no JSLint com as seguintes config:

/jslint browser: true, maxerr: 50, maxlen: 80, indent: 4 /
Predefined: jQuery

(function ($) {
 "use strict";
 $(document).ready(function () {
 window.open = function (url, data) {
 var modal;
 if (!window.open.prototype.modal) {
 window.open.prototype.modal = $('#modal_bairro');
 }
 modal = window.open.prototype.modal;
 modal.load(url, data, function () {
 modal.dialog({modal: true});
 });
 };
 window.consulta = function () {
 var data = {
 estadoId: document.getElementById('lstEstado').value,
 cidadeId: document.getElementById('lstCidade').value
 };
 window.open('', data);
 };
 });
}(jQuery));

Pq você colocou "protype.modal" eu chamo o modal de um js externo

Esta técnica se chama "caching". Se você chama o modal pela primeira vez, ele não tem um alvo, o elemento que será responsável por abrir a janela modal na página. Então ele faz essa verificação e "guarda" o elemento no protótipo. Das próximas vezes que a janela modal for chamada, não será necessário percorrer toda a árvore DOM novamente para funcionar.

Pelo que pesquisei não é necessário um função tipo (#id).click na sua função ?

E você já não fazia isso???

>
[...]

Como podem ver passos alguns valores de 2 combo para poder cadastrar um bairro nosso.

No link para abrir o modal

<a href="" onclick="javascript:consulta();" >Cadastrar bairro</a>

Ele abre mas numa pagina em branco.

Será que existe alguma solução?

Obrigado

Obrigado pela paciencia ... mas não funciona ... qudo coloco seu script e no ONCLICK da link "consulta()" não faz nada ... não abre nada ...

>
Obrigado pela paciencia ... mas não funciona ... qudo coloco seu script e no ONCLICK da link "consulta()" não faz nada ... não abre nada ...

Qual navegador você está utilizando?? Sabe depurar os erros??

Pra "não estar funcionando", alguma mensagem ele deve estar emitindo.

Estou usando o Firefox ...

Não sei depurar erros ...

Não dá mensagem de erro nenhuma ... apenas quando você clica nada acontece ...

>
Estou usando o Firefox ...

Não sei depurar erros ...

Não dá mensagem de erro nenhuma ... apenas quando você clica nada acontece ...

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Fiz o que manda no site (CTRL + SHIFT + J) para debugar o js ... por incrível que pareça não deu nenhum erro ...

olha o ocodigo da pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
(function ($) {
 "use strict";
 $(document).ready(function () {
 window.open = function (url, data) {
 var modal;
 if (!window.open.prototype.modal) {
 window.open.prototype.modal = $('#modal_bairro_single');
 }
 modal = window.open.prototype.modal;
 modal.load(url, data, function () {
 modal.dialog({modal: true});
 });
 };
 window.consulta = function () {
 var data = {
 estadoId: document.getElementById('lstEstado').value,
 cidadeId: document.getElementById('lstCidade').value
 };
 window.open('add_bairro.php', data);
 };
 });
}(jQuery));
</script>
</head>
<body>

<form id="form1" name="form1" method="post" action="">
 <label>
 <select name="lstEstado" id="lstEstado">
 <option value="0">Selecione</option>
 <option value="1">Bahia</option>
 <option value="2">São Paulo</option>
 <option value="3">Rio de Janeiro</option>
 </select>
 </label>
 <label>
 <select name="lstCidade" id="lstCidade">
 <option value="0">Selecione</option>
 <option value="1">Bahia</option>
 <option value="2">São Paulo</option>
 <option value="3">Rio de Janeiro</option>
 </select>
 </label>
 <p><a href="" onclick="consulta()">Testar Modal </a></p>

</form>
</body>

</html>

Eu já tô até meio tonto de tantp nervoso ... (rs) ...

Aonde estou errando se você disse que seu script é funcional ....

Obrigado

Veja, estamos procurando por uma DIV cujo ID seja modal_bairro_single que não existe. Como você quer que ela apareça?

Para fins de teste, comente ou remova a inclusão dos scripts entre os comentários.

Não existe a div ... pq não precisa ... ele abre com um arquivo externo ...

Estive pesquisando e estou tentando fazer um script.

qual a idéia : quando ele escolhe um estado o jquery altera o link ea mesma coisa quando ele escolhe a cidade

$(document).ready(function(){
 $('#lstEstado').change(function() {
 var codestado = $('option:selected',this).val();
 });
 $('#lstCidade').change(function() {
 var codcidade = $('option:selected',this).val();
 });
 e.preventDefault();
 var codestado = $('select[name=lstEstado]').val();
 var codcidade = $('select[name=lstCidade]').val();
 var varUrl = ('add_bairro.php?estadoID=' + codestado + '&cidadeID=' + codcidade);
 $('#addBairro').attr('href', varUrl);
 })

o que você acha?

>
Não existe a div ... pq não precisa ... ele abre com um arquivo externo ...

Estive pesquisando e estou tentando fazer um script.

qual a idéia : quando ele escolhe um estado o jquery altera o link ea mesma coisa quando ele escolhe a cidade

$(document).ready(function(){
 $('#lstEstado').change(function() {
 var codestado = $('option:selected',this).val();
 });
 $('#lstCidade').change(function() {
 var codcidade = $('option:selected',this).val();
 });
 e.preventDefault();
 var codestado = $('select[name=lstEstado]').val();
 var codcidade = $('select[name=lstCidade]').val();
 var varUrl = ('add_bairro.php?estadoID=' + codestado + '&cidadeID=' + codcidade);
 $('#addBairro').attr('href', varUrl);
 })

o que você acha?

veja, jQuery.load, utilizada anteriormente, já faz toda a mágica de pegar valor e montar a URL para você de forma transparente.

Não precisa de todo esse malabarismo...

$.load('add_bairro.php', {'estadoId': $('select[name=lstEstado]').val(), 'cidadeId': $('select[name=lstCidade]').val(), function (data) { alert ('dados carregados: ' + data); }, 'text');

Problema resolvido

utilizei o seguinte script

$(document).ready(function() {
 $('#lstCidade').change(function() {
 var codcidade = $('option:selected', this).val();
 $('a.submodal').attr('href', 'add_bairro.php?cidadeID=' + codcidade);
 });
});

e no link

<a href="#" id="link" class="submodal">link</a>

e para o modal utilizei o submodal:

Clique aqui

Muito obrigado pela paciência e pelas informações foram úteis ...

Abraços