0

Tenho esse código. No click da lupa.gif, gostaria de chamar uma função jquery e jogar uma página para dentro dele com todos os parâmetros passados assim:

HTML:

<img id='' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato' onClick="javascript:AbrePesquisa('/GEN/ASP/GEN0001a.asp?ind_situacao=&tipo_empresa=&ind_classificacao=&p_cod_tipo_contrato=&indsubmit=false&txt_nome_campo_cod=num_contrato&txt_nome_campo_cod_ts=cod_ts_contrato&txt_nome_campo_desc=nome_contrato&ind_tipo_pessoa=J&funcao_executar=PesquisaContratoMontaFilial();&abre_modal=S&ind_alteracao_contrato=&tipo_preco=','Pesquisa_Contrato','Pesquisa Contrato', 700, 500, 20, 15, 'S')">

Onde está o javascript: AbrePesquisa(...), gostaria de chamar o jquery abaixo e com todos os parâmetros passados, ou seja, executar uma página dentro de um Modal JQuery:

<script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>

Como eu faria isso? Tenho todas as dúvidas. Tudo isso no click da imagem lupa.gif

Estava esquecendo de algo extremamente importante. Primeiro, o site é deito em ASP Clássico. Bem, há dois arquivos. Um que vamos chamar de c1.asp e outro eu chama de c1in.asp. bem, no c1.asp, eu tenho uma chamada a uma função asp. No c1in.asp, eu tenho a implementação dessa função. Essa função faz apenas isso: Montar o HTML que tem a lupa e o campo da pesquisa, isso aqui(c1in.asp):

<tr>
        <td class="label_right" nowrap>Contrato&nbsp;</td>
        <td>
            <input type="text" name="num_contrato" value="" size="15" maxlength="17" tabindex="1" OnKeyPress="javascript:MascAlfaNum()" OnKeyDown="TeclaEnter()" onchange="PesquisaContratoMontaFilial();">

            <img id='btnLupa' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato' onClick="">
            <input type="text"  name="nome_contrato" value="" size="50" tabindex="-1" Readonly class="camposblocks">
            <input type="hidden" name="cod_ts_contrato" value="">
            <input type="hidden" name="ind_tipo_pessoa" value="J" />
            <div id="painelModal"></div>
        </td>
    </tr>   

Apenas uma como pode ser visto. E no c1.asp está a chamada:

montaContrato()

Espero que isso ajude.

Pessoal, dessa forma não funcionou:

function AbreModal(URL, name, title, width, height, top, left, replace) {
        $('#dialog').load(URL).dialog({
            modal: true,
            width: width,
            height: height,
            title: title
        });
    } 

A chamada

<img id='btnLupa' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato' onClick="javascript:AbreModal('/GEN/ASP/GEN0001a.asp?ind_situacao=&tipo_empresa=&ind_classificacao=&p_cod_tipo_contrato=&indsubmit=false&txt_nome_campo_cod=num_contrato&txt_nome_campo_cod_ts=cod_ts_contrato&txt_nome_campo_desc=nome_contrato&ind_tipo_pessoa=J&funcao_executar=PesquisaContratoMontaFilial();&abre_modal=S&ind_alteracao_contrato=&tipo_preco=','Pesquisa_Contrato','Pesquisa Contrato', 700, 500, 20, 15, 'S')">

O(s) erro(s) abaixo:

No Chrome me dá esse erro:

Resource interpreted as Stylesheet but transferred with MIME type text/html:

No IE, ele dá uma pausa na execução e esses erros:

SCRIPT1028: Identificador, cadeia ou número esperado

SCRIPT5007: O valor da propriedade 'AbrirModal' é nulo ou não definido; não é um objeto de Função

2
  • Esse AbrePesquisa é uma função certo? Não bastaria adicionar o código do dialogo dentro dela?
    – KaduAmaral
    Commented 3/08/2015 às 17:51
  • @KaduAmaral, acontece que essa função não abre de forma Modal e é necessário que assim se faça, por isso eu necessito do jquery modal ou qualquer outra forma que eu possa abrir de forma Modal. Optei pelo jquery pela facilidade e compatibilidade com vários browsers.
    – pnet
    Commented 3/08/2015 às 18:06

1 Resposta 1

1

Acredito que o método AbrePesquisa seja apenas um wrap para window.open, então no seu arquivo javaScript deve ter algo semelhante ao seguinte:

var AbrePesquisa = function (URL, name, title, width, height, top, left, replace) {
    replace = replace === 'S';
    var specs = "width=" + width + ", height=" + height + ", top=" + top + ", left=" + left;
    var janela = window.open(URL, name, specs, replace);
    janela.addEventListener('load', function () {
        janela.document.title = title;
    }, true);
}

então pode tentar substituir o metodo pelo seguinte:

var AbrePesquisa = function (URL, name, title, width, height, top, left, replace) {
    $( "#dialog" ).load(URL).dialog({
        modal: true,
        width: width,
        height: height,
        title: title    
    });
}

neste caso, as propriedades name, top, left e replace ficariam meio que sem uso.

Como o AP mencionou, ele ainda continua com dificuldades devido a links existentes (CSS, JS), então vou colocar uma alternativa usando iframes:

var dialog = $("#dialog");
var openModal = $("#openModal");

dialog.dialog({
    modal: true,
    autoOpen: false,
});

dialog.load(function () {
    dialog.dialog("open");
});

var AbrirModal = function (url, title, width, height) {
  dialog.dialog("option", "width", width);
  dialog.dialog("option", "height", height);
  dialog.dialog("option", "title", title);
  dialog.attr("src", url);
}
.ui-dialog iframe {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px !important;
    border: 0px none black;
    width: 100% !important;
    height: 100%;    
}
<link href="https://code.jquery.com/ui/1.11.3/themes/flick/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<button id="openModal" onclick='AbrirModal("http://www.javascriptkit.com", "Javascript Kit", 480, 360)'>  
    Abrir Modal
</button>

<iframe id="dialog" class="ui-helper-hidden">
</iframe>

13
  • Cara, eu sei, mas não posso fazer assim. A minha realidade é a seguinte. Nós estamos dando manutenção em um módulo apenas, que está com problemas de operar no Chrome. bem, essa função é usada em todos os módulos do portal, que é enorme, logo não podemos alterar a função. Posso, por exemplo, na página que eu estou alterando, matar a função e colocar outra, pois essa operação só mexe naquela determinada página, mas alterar a função não, devido a outros módulos também se beneficiarem dela. Logo, preciso realmente fazer a chamada ao jquery.
    – pnet
    Commented 3/08/2015 às 18:26
  • Então cria um método AbrePesquisaModal Commented 3/08/2015 às 18:28
  • O erro já resolvi. Eu havia renomeado o nome da div e estava chamando pelo outro nome. Agora, estou com o seguinte problema. Não abre modal e o filtro de pesquisa não funciona e não fiz nada, nenhuma alteração, pois os parâmetros passados são os mesmos. Gostaria que a tela modal viesse no centro da tela, como antes. Mas como estou usando uma <div> para posicionamento, ela se posiciona dentro do documento. Gostaria que fosse como um alert(), no centro da tela e todos os demais controles da página chamadora, estivessem sem condições de navegação, ou seja, Modal mesmo.
    – pnet
    Commented 3/08/2015 às 19:26
  • pnet, postei uma atualização. Commented 3/08/2015 às 19:51
  • Toby, se eu faço fora do meu projeto, funciona que uma beleza, mas quando eu rodo dentro do projeto, começa a dar erros. Vou editar a pergunta e colocar lá os erros causados.
    – pnet
    Commented 4/08/2015 às 13:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .