Doubt when calling a modal jQuery UI screen passing an HTML page as parameter

Navigation
0

I have this code. In the click of lupa.gif , I would call a jquery function and throw a page into it with all parameters passed like this:

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


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

How would I do this? I have every doubt. All this in the click of the image javascript: AbrePesquisa(...)

I was forgetting something extremely important. First, the site is deito in Classic ASP. Well, there are two files. One that we will call c1.asp and another one I call c1in.asp. well, in c1.asp, I have a call to an asp function. In c1in.asp, I have the implementation of this function. This function does just that: Mount the HTML that has the magnifying glass and the search field, this here (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>

Only one as can be seen. And in c1.asp is the call: 

montaContrato()

I hope this helps.

Personal, that did not work: 

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

The call 

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

The error (s) below:

In Chrome I get this error:

  

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

In IE, it gives pause on execution and these errors:

  

SCRIPT1028: Identifier, string or expected number

     

SCRIPT5007: The value of the 'OpenModal' property is null or not   defined; is not a Function object

    
asked by anonymous 03.08.2015 / 19:43

1 answer

1

I think the Search method is just a wrap to window.open, so your javaScript file should look something like this: 

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

then you can try replacing the method with the following: 

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

In this case, the properties name, top, left, and replace would be half unused.

As the AP mentioned, it still continues to struggle because of existing links (CSS, JS), so I'll put an alternative using 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><scriptsrc="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>
    
03.08.2015 / 20:12
How to create applications with database in phonegap? [closed] query optimization that adds values according to a clause