none
Problema ao referenciar arquivo Jquery em .js. RRS feed

  • Pergunta

  • Olaa,

     

               Implementei algumas funcionalidades em  Jquery , quando  coloco as mesmas no <head> do meu Form ele funciona perfeitamente, não apresenta nenhum problema . Só que queria retirá-lo do <head> do meu Form e colocado na pasta onde fica os outros scripts Jquery .Segui os seguintes passos.

     

    1) Criei um arquivo teste.js que contem toda a implementação que estava no <head> do meu Form, esse arquivo está contido na pasta testescript junto com outros arquivos Jquery .O arquivo teste.js pode ser visualizado abaixo:

     

     

     $(document).ready(function () {
    
     ...
     Implementação das funcionalidades.
    ...

     }

     

     

    2) Logo após com o arquivo teste.js devidamente criado na pasta testescript . Fiz a referencia do mesmo no <head> do meu Form , conforme mostrado abaixo:

    <script src="testescript
    /teste.js
    " type="text/javascript"></script>

     

    Só que não funciona, nada do que foi feito e que antes funcionava perfeitamente funciona . Como resolver tal problema ? 

     

    Desde Já, Agradeço.

     

    terça-feira, 15 de fevereiro de 2011 13:53

Respostas

  • Bom, não sei se é a melhor maneira, mas você pode criar variáveis globais e então setá-las no processamento da página aspx.

    Por exemplo, criar um arquivo globals.js:

    // Variáveis globais
    var idCliente;
    var idTeste;<br/>
    

    E então na página aspx, colocar a tag script setando as variáveis globais:

    <script language="javascript" type="text/javascript" src="globals.js"></script>
    <script language="javascript" type="text/javascript">
       idCliente = <% %>;
    </script>
    <script language="javascript" type="text/javascript" src="teste.js"></script>
    
    
    Creio que deva ajudar

    • Marcado como Resposta _dev quarta-feira, 16 de março de 2011 03:20
    sábado, 26 de fevereiro de 2011 14:58

