jquery function is not being recognized on the page

Question

jquery function is not being recognized on the page

Asked 9 years, 4 months ago

Viewed 1,497 times

5

My situation is like this: I have a page in ASP that mounts a table. And I have another one, also in ASP that has functions, which do the following. Provides an html to popular table. I put a jquery modal and gives error. Says it does not recognize the jquery function as a function. The first page I’m posting is the main page, and on it I put the js/jquery function and the call.

<html>
<head>
<title><%=Application("app")%></title>
<link rel="stylesheet" type="text/css" href="\gen\css\css002.css">

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript" src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<script type="text/javascript" src="\cal\asp\cal0087.js"></script>  
<script type="text/javascript" src="\cal\asp\cal0088.js"></script>  
<script src="../../gen/js/cpaint2.inc.compressed.js" type="text/javascript"></script>
  <script type="text/javascript">

    $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

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

<!--Fim do testando o modal do jquery UI-->

</head>
<body>
<%AbreTable()%>
<font class="subtitulos"><%=txt_subtitulo%></font>
<%FechaTable()%>
<form method="post" name="form01">    
<%AbreTable()%>
<div id="txt_msg" class="msg" align="center"><%=txt_msg%></div>

<table border="0" width="100%">
    <%
    montaOpSucInspetoria()
    montaContrato()

Montacontrato() is on another page that I will post below. This method only does is provide a <tr> and the <td> of that <tr> table above. In this method there is an image(lupa.gif) and in the OnClick it should call the jquery function that is on the main page.

sub montaContrato()
    %>

    <div id="dialog" title="Basic dialog">
      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <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='' 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')">-->
            <img id='btnLupa' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato'>
            <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" />
        </td>
    </tr>    
    <%
end sub

In place of <div id="dialog"> should be an Iframe and in it a call to a search page that we have here. There’s a comment in the.gif magnifying glass image and in that comment is exactly what should be loaded. I put the div just for testing. Below the errors that are giving:

Uncaught TypeError: $(...).dialog is not a function

and that mistake

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://10.104.33.247/gen/css/Default/css002.css".

I saw the js and css includes, I put the same version that is in the fiddle that I did and it works. This example I took directly from the jquery-ui site.

fiddle

I did it here and yet you keep making the same mistake:

<script type="text/javascript">
    $(document).ready(function(){
        $(function () {
            $("#dialog1").dialog({
                autoOpen: false
            });

            $("#opener").click(function () {
                $("#dialog1").dialog('open');
            });
        });
    })
</script>

My new HTML as is and still the error remains. The jquery function has already put down where the rest are, above where it is and continues:

<%@ LANGUAGE="VBSCRIPT"%>   
<%
    Option Explicit

    dim txt_usuario, txt_senha, txt_ip, txt_modulo, txt_sistema, txt_msg
    dim rsPesqBenef, txt_subtitulo, txtXML, qtdIni, qtdFim, sBgColor
    dim data_atendimento_ini, data_atendimento_fim, data_atual
    dim txt_situacao, txt_origem_atendimento

    txt_usuario                 = Session("ace_usuario")
    txt_senha                   = Session("ace_senha")
    txt_ip                      = Session("ace_ip")
    txt_sistema                 = Session("ace_sistema")    
    txt_msg                     = Session("txt_msg")
    txt_subtitulo               = request("pt")

    'OBS.: A session("ace_modulo") só é atualizada no refresh da tela.
    if request("pcf") = "ATB0084" then
        Session("ace_modulo") = "40"
    elseif request("pcf") = "ATC0007" then
        Session("ace_modulo") = "47"
    end if      
    txt_modulo                  = Session("ace_modulo")    

    Session("txt_msg")          = ""
    session("pgm_retorno")      = Request.ServerVariables("SCRIPT_NAME") & "?" & Request.ServerVariables("QUERY_STRING")
    recuperaDataAtual()    
    if data_atendimento_ini = "" or data_atendimento_fim = "" then    
        call recuperaDateDiffporparmetro("7")
    end if
%>
<html>
<head>
<title><%=Application("app")%></title>
<link rel="stylesheet" type="text/css" href="\gen\css\css002.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />


<script type="text/javascript" src="\cal\asp\cal0087.js"></script>  
<script type="text/javascript" src="\cal\asp\cal0088.js"></script>  
<script src="../../gen/js/cpaint2.inc.compressed.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $(function () {
            $("#dialog1").dialog({
                autoOpen: false
            });

            $("#opener").click(function () {
                $("#dialog1").dialog('open');
            });
        });
    })
</script>

</head>
<!--#include file="..\..\cal\asp\cal0088inc.asp"-->
<!--#include file="..\..\gen\inc\inc0077a.asp"-->
<!--#include file=..\..\gen\inc\inc0000_new.asp-->
<!--#include file=..\..\gen\inc\inc0001.asp-->
<!--#include file=..\..\gen\inc\inc0002.asp-->
<!--#include file=..\..\gen\asp\gen0146a.asp-->
<!--#include file=..\..\gen\asp\gen0146b.asp-->
<body>
<%AbreTable()%>
<font class="subtitulos"><%=txt_subtitulo%></font>
<%FechaTable()%>
<form method="post" name="form01">    
<%AbreTable()%>
<div id="txt_msg" class="msg" align="center"><%=txt_msg%></div>

