[Resolvido] window.open - target - modal

[sfonseca45 0]

Boa Tarde

 

Não estou conseguindo através do window.open utilizar a clausula target, preciso disso pois na target eu chamo uma janela tipo modal

 

meu script

 

<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 (url,"modal_bairro");
}
</script>

 

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

[Evandro Oliveira 331]

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}); });
}

[sfonseca45 0]

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

[Evandro Oliveira 331]

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));

[sfonseca45 0]

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

[Evandro Oliveira 331]

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.

[sfonseca45 0]

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

[sfonseca45 0]

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

[Evandro Oliveira 331]

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

 

 

[sfonseca45 0]

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

[Evandro Oliveira 331]

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.

[sfonseca45 0]

Estou usando o Firefox ...

Não sei depurar erros ...

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

[Evandro Oliveira 331]

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/

[sfonseca45 0]

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>
<!-- ******** BEGIN LIKNO WEB MODAL WINDOWS CODE FOR moda-paciente ******** -->
<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>
<!-- ******** END LIKNO WEB MODAL WINDOWS CODE FOR moda-paciente ******** -->

<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

[Evandro Oliveira 331]

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.

[sfonseca45 0]

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?

[Evandro Oliveira 331]

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');

[sfonseca45 0]

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