Todas as Respostas

  • E ondes estão as referências ao JQuery, no JS ou na página? Pelo que parece ele não esta encontrando a biblioteca Jquery.

    Abraço

    Estevam


    **** Se a reposta foi útil, então não esqueça de marca-lá. ***
    terça-feira, 15 de fevereiro de 2011 15:16
  • Rodrigo, no seu arquivo teste.js, voce precisa referenciar os arquivos JQuery
    Caio Vitullo
    terça-feira, 15 de fevereiro de 2011 16:06
  • Prezado Caio Vitullo,

     

     

                                       Obrigado por sua atenção, mas de que forma poderei fazer isso ??

     

     

    Novamente Obrigado.

    terça-feira, 15 de fevereiro de 2011 16:20
  • Prezado Luiz Estevam,

     

                       Obrigado pela atenção, todos os meus outros arquivos Jquery tambêm estão na pasta testescript , faço referencia a todos esses arquivos no <head> do meu Form , conforme mostrado abaixo:

     

    <head>

    <script src="testescript/jquery-1.4.1.min.js " type="text/javascript"></script>

    <script src="testescript/jquery-1.4.1.js " type="text/javascript"></script>

    <script src="testescript/jquery-1.4.1-vsdoc.js " type="text/javascript"></script>

    <script src="testescript/jquery.alphanumeric.js " type="text/javascript"></script>

    <script src="testescript/jquery.maskedinput-1.2.2.js " type ="text / javascript"></script>

    //Script com minhas implementações :
    <script src="testescript/teste.js " type="text/javascript"></script>

    </head>

     

    Mas se eu estou referenciando os mesmos conforme mostrado acima, porque não estaria sendo encontrada a biblioteca Jquery ??

     

    Novamente Obrigado.

     

    terça-feira, 15 de fevereiro de 2011 16:26
  • Seu arquivo teste.js esta só com as function JS ou você colocou a tag inicial e final do JS (<script></script>), pois o arquvio teste.js não deve conter estas TAGS.

    Abraço

    Estevam


    **** Se a reposta foi útil, então não esqueça de marca-lá. ***
    terça-feira, 15 de fevereiro de 2011 16:44
  • Prezado Luiz Estevam,

     

                                   Meu arquivo teste.js não contem a tag <script> . Segue abaixo a forma como o mesmo se encontra:

     

     

     $(document).ready(function () {
    
     ...
     Implementação das funcionalidades.
     ...
    
     }

     

    Novamente Obrigado.

    terça-feira, 15 de fevereiro de 2011 16:57
  • Rodrigo, ao clicar no botão que deveria executar esta função não é mostrado nenhum erro de script na janela? ou na barra de status do navegador?

    Abraço

    Estevam


    **** Se a reposta foi útil, então não esqueça de marca-lá. ***
    terça-feira, 15 de fevereiro de 2011 17:40
  • Prezado Luiz Estevam,

     

                                  As implementações contidas no arquivo Jquery , se referem  a mascaras , verificação se o que é digitado é numérico e estão associadas a textboxes , não há nada associado a botões. Nenhum erro é mostrado, a página é dada como concluida, nada referente a erros aparece.Coloquei um break point no arquivo Jquery e o mesmo é chamado normalmente quando entra na página, algo que não acontece posteriormente.

     

    Novamente Obrigado.

    terça-feira, 15 de fevereiro de 2011 18:05
  • Rodrigo, realmente se no momento que se chama as funções, seja através de botão ou eventos, e não é demonstrado erro algum ai fica complicado, infelizmente no momento não tenho mais idéias para lhe ajudar.

    Abraço

    Estevam


    **** Se a reposta foi útil, então não esqueça de marca-lá. ***
    terça-feira, 15 de fevereiro de 2011 18:08
  • Prezado Luiz Estevam,

     

                                   Muito grato pela atenção, irei continuar pesquisando.

     

    Novamente obrigado.

    terça-feira, 15 de fevereiro de 2011 18:13
  • Rodrigo, acompanhando esta thread, acho que seu problema é semântica. Veja:

    Quando você inclui scripts direto na tag HEAD, estes serão executados assim que página ser carregada e o parser do JS passar por alí.

    Quando você inclui seu script em arquivo separado, você deve invocá-lo assinando eventos da página. No seu caso, usando o JQuery, dentro do arquivo .js assine o evento onload da página. Exemplo:

     

     

    $(window).load(function(){
      // implementação das funcionalidades.
     });

    Faça o teste.

    Abraços.


    .Net Architect, MCTS .Net Framework 2.0, Web Applications
    terça-feira, 15 de fevereiro de 2011 19:16
  • Prezado Maicon Guerra,

     

     

                                       Obrigado pela atenção, realizei a mudança conforme mostrado por você, mas não funcionou.

     

     

    Novamente Obrigado.

    terça-feira, 15 de fevereiro de 2011 19:36
  • Rodrigo, o que é "implementação da funcionalidade"? Poste aqui o código js.
    .Net Architect, MCTS .Net Framework 2.0, Web Applications
    terça-feira, 15 de fevereiro de 2011 19:42
  • Prezado Maicon Guerra,

     

                                          Segue abaixo a implementação das funcionalidades que estão contidas no arquivo teste.js :  

     

     

    $(document).ready(function () {
    
       $("#<%= txtIdCliente.ClientID %>").numeric();
      
       $("#<%= txtIdCliente.ClientID %>").focusout(function () {
    
        var idCliente = $("#<%= txtIdCliente.ClientID %>").val();
    
        if (idCliente != '') {
    
         $("#<%= txtIdCliente.ClientID %>").val(AddZeroEsquerda(idCliente, 2))
    
        } else {
    
         $("#<%= txtIdCliente.ClientID %>").val('')
        }
    
        retornaNomeCliente();
    
        AtivaDesativaBotao()
       });
    
       function AtivaDesativaBotao() {
    
        var idCliente = $("#<%= txtIdCliente.ClientID %>").val();
        
        if (idCliente != '') {
    
         var dados = "{ iDCliente: \ " + idCliente + "\ }";
    
         RequisicaoAjax("consultaDadosCliente.aspx/obterStatusCliente", dados, function (ret) {
    
          var controle = ret.d;
    
          if (controle == "0") {
    
           $('#consultar :enabled').attr('disabled', true);
          }
          else if (controle == "1") {
    
           $('#consultar :enabled').attr('disabled', false);
    
          }
         });
    
        } else {
    
         $('#consultar :enabled').attr('disabled', true);
        }
       }
    
    
       function retornaNomeCliente() {
    
        var idCliente = $("#<%= txtIdCliente.ClientID %>").val();
        
        if (idCliente != '') {
    
         var dados = "{ iDCliente: \ " + idCliente + "\ }";
    
         RequisicaoAjax("consultaDadosCliente.aspx/RetornaNomeCliente", dados, function (ret) {
    
          var nomeCliente = ret.d;
    
          $("#<%= txtNomeCliente.ClientID %>").val(nomePif);
    
         });
    
        } else {
          $("#<%= lblErro.ClientID %>").text('');
        }
       }
      });
    
      function AddZeroEsquerda(elemento, Tamanho) {
    
       var elem = elemento.toString();
    
       while (elem.length < Tamanho) {
    
        elem = '0' + elem;
    
       }
    			
       return elem;
      };
    
      function RequisicaoAjax(url, dados, ret) {
    
       $.ajax({
    
        type: "POST",
    
        url: url,
    
        data: dados,
    
        contentType: "application/json; charset=utf-8",
    
        dataType: "json",
    
        success: ret,
    
        error: function (Excecao, Status, erroThrown) {
    
         var error = JSON.parse(Excecao.responseText);
    
         $("#<%= lblErro.ClientID %>").text(error.Message);
        }
       });
    }
    

     

     

    Novamente Obrigado.

     

    quarta-feira, 16 de fevereiro de 2011 16:22
  • Rodrigo, não tem muito segredo. Olha só:

    Assinar o evento load da página:

    <body onload="load()"> 

    No seu arquivo .js (devidamente referenciado no head da pagína), faça:

    function load(){

    $(document).ready(function () {
      $("#<%= txtIdCliente.ClientID %>").numeric();
       $("#<%= txtIdCliente.ClientID %>").focusout(function () {
      var idCliente = $("#<%= txtIdCliente.ClientID %>").val();
      if (idCliente != '') {
       $("#<%= txtIdCliente.ClientID %>").val(AddZeroEsquerda(idCliente, 2))
      } else {
       $("#<%= txtIdCliente.ClientID %>").val('')
      }
      retornaNomeCliente();
      AtivaDesativaBotao()

    }

    Simples assim!


    .Net Architect, MCTS .Net Framework 2.0, Web Applications
    quinta-feira, 17 de fevereiro de 2011 15:51
  • Prezado Maicon Guerra,

     

                 Novamente muito obrigado por sua atenção, fiz exatamente como você me indicou e não funcionou, segue abaixo o código para uma melhor visualização.

    1) <head>.

     

    <head runat="server">
    <title></title>

    <script src="testescript/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="testescript/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="testescript/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="testescript/jquery.alphanumeric.js" type="text/javascript"></script>
    <script src="testescript/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
    <script src="testescript/teste.js " type="text/javascript"></script>

    </head>

     

     

    2) <body>.

     

    <body onload="load()
    ">
    ...
    </body>

     

     

    3) Arquivo teste.js na pasta testescript .

     

     

    function load()
    {
    $(document).ready(function () {
    ...implementação das funcionalidades já mostrada por mim anteriormente.
    }
    }

     

     

    Novamente muito obrigado.

     

    quinta-feira, 17 de fevereiro de 2011 19:53
  • Bom, eu recomendaria o uso do Firefox com a extensão Firebug (http://getfirebug.com/) para você depurar o erro que está encontrando.
    Provavelmente são duas explicações: Ou o seu jQuery está referenciado incorretamente, ou há algum código incorreto no seu arquivo teste.js.

    Também te aconselho a usar da forma em que estava no começo dessa thread, utilizando o jQuery para disparar o evento do load(), e não colocar no código html. Evite sempre colocar o que é de funcionalidade no código html, deixe essa tarefa para o javascript.

    Mais uma coisa: coloque nas suas tags <script> o atributo language="javascript", por boas práticas.

    Resumindo, eu faria os seguintes passos para verificar o que pode ser:

    1) Abriria a página com o Firefox, com o Firebug ativado.

    2) Bem provavelmente o erro aparecerá explicado, assim você pode correr atrás do que é. Pode ser, por exemplo, um erro de sintaxe - como a falta de um ); no fim do $(document).ready(function() { }.

    Espero ter ajudado. Mantenha-nos informados caso o erro seja resolvido! :)
    segunda-feira, 21 de fevereiro de 2011 18:07
  • Prezado Guilherme Rey,

     

     

                Muito obrigado por sua atenção, realizei todos os testes aconselhados por vc, mas não é apresentado nenhum erro pelo Firebug, o que me chama mais atenção é o fato do codigo Jquery quando colocado no <head> da página funcionar perfeitamente, sem erros.Mas quando copiado exatamente para um aquivo ocorre esse problema.

     

     

    Novamente Muito obrigado por sua atenção.

     

    Grande abraço.

    segunda-feira, 21 de fevereiro de 2011 20:41
  • O arquivo teste.js contém as tags <% %> ? Se sim, eu creio que não devam funcionar.

    Teste no arquivo teste.js algo bem simples, por exemplo:

    $(document).ready(function() {

    alert("Carregou");

    });

    Se isso funcionar, quer dizer que o código inserido nele que não executa da maneira correta.

    Se realmente for esse o problema, para poder pegar coisas do servidor, você pode tentar colocar variáveis globais e as setar com tags <% %> no <head> da sua página aspx.

    segunda-feira, 21 de fevereiro de 2011 22:52
  • Prezado Guilherme Rey,

     

     

                        Realizei o teste do alert, indicado por você, o mesmo somente funciona quando a página é carregada, após isso o alert não aparece mais.

     

     

    Novamente obrigado.

    quinta-feira, 24 de fevereiro de 2011 18:00
  • Maravilha! Então isso significa que o arquivo é carregado corretamente!

    Ele só aparece quando a página é carregada porque você mandou ele fazer isso :)

    Então provavelmente o problema é o uso das tags <% %> no seu javascript, que não devem ser processadas no servidor. Agora é só detectar o erro do código, e não mais da referência. :)

    quinta-feira, 24 de fevereiro de 2011 18:34
  • Prezado Guilherme,

     

     

                                Novamente obrigado pela atenção, mas o que é aconselhado para substituir as tags <%%> ???, segue abaixo um pequeno trecho do código para melhor visualização:

     

    $(document).ready(function () {
    
    ...
    
     $("#<%= txtIdCliente.ClientID %>").numeric();
    
    ...
     
    }
    

    Novamente obrigado.

    quinta-feira, 24 de fevereiro de 2011 20:17
  • Bom, não sei se é a melhor maneira, mas você pode criar variáveis globais e então setá-las no processamento da página aspx.

    Por exemplo, criar um arquivo globals.js:

    // Variáveis globais
    var idCliente;
    var idTeste;<br/>
    

    E então na página aspx, colocar a tag script setando as variáveis globais:

    <script language="javascript" type="text/javascript" src="globals.js"></script>
    <script language="javascript" type="text/javascript">
       idCliente = <% %>;
    </script>
    <script language="javascript" type="text/javascript" src="teste.js"></script>
    
    
    Creio que deva ajudar

    • Marcado como Resposta _dev quarta-feira, 16 de março de 2011 03:20
    sábado, 26 de fevereiro de 2011 14:58
  • Prezado Guilherme Rey,

     

     

                                           Muito obrigado pela atenção, minha duvida foi sanada.

     

     

    Obrigado a todos.

     

     

    grande abraço.

    quarta-feira, 16 de março de 2011 03:20
  • Dessa forma funcionou perfeitamente. 
    Quando o arquivo .js contém código jQuery, todo o código deve estar dentro do método "$(document).ready(function () {}". 
    Muito obrigado pela ajuda!


    sexta-feira, 27 de outubro de 2017 12:56