$(Function() does not work

Asked

Viewed 346 times

-1

I am a beginner in this language and I have the following question: the code below is working, but if I take the comment from the part * With this block does not work*, It doesn’t work now, but I need it to activate a calendar on another source I have. Is there any way it works without the block leaving the body and the datepicker script remains in the head?

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html">
    <meta charset= "UTF-8" http-equiv="content-type">
    <title>Consulta de Apartamento</title>
    <link rel="stylesheet" href="css/estilos_gerais.css" type="text/css">
    <link rel="stylesheet" href="css/retorno_consulta.css" type="text/css">
    <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>      
    <script src="http://code.jquery.com/jquery-migrate-1.4.0.min.js"></script>      
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!-- *** Com este bloco não funciona***
  <script type="text/javascript">      
        $(function() {$( ".data" ).datepicker({
            showOn: "button",
            buttonImage: none,
            buttonImageOnly: true,
            changeMonth: true,
            changerYear: true,
            showOtherMonths: true,
            selectOtherMonths: true,
            dateFormat:  'dd/mm/yy',
            dayNames:['Domingo','segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab','Dom',],
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto',
            'Setembro','Outubro','Novembro','Dezembro',],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']});});
      </script> -->
</head>
<body>

 <script type="text/javascript">
$(document).ready(function () {
$("#btnTestar").click(function(){
      alert("Hello, World.");
    });
});
  </script>
<form>
  <button id="btnTestar">Testar</button>
</form>
</body>
</html>
javascript
  • 1

    You are loading jQuery 2 times. Delete <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> and put quotes on none: buttonImage: "none",

2 answers

1


You have noticed that you are loading versions 2.2.3 and 1.10.1 of jQuery?

<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Removing the loading of version 1.10.1 the code seems to work, at least the alert window appears and the console stops giving error.

Ah, I believe it is null instead of none in buttonImage.

1

First point: You are using a jQuery UI plug that would be another library that depends on jQuery to work.

Check the compatibility of the jQueryUI version with the jQuery version.

As already spoken, you are used of 2 verses of jquery simultaneously, decide which would be the most appropriate, or more compatible with the rest of the code.

Be sure that the datepicker code is actually working, because regardless of where it is instantiated, in the header or inside the Script outside the header, it should work.

If everything goes wrong, start from scratch: Go to the jquery UI website and download the stable version. Take an example of using datepicker and apply on the page.

Try to organize better how scripts are loaded, jQuery always comes first in relation to other scripts. Your css always last to external.

The datepicker code depends on an element that I believe is an Input with the date class in order to be able to work too, so be sure that this, being uncouth, will not really work.

Reference: https://jqueryui.com/datepicker/

Browser other questions tagged javascript

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