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

Asked

Viewed 1,694 times

0

I have this code. At the click of lupa.gif, I would like to call a jquery function and play a page into it with all the 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')">

Where is the javascript: AbrePesquisa(...), would like to call the jquery below and with all parameters passed, ie, run a page within a Modal JQuery:

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

How would I do that? I have all the questions. All this in the image click lupa.gif

I was forgetting something extremely important. First, the site is lying in Classic ASP. Well, there are two files. One that we’ll call C1.Asp and another 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 this: 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.

Guys, that way it didn’t 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')">

O(s) error(s) below:

In Chrome gives me this error:

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

In IE, it pauses execution and these errors:

SCRIPT1028: Identifier, string or expected number

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

javascript jquery

  • That one AbrePesquisa is a function right? It would not be enough to add the code of the dialog within it?

  • @Kaduamaral, it turns out that this function does not open in a Modal way and it is necessary to do so, so I need the modal jquery or any other way I can open in a Modal way. I opted for jquery for ease and compatibility with multiple browsers.

1 answer

1


I believe that the Abrepesquisa method is just a wrap for window.open, so in your Avascript file there must be something similar to the following:

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 to replace 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 name, top, left and replace properties would be kind of unused.

As AP mentioned, it is still struggling due to 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>
<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>

  • Dude, I know, but I can’t do it like this. Here’s my reality. We’re servicing one module only, which is having trouble operating on Chrome. Well, this function is used in all the gate modules, which is huge, so we can’t change the function. I can, for example, on the page I am changing, kill the function and put another, because this operation only moves on that particular page, but change the function not, due to other modules also benefit from it. So I really need to call jquery.

  • Then create a Abrepesquisamodal method

  • The bug already solved. I had renamed the name of the div and was calling by the other name. Now, I have the following problem. It does not open modal and the search filter does not work and I did nothing, no changes, because the parameters passed are the same. I would like the modal screen to come in the center of the screen, as before. But since I’m using a <div> for positioning, it sits inside the document. I would like it to be like an Alert(), in the center of the screen and all the other controls of the calling page, were without navigation conditions, ie Modal same.

  • pnet, posted an update.

  • Toby, if I do it outside of my project, it works like a beauty, but when I spin inside the project, it starts to make mistakes. I will edit the question and put there the errors caused.

  • I don’t think that would be the problem, but by way of more subsidies, the site is in classic Asp.

  • On your ASP page, try to declare the rel and the type of tags <link>, as in the following example: <link rel="stylesheet" type="text/css" href="filePath.css">. as a precaution, do the same with tags <script> declared the typeas an example to follow: <script type="text/javascript" src="filePath.js" ></script> and <script type="text/javascript" >/*script*/</script>

  • Interestingly, your example works for me, but not for jsfiddle. http://jsfiddle.net/pnet/p3v6ga74/1/

  • This is because Javascript in Snippet is at the end of Body, try to access this version of fiddle with the same script as this post: http://jsfiddle.net/p3v6ga74/2/

  • Forgive me the ignorance, but what is the difference? I did not understand why in one funnel and another not.

  • Let’s go continue this discussion in chat.

  • I discovered the problem with jsfiddle. It was the external files I hadn’t added. I did and now is working my first example that I sent here on the site.

  • In the application it doesn’t work. In jsfiddle yes. I will open another question, referring to the error only and post the errors. I think it has become another subject.

Show 8 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.