none
Função jquery não está sendo reconhecida na página RRS feed

  • Pergunta

  • A minha situação é assim: Tenho uma página em ASP que monta uma table. E tenho outra, também em ASP que tem umas funções, que fazem o seguinte. Disponibiliza um html para popular a table. Coloquei um modal jquery e dá erro. Diz que não reconhece a função jquery como função. A primeira página que eu estou postando é a página principal, e nela eu coloquei as funçõe js/jquery e a chamada.

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

    MontaContrato() está em outra página que vou postar embaixo. Esse método só faz é fornecer uma <tr> e as <td> dessa <tr> da table acima. Nesse método há uma imagem(lupa.gif) e no OnClick dele deveria chamar a função jquery que está na página principal.

    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 

    No lugar da <div id="dialog"> deveria ser um IFrame e nele uma chamada a uma página de pesquisa que temos aqui. Há um comentário na imagem da lupa.gif e nesse comentário está exatamente o que deveria ser carregado. Eu coloquei a div apenas para teste. Abaixo os erros que estão dando:

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

    e esse erro

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

    Vi os includes do js e css, coloquei a mesma versão que está no fiddle que eu fiz e funciona. Esse exemplo tirei diretamente do site jquery-ui.

    No jsfiddle funciona. Veja abaixo o jsfiddle.

    jsfiddle




    • Editado pnet quarta-feira, 5 de agosto de 2015 11:31
    quarta-feira, 5 de agosto de 2015 11:29

Todas as Respostas

  • Tenta colocar seu código jqeury dentro do (document).Ready:

    <script type="text/javascript">
        jQuery(document).ready(function(){
            [seu código atual aqui]
        })
    </script>
    Acho que pode estar tentando aplicar o método dialog() antes de carregar a página e consequentemente antes de carregar as bibliotecas...


    Fabio Rosa.


    • Editado Fabio Rosa quarta-feira, 5 de agosto de 2015 12:48
    quarta-feira, 5 de agosto de 2015 12:47
  • Olá Fábio, fiz isso aqui e mesmo assim continua:

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

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

    quarta-feira, 5 de agosto de 2015 13:08
  • Você disse que a div #dialog está em outra página, é isso..? E o erro acontece quando você clica no botão? Pode ser que quando carrega a primeira página, o Jquery não encontre o controle #dialog para aplicar o método de configuração dialog()... Tentou deixar na mesma página para ver se ocorre o erro?

    Fabio Rosa.

    quarta-feira, 5 de agosto de 2015 13:16
  • Eu coloquei tudo na mesma página para testes e mesmo assim não funciona. Em realidade não seria outra página, ou seja, é um método asp em outra página que monta um HTML na página em questão, seria o mesmo que estando aqui. Eu tenho a pagina: calprincipalasp e a pagina calfuncoes.asp. Na calfuncoes.asp eu tenho apenas métodos que montam HTML na calprincipal.asp. Fiz tudo na calprincipal, que é a que está sendo executada e visualizada e continua o erro.
    quarta-feira, 5 de agosto de 2015 13:19
  • Puxa vida...

    Tenteou verificar com o Fiddle para ver se está carregando as bibliotecas jquery e jquery-ui corretamente?

    Tem como postar o código completo em execução de sua página? Assim posso analisar melhor...


    Fabio Rosa.

    quarta-feira, 5 de agosto de 2015 13:31
  • Veja como ficou agora e mesmo assim está dando pau. Parece que na renderização da página, a função está sendo lida antes de carregar os includes do jquery, é o que dá a entender.

    <%@ 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
    %>


    • Editado pnet quarta-feira, 5 de agosto de 2015 13:55
    quarta-feira, 5 de agosto de 2015 13:41
  • Aconteceu algo legal agora. Coloquei os includes do jquery no body da página, antes das execuções das funções javascript em baixo. Bem, o erro deixou de ocorrer, mas o Modal aparece e logo em seguida ele some. Aparece e some(de 1 a 2 segundos, não consegui contar). Bem, já é uma avanço. Some e dá um refresh na tela.

    • Editado pnet quarta-feira, 5 de agosto de 2015 14:03
    quarta-feira, 5 de agosto de 2015 14:00
  • Bem estranho o comportamento... mas é uma avanço! Não entendo porque está sumindo e aparecendo... parece que algo está interferindo nele...

    Fabio Rosa.

    quarta-feira, 5 de agosto de 2015 14:05
  • Parece que algo fica submetendo o form, mas o que?
    quarta-feira, 5 de agosto de 2015 14:29
  • Bem, pessoal, acho que resolvi o problema. Coloquei o código como deveria estar e retirei o botão de testes e o modal startou e não deu submit na página. Acho que o comportamento do botão estava causando isso. E isso resolveu o problema.
    quarta-feira, 5 de agosto de 2015 14:39
  • Opa, que bom que resolveu. Desculpe não poder ajudar muito!

    Sucesso!


    Fabio Rosa.

    quarta-feira, 5 de agosto de 2015 14:42
  • Como assim não ajudar muito. Nem sempre a ajuda é aquele pedaço de código, mas para mim quando alguém leva o outro a pensar, isso vale mais que código postado e foi isso que você fez. Obrigado.
    quarta-feira, 5 de agosto de 2015 15:50
  • Que bom! Sendo assim vou pedir para você marcar como útil minhas respostas, se te ajudei!

    Fabio Rosa.

    quarta-feira, 5 de agosto de 2015 16:47