0

¿Hay alguna manera de obtener los datos del paso anterior y usarlos en el siguiente paso?


Quiero obtener el valor del primer paso y usarlo en el segundo paso para hacer un llamada ajax o fetch y usarlos datos devueltos en el segundo select, al finalizar usar los tres valores en otra petición ajax o fetch.


Algo similar al siguiente Ejemplo sweetalert2:

queue = async() => {
  const data1 = '';
  const {
    value: formValues
  } = await Swal.mixin({
    confirmButtonText: 'Next →',
    showCancelButton: true,
    progressSteps: ['1', '2', '3']
  }).queue([{
      title: 'Question 1',
      text: 'Chaining swal2 modals is easy',
      input: 'select',
      inputOptions: {
        apples: 'Apples',
        bananas: 'Bananas',
        grapes: 'Grapes',
        oranges: 'Oranges'
      },
      inputPlaceholder: 'Select a fruit',
      showCancelButton: true,
      inputValidator: (value) => {
        return new Promise((resolve) => {
          if (value != '') {
            resolve()
          } else {
            resolve('You need to select:)')
          }
        })
      }
    },
    {
      title: 'Question 2',
      text: 'Chaining swal2 modals is easy',
      input: 'select',
      inputOptions: {
        apples: 'Apples',
        bananas: 'Bananas',
        grapes: 'Grapes',
        oranges: 'Oranges'
      },
      inputPlaceholder: 'Select a fruit',
      showCancelButton: true,
      inputValidator: (value) => {
        return new Promise((resolve) => {
          if (value != '') {
            resolve()
          } else {
            resolve('You need to select:)')
          }
        })
      }
    },
    {
      title: 'Question 3',
      text: 'Chaining swal2 modals is easy',
      input: 'select',
      inputOptions: {
        apples: 'Apples',
        bananas: 'Bananas',
        grapes: 'Grapes',
        oranges: 'Oranges'
      },
      inputPlaceholder: 'Select a fruit',
      showCancelButton: true,
      inputValidator: (value) => {
        return new Promise((resolve) => {
          if (value != '') {
            resolve()
          } else {
            resolve('You need to select:)')
          }
        })
      }
    }
  ]).then((result) => {
    if (result.value) {
      const answers = JSON.stringify(result.value)
      Swal.fire({
        title: 'All done!',
        html: `
            Your answers:
            <pre><code>${answers}</code></pre>
          `,
        confirmButtonText: 'Lovely!'
      })
    }
  })
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<h1>sweetalert2 queue!</h1>
<button type="button" class="btn btn-info" onclick="queue();">Info</button>

Encontré algo similar pero no me queda muy claro en este link


Quiero obtener el valor del primer paso y usarlo en el segundo paso para hacer un llamada ajax o fetch y usarlos datos devueltos en el segundo select, al finalizar usar los tres valores en otra petición ajax o fetch.


1 respuesta 1

0

Tendrías que usar una Dynamic queue, usando preConfirm en cada fase del modal puedes usar Swal.insertQueueStep para agregar una fase al final de la cola y hacerlas dinamicamente con el valor de la fase anterior

queue = async() => {
  const data1 = '';
  const { value: formValues } = await Swal.mixin({
    confirmButtonText: 'Next &rarr;',
    showCancelButton: true,
    progressSteps: ['1', '2', '3']
  }).queue([
    step1()
  ]).then((result) => {
    console.log('end of queue')
  })
}

function step1(){
  return {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy',
    input: 'select',
    inputOptions: {
      apples: 'Apples',
      bananas: 'Bananas',
      grapes: 'Grapes',
      oranges: 'Oranges'
    },
    inputPlaceholder: 'Select a fruit',
    showCancelButton: true,
    inputValidator: (value) => {
      return new Promise((resolve) => {
        if (value != '') {
          resolve()
        } else {
          resolve('You need to select:)')
        }
      })
    },
    preConfirm: (result) => {
       Swal.insertQueueStep(step2(result))
    }
  }
}

function step2(fruit){
  return {
    title: 'Question 2',
    text: 'Chaining swal2 modals is easy, previous value: '+ fruit,
    input: 'select',
    inputOptions: {
      apples: 'Apples',
      bananas: 'Bananas',
      grapes: 'Grapes',
      oranges: 'Oranges'
    },
    inputPlaceholder: 'Select a fruit',
    showCancelButton: true,
    inputValidator: (value) => {
      return new Promise((resolve) => {
        if (value != '') {
          resolve()
        } else {
          resolve('You need to select:)')
        }
      })
    },
    preConfirm: (result) => {
       Swal.insertQueueStep(step3(fruit, result))
    }
  }
}

function step3(fruit1, fruit2){
  return {
    title: 'Question 3',
    text: 'Chaining swal2 modals is easy, previous values: '+fruit1+', '+fruit2,
    input: 'select',
    inputOptions: {
      apples: 'Apples',
      bananas: 'Bananas',
      grapes: 'Grapes',
      oranges: 'Oranges'
    },
    inputPlaceholder: 'Select a fruit',
    showCancelButton: true,
    inputValidator: (value) => {
      return new Promise((resolve) => {
        if (value != '') {
          resolve()
        } else {
          resolve('You need to select:)')
        }
      })
    }
  }
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<h1>sweetalert2 queue!</h1>
<button type="button" class="btn btn-info" onclick="queue();">Info</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.