JQuery - La llamada del datepicker en <div> no funciona

   
Vista:

La llamada del datepicker en <div> no funciona

Publicado por Intentando ser programador (3 intervenciones) el 03/03/2016 18:50:01
Buenas chicos, por favor llevo 1 semana intentando solucionar este problema y no me deja avanzar, os voy a pegar el codigo fuente de una pagina principal donde se muestran los datos yo cuando hago clic en el boton "Afagir usuari"
me llama la capa donde es un formulario en ese formulario hay un apartado de "data" que es fecha donde quiero implementar el calendario, pero no funciona, si borro todo el codigo del body y pongo <input type="text" class="form-control" id="al"> el calendario funciona correctamente pero si pongo todo el codigo de ajax y script por el medio no funciona, espero que me podais ayudar :D.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gestio de taules amb AJAX</title>
    <link rel="stylesheet" href="jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <script src="jquery-ui-1.9.2/jquery-1.8.3.js" ></script>
    <script src="jquery-ui-1.9.2/ui/jquery.ui.core.js" ></script>
    <script src="jquery-ui-1.9.2/ui/jquery.ui.widget.js" ></script>
    <script src="jquery-ui-1.9.2/ui/jquery.ui.datepicker.js" ></script>
 
    <script>
 
    $(function() {
		$( "#al" ).datepicker();
	});
 
    </script>
  </head>
  <body onload="viewdata()">
    <input type="text" class="form-control" id="al">
 
 
    <h1 align="center">Gestio de taules amb AJAX</h1>
    <p><br/></p>
    <div class="container">
 
<!-- buto de trigger modal de bootstrap-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Afageix nou client
</button>
<br/>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Afageix nou usuari</h4>
      </div>
      <div class="modal-body">
 
<form>
  <div class="form-group">
    <label for="nm">Nom</label>
    <input type="text" class="form-control" id="nm">
  </div>
 
  <div class="form-group">
    <label for="gd">Cognom</label>
    <input type="text" class="form-control" id="gd">
  </div>
 
  <div class="form-group">
    <label for="pn">Telefon</label>
    <input type="text" class="form-control" id="pn">
  </div>
 
!-- Aqui es donde tiene que ir el calendario en la etiqueta data pero no va, la llamo con el identificador "al"  :(-->
 
  <div class="form-group">
    <label for="al">Data</label>
    <input type="text" class="form-control" id="al">
  </div>
</form>
 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Tancar</button>
        <button type="button" id="save" class="btn btn-primary">Guardar</button>
      </div>
    </div>
  </div>
</div>
<div id="info"></div>
      <br/>
      <div id="viewdata"></div>
    </div>
 
    <!-- Jquery botstrap descargable desde la pagina bootstrap -->
    <script src="js/jquery.min.js"></script>
    <!-- Plugins de bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Funcio per mostrar les dades-->
    <script>
    function viewdata(){
       $.ajax({
	   type: "GET",
	   url: "php/dates.php"
      }).done(function( data ) {
	  $('#viewdata').html(data);
      });
    }
    $('#save').click(function(){
	<!-- Creem les variables dels caps de la taula-->
	var nm = $('#nm').val();
	var gd = $('#gd').val();
	var pn = $('#pn').val();
	var al = $('#al').val();
  <!-- Fusionem les variables dels caps en una general-->
 
	var datas="nm="+nm+"&gd="+gd+"&pn="+pn+"&al="+al;
 
	$.ajax({
	   type: "POST",
	   url: "php/altes.php",
	   data: datas
	}).done(function( data ) {
	  $('#info').html(data);
	  viewdata();
    $('#myModal').hide();
	});
    });
    function updatedata(str){
 
	var id = str;
	var nm = $('#nm'+str).val();
	var gd = $('#gd'+str).val();
	var pn = $('#pn'+str).val();
	var al = $('#al'+str).val();
 
	var datas="nm="+nm+"&gd="+gd+"&pn="+pn+"&al="+al;
 
	$.ajax({
	   type: "POST",
	   url: "php/editar.php?id="+id,
	   data: datas
	}).done(function( data ) {
	  $('#info').html(data);
	  viewdata();
	});
    }
    function deletedata(str){
 
	var id = str;
 
	$.ajax({
	   type: "GET",
	   url: "php/borrar.php?id="+id
	}).done(function( data ) {
	  $('#info').html(data);
	  viewdata();
	});
    }
    </script>
<input type="text" id="al">
 
  </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

La llamada del datepicker en <div> no funciona

Publicado por arck (21 intervenciones) el 04/03/2016 14:14:52
¿Has visto si con el F12 se te enlazan bien los js de jquery_ui?

¿has visto que tienes tres input con el mismo id?

cambia los id y vuelve a probar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La llamada del datepicker en <div> no funciona

Publicado por ouail (3 intervenciones) el 04/03/2016 16:05:12
Solo es un id esos inputs del principio y final del body los puse de prueba cuando quito el código del medio todo el ajax y scripts los dos inputs funcionan pero cuando vuelvo a pegar el código no funciona. Pero en realidad es solo un input el de la capa el que esta en el medio los otros dos los borre y sigue sin funcionar.

Al ejecutar f12 en el navegador sin los otros inputs solo el de data me pone un error en el datepicker es el siguiente, muchas gracias por tu tiempo :) :

TypeError: $( "#al" ).datepicker is not a function. (In '$( "#al" ).datepicker()', '$( "#al" ).datepicker' is undefined)
(función anónima)AJAX:18
firejquery-1.8.3.js:973
fireWithjquery-1.8.3.js:1083
readyjquery-1.8.3.js:405
DOMContentLoadedjquery-1.8.3.js:82
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La llamada del datepicker en <div> no funciona

Publicado por arck (21 intervenciones) el 04/03/2016 17:27:22
yo cambie los links de las librerias de Jquery por las que estan subidas en internet, quite css y el javascript que no lo iba a probar.

puse:

1
2
3
4
5
6
7
<script type="text/javascript">
 
    $(function() {
		$('#al').datepicker();
	});
 
    </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La llamada del datepicker en <div> no funciona

Publicado por ouail (3 intervenciones) el 04/03/2016 21:41:54
Encontre el fallo pero sigo sin resolverlo, el fallo era que utilizaba datepicker normal, pero vi en internet que con bootstrap no se hace así se hace como http://jsfiddle.net/sudiptabanerjee/93etu/

Pero intente hacer lo que hace el chico pero no se que importacion realiza de jquery y se me desmadro todo, mucho nivel para mi :/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar