[Pregunta]: Ejecutar función después de que se termine de completar otra (JS)

[Leguim]

Buenos días,

estoy teniendo problemas con un código...

voy a resaltar que cada fragmento de código esta encerrado en $(document).ready (jQuery)

Código (javascript) [Seleccionar] Expandir


var select_country = document.getElementById('select_country');
var op_country = select_country.getElementsByTagName('option');
op_country[<?php echo($_POST['select_country']); ?>].selected = true;

Change_Select_Ubication('select_country'); // Función AJAX que llama a un fichero.php

// Después va a ejecutar estos otros códigos (pero para este punto todavía no terminó de completarse la función de arriba, la idea es que ejecute esto una vez que la función de arriba se complete del todo)
var select_province = document.getElementById('select_province');
var op_province = select_province.getElementsByTagName('option');
op_province[<?php echo($_POST['select_province']); ?>].selected = true;

Change_Select_Ubication('select_province'); // Después va a ejecutar la misma función pero con parametro diferente


Hasta ahora lo hago con un time out pero yo se que esto no es una buena manera de hacerlo.

Código (javascript) [Seleccionar] Expandir


           var select_country = document.getElementById('select_country');
           var op_country = select_country.getElementsByTagName('option');
           op_country[<?php echo($_POST['select_country']); ?>].selected = true;

           Change_Select_Ubication('select_country');

           setTimeout(function()
           {
               var select_province = document.getElementById('select_province');
               var op_province = select_province.getElementsByTagName('option');
               op_province[<?php echo($_POST['select_province']); ?>].selected = true;

               Change_Select_Ubication('select_province');
           }, 750);


Otra cosa que se me ocurrió era:

Código (javascript) [Seleccionar] Expandir


           var select_country = document.getElementById('select_country');
           var op_country = select_country.getElementsByTagName('option');
           op_country[<?php echo($_POST['select_country']); ?>].selected = true;

           var estado = Change_Select_Ubication('select_country');

           if(estado == true)
           {
                var select_province = document.getElementById('select_province');
                var op_province = select_province.getElementsByTagName('option');
                op_province[<?php echo($_POST['select_province']); ?>].selected = true;

                Change_Select_Ubication('select_province');
           }


la función es:

Código (javascript) [Seleccionar] Expandir


   function Change_Select_Ubication(select)
   {
       var select_country = document.getElementById('select_country').value;
       var select_province = document.getElementById('select_province').value;

       $.ajax({
           url: 'ajax/x.php',
           type: 'POST',
           dataType: 'html',
           data: {select, select_country, select_province},

           success: function()
           {
               $(document).ready(function()
               {
                   return true;
               });
           }
       })

       .done(function(results)
       {
           $('body').append(results);
       })
   }


Pero tampoco funciona ya que al momento de ejecutar la función lo que va a recibir esa variable va a ser "undefined" o en el caso de que ponga una variable más arriba con un valor = false y más abajo en la parte success la cambie por true y luego en la parte de abajo (abajo de todo) return variable; va a devolver false...

ya que al momento de asignarle el valor a esa variable no se completo la función lo que es igual a nada...

¿Alguna manera?

[EdePC]

Saludos,

- Veo que sigues haciendo abuso del uso de $(document).ready(function(){...}); que abreviado y más utilizado en jQuery es: $(function(){...});

- Este es un evento sobre la carga de la página, no deberías de andar poniéndolo en en todo sitio XD, con uno solo en la página principal y ya. Si modificas la página sin recargarla (Ajax) el evento no se ejecuta.

- Tu jQuery Ajax tiene especificado una configuración success: y luego tiene un callback .done, estos se ejecutan cuando Ajax a tenido éxito, solo deberías de usar uno de ellos.

- Ten en cuenta que success: o .done se ejecutan cuando el Ajax tiene éxito, es decir, esto es lo que estás buscando y preguntando. Llama a la función o código que se deba ejecutar justo ahí, dicha función o código se ejecutará luego de haber finalizado exitosamente el Ajax.

[Agente Naranja]

Es posible que puedas resolver tu problema usando Promesas:

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Promise

Por ejemplo:

Código [Seleccionar] Expandir

function Change_Select_Ubication(parametro) {
  return new Promise((resolve, reject) => {
    $.ajax('https://httpbin.org/get')
    .then(() => {
      console.log(parametro);
      resolve(100);
    })
  });
};

Change_Select_Ubication('Primero')
.then(
  function () {
    Change_Select_Ubication('Segundo');
  }
);

Basicamente lo que haces es que en tu función regresas una Promise, es un objeto que te permite esperar hasta que llamas la función "resolve" y al llamar esta función le estás diciendo "Ya terminé, con éxito". A esta promesa le puedes encadenar llamadas "then()" que se ejecutan solamente cuando la promesa finaliza con éxito.

[Leguim]

Es posible que puedas resolver tu problema usando Promesas:

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Promise

Por ejemplo:

Código [Seleccionar] Expandir

function Change_Select_Ubication(parametro) {
  return new Promise((resolve, reject) => {
    $.ajax('https://httpbin.org/get')
    .then(() => {
      console.log(parametro);
      resolve(100);
    })
  });
};

Change_Select_Ubication('Primero')
.then(
  function () {
    Change_Select_Ubication('Segundo');
  }
);

Basicamente lo que haces es que en tu función regresas una Promise, es un objeto que te permite esperar hasta que llamas la función "resolve" y al llamar esta función le estás diciendo "Ya terminé, con éxito". A esta promesa le puedes encadenar llamadas "then()" que se ejecutan solamente cuando la promesa finaliza con éxito.

¡Hola!

¿Para que sirve "https://httpbin.org/get"?  adentro hay

Código (javascript) [Seleccionar] Expandir


{
  "args": {},
  "headers": {
    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
    "Accept-Encoding": "gzip, deflate, br",
    "Accept-Language": "es-419,es;q=0.9",
    "Host": "httpbin.org",
    "Sec-Fetch-Mode": "navigate",
    "Sec-Fetch-Site": "none",
    "Upgrade-Insecure-Requests": "1",
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
  },
  "origin": "181.224.191.126, 181.224.191.126",
  "url": "https://httpbin.org/get"
}


¿Para que serviría esto? Cuando me desocupe voy a probar el código que me pasaste y te digo... Muchas gracias!

[Leguim]

Es posible que puedas resolver tu problema usando Promesas:

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Promise

Por ejemplo:

Código [Seleccionar] Expandir

function Change_Select_Ubication(parametro) {
  return new Promise((resolve, reject) => {
    $.ajax('https://httpbin.org/get')
    .then(() => {
      console.log(parametro);
      resolve(100);
    })
  });
};

Change_Select_Ubication('Primero')
.then(
  function () {
    Change_Select_Ubication('Segundo');
  }
);

Basicamente lo que haces es que en tu función regresas una Promise, es un objeto que te permite esperar hasta que llamas la función "resolve" y al llamar esta función le estás diciendo "Ya terminé, con éxito". A esta promesa le puedes encadenar llamadas "then()" que se ejecutan solamente cuando la promesa finaliza con éxito.

Logré solucionarlo gracias a tu código,

¡Muchas gracias, después de tanto ya pude hacerlo! 

[Agente Naranja]

Me alegro que hayas solucionado el problema, por si quieres saberlo aún, la URL que usé era solamente una API de prueba, para confirmar que el código funcionaba cuando se hacía un ajax() de verdad y no simplemente simularlo usando un setTimeout(...), lo único que hice fue buscar una api pública, la información que devuelve es solamente de ejemplo