5

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>

<!--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() 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.

fiddle

Fiz isso aqui e mesmo assim continua dando o mesmo erro:

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

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

Meu novo HTML como está e mesmo assim continua o erro. A função jquery já coloquei em baixo onde estão as demais, em cima onde está e continua:

<%@ 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
%>
9
  • Já fez um console.log($("#dialog1"))? Faz um teste para ver se retorna alguma coisa. Commented 5/08/2015 às 13:13
  • 1
    Eu acho que talvez a função $( "#dialog" ).dialog({}) deve estar rodando antes da página ser renderizada e a <div id="dialog"> ser criada, por via das dúvidas, eu colocaria a tag defer="defer" no script que chama sua função $.dialog() Commented 5/08/2015 às 13:20
  • Talvez seja isso mesmo, igual o @MarceloBonifazio disse Commented 5/08/2015 às 13:25
  • Não tenho um ambiente em que eu possa testar aqui... tente jogar o código que está da linha 46 ~ 58 no final do seu código, abaixo da linha 154 Commented 5/08/2015 às 13:46
  • 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.
    – pnet
    Commented 5/08/2015 às 14:00

1 Resposta 1

1

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. Como não houve resposta, postarei esse comentário como resposta e depois de 2 dias eu fecho o post.

1
  • basta, colocar a resposta correta ao invés de comentar o post com uma resposta Commented 13/02/2017 às 18:08

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 .