<button id="opener">Abrir Diálogo Modal</button>
<div id="dialog1" title="Diálogo Modal" hidden="hidden">Este é um teste de Dialogo Modal usando JQuery-UI</div>

<table border="0" width="100%">
    <%
    montaOpSucInspetoria()
    montaContrato()
    if txt_modulo = "40" then
        montaNumBeneficiario()
    end if 
    montaNumAtendimento("S")           
    montaDataAtendimento()
    montaUsuarioAtendimento()
    montaCboMotivoAtd()
    montaCboSituacao()
    %>
</table>
<%FechaTable()%>
<table border="0" width="100%"> 
    <tr id="trResultConsAtdBeneficiario" style="display:''">
        <td>
            <div id="dvResultConsAtdBeneficiario"></div>
        </td>
    </tr>   
</table>    
<input type="hidden" name="p_versao" value="1.10">
<input type="hidden" name="qtd_de" value="">
<input type="hidden" name="qtd_ate" value="">
<input type="hidden" name="txt_subtitulo" value="<%=txt_subtitulo%>">
<input type="hidden" name="cod_modulo" value="<%=txt_modulo%>">

<script language="javascript">
function acao_continuar(){
    if (validaForm()){
        document.getElementById('txt_msg').innerHTML = '';
        document.getElementById('txt_msg').style.display = 'none';    
        buscaAtendimentos();
    }
}
function selecionarAtendimento(pNumAtendimentoTs, pCodTs, pCodEntidadeTs, pIndSituacao, pnumcpfbenefevent, pnom_benef_event) {
    var strChamada = '../../cal/asp/cal0088b.asp?pt=<%=txt_subtitulo%>';
    strChamada +='&num_atendimento_ts='+pNumAtendimentoTs;
    strChamada +='&cod_entidade_ts='+pCodEntidadeTs;
    strChamada += '&num_cpf_benef_event=' + pnumcpfbenefevent;
    strChamada += '&nom_benef_event=' + pnom_benef_event;    
    if ( form01.cod_modulo.value == '40' ){
       strChamada +='&cod_ts='+pCodTs;
    }else if ( form01.cod_modulo.value == '47' ) {
       strChamada +='&cod_ts_contrato='+pCodTs; 
    }

    document.form01.action = strChamada;
    document.form01.submit();
}
</script>

</form>
<%
'VOLTAR/CONTINUAR/LIMPAR/INCLUIR/ALTERAR/EXCLUIR/EXECUTAR/POPUP
call MontaToolbar("N","S","S","N","N","N","N","N")
%>
</body>
</html>
<%
sub MontaCalendario(pCampo)
    %>
    <img src="/gen/img/img.gif" id="img_<%=pCampo%>" 
        style="cursor: pointer; border: 1px solid red;" 
        title="Selecionar data" onmouseover="this.style.background='red';" 
        onmouseout="this.style.background=''" />
    <script>
        Calendar.setup({
            inputField     :    "<%=pCampo%>",
            ifFormat       :    "%d/%m/%Y",
            button         :    "img_<%=pCampo%>",
            align          :    "Tl",
            singleClick    :    true
        });
    </script>
    <%
end sub
%>

Ever made a console.log($("#dialog1"))? Make a test to see if it returns anything.

– Danilo Pádua

2015/08/05 at 13:13
1

I think maybe the function $( "#dialog" ).dialog({}) must be running before the page is rendered and the <div id="dialog"> be created, just in case, I’d tag defer="defer" in the script that calls its function $.dialog()

– MarceloBoni

2015/08/05 at 13:20
Maybe that’s right, just like @Marcelobonifazio said

– Danilo Pádua

2015/08/05 at 13:25
I don’t have an environment in which I can test here... try to play the code that is from line 46 ~ 58 at the end of your code, below line 154

– MarceloBoni

2015/08/05 at 13:46
Something nice has happened now. I put jquery’s includes in the body of the page, before executions of the javascript functions below. Well, the error ceased to occur, but Modal appears and soon after it disappears. It appears and disappears (from 1 to 2 seconds, I could not count). Well, it’s already a breakthrough. Add and refresh the screen.

– pnet

2015/08/05 at 14:00
So he’s giving a Ubmit on the page as he calls the dialog(), which event/object is calling the form Ubmit?

– MarceloBoni

2015/08/05 at 14:24
Apparently none. The dialog is called only by clicking the button. In this case nothing interferes with the behavior of the form without a human action.

– pnet

2015/08/05 at 14:27
@pnet Could edit the question and ask the answer?

– PauloHDSousa

2015/09/25 at 15:13
@Paulohdsousa, ok, I should have done this before and I forgot. I’ve posted as an answer.

– pnet

2015/09/25 at 18:15

Show 4 more comments

1 answer

Browser other questions tagged javascript jquery asp

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

by pnet • **14,727** points · Answer 1 · 2015-09-25T18:14:40+00:00

Well, guys, I think I solved the problem. I put the code as it should be and removed the test button and the modal startou and did not give Submit on the page. I think the behavior of the button was causing this. And it solved the problem. As there was no reply, I will post this comment as a response and after 2 days I close the post.