JavaScript - ayuda con web services

   
Vista:

ayuda con web services

Publicado por Francisco (3 intervenciones) el 09/12/2017 20:02:08
buenas tardes

tengo el siguiente código que lo que trata de hacer es tomar las provincias y cantones, pero sinceramente no se como hacer para que al seleccionar la provincia, cargue los cantones que coinciden con el ID de provincia
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
<html>
 
    <head>
        <title>Obteniendo las provincias</title>
            <script src="js/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                    $.ajax({
                        dataType: "json",
                        url: "https://ubicaciones.paginasweb.cr/provincias.json",
                        data: {},
                        success: function (data) {
                            var html = "<select>";
                            for(key in data) {
                                html += "<option value='"+key+"'>"+data[key]+"</option>";
                            }
                            html += "</select";
                            $('#destino').html(html);
                        }
                    });
            })
            </script>
 
            <script>
            $(document).ready(function () {
                var n= '1';
                    $.ajax({
                        dataType: "json",
                        url:
                        "https://ubicaciones.paginasweb.cr/provincia/"+n+"/cantones.json",
                        data: {},
                        success: function (data) {
                            var html = "<select>";
                            for(key in data) {
                                html += "<option value='"+key+"'>"+data[key]+"</option>";
                            }
                            html += "</select";
                            $('#canton').html(html);
                        }
                    });
 
            })
 
 
        </script>
 
 
    </head>
 
       <div id="destino" ></div>
 
 
         <div id="canton"></div>
    </body>
</html>

como podrán observar en la segunda función estoy usando una variable "var n=1" de esa forma pues estoy mandando el id de la provincia, yo lo que necesito es que esa variable tome por defecto el value del "id=destino"

espero puedan ayudarme.
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
Imágen de perfil de Enrique

ayuda con web services

Publicado por Enrique (15 intervenciones) el 11/12/2017 18:44:55
aparte de tener un tema de mala practica al combinar jquery con los evento s de la página, te recomiendo remplazar todo tu bloque de escript por esto.
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
<script>
    $(document).ready(function () {
        $.ajax({
            dataType: "json",
            url: "https://ubicaciones.paginasweb.cr/provincias.json",
            data: {},
            success: function (data) {
                var html = "<select id='provincias'>";
                for(key in data) {
                    html += "<option value='"+key+"'>"+data[key]+"</option>";
                }
                html += "</select>";
                $('#destino').append(html);
            }
        });
    });
 
    $('select#provincias').on('change', function() {
		var n= this.value;
		$.ajax({
            dataType: "json",
            url:
            "https://ubicaciones.paginasweb.cr/provincia/"+n+"/cantones.json",
            data: {},
            success: function (data) {
				$('#canton').empty();
                var html = "<select>";
                for(key in data) {
                    html += "<option value='"+key+"'>"+data[key]+"</option>";
                }
                html += "</select>";
                $('#canton').append(html);
            }
        });
    });
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

ayuda con web services

Publicado por Francisco (3 intervenciones) el 11/12/2017 19:16:43
Muchas gracias por el consejo sobre las malas prácticas es algo que tengo que mejorar espero, ya que estoy iniciando en esta área.

y para terminar de molestarte ya que no he podido lograr hacer esta parte , si luego quisiera que muestre los distritos, me imagino tendría que hacer algo parecido a cantones, pero como puedo obtener el valor de la variable de provincia

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('select#cantones').on('change', function() {
var n= this.value;
//  var provincia= $("#destino").val();  tomar valor de provincia 
$.ajax({
    dataType: "json",
    url:
    "https://ubicaciones.paginasweb.cr/provincia/"+provincia+"/cantones/"+n+"/distritos.json",
    data: {},
    success: function (data) {
		$('#canton').empty();
        var html = "<select>";
        for(key in data) {
            html += "<option value='"+key+"'>"+data[key]+"</option>";
        }
        html += "</select>";
        $('#canton').append(html);
    }
});

aparte ya fuera de esto que libros me puedes recomendar para aprender o bien páginas o algo ya que lo que he aprendido es en base a practicas que me envían pero no se de un buen libro para comprar que me oriente mas en esto.

Nuevamente gracias por responder
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
Imágen de perfil de Enrique

ayuda con web services

Publicado por Enrique (15 intervenciones) el 11/12/2017 19:42:10
Esta bien tendrías que hacer exactamente lo mismo, solo le veo algo mal a tu URL del ese WS.
+No se para que le quieres volver a enviar la provincia, si teniendo el dato del Canton ya tienes acentado a que provincia pertenece.
+Tendrías que tener otro div con el id provincias, a menos que quieras mostrar el resultado el el div de cantones
OjO: Aguas con copy paste para replicar funciones por que es muy común cometer ese tipo de error al no cambiar los names o id que ocuparás como selector en jquery

Por otro lado https://www.w3schools.com/ es una excelente página para estudiar y aprender todo lo relacionado a programación web desde el HTML hasta aprender Base de datos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar