es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

October CMS: Formulario AJAX

23 Jul, 2023 Programación

Mi objetivo es actualizar una parte para mostrar las fechas del curso cuando se especifica un rango de fechas y se envía.

Tengo una función que funciona según lo esperado.
– El usuario selecciona una fecha de inicio
– El usuario selecciona una fecha de finalización
– El usuario hace clic en buscar
– Los resultados se registran en la consola

Aquí está la función:

function onFetchDataFromServer()
{
    $course = Course::findOrFail( $this->param('id') );

$start = Input::get('start_date');

$end = Input::get('end_date');

$dates = $course->coursemetas->whereBetween('date', array($start, $end));

return $dates;
}

Aquí está el marcado:

<form class="row gx-3 align-items-center" data-request="onFetchDataFromServer" data-request-success="console.log(data)">
    <div class="col-12 col-lg pxp-has-left-border">
        <div class="input-group mb-3 mb-lg-0">
            <span class="input-group-text"><span class="fa fa-calendar-o"></span></span>
            <input type="date" class="form-control" id="startPicker" name="start_date" placeholder="Elige una fecha de inicio">
        </div>
    </div>
    <div class="col-12 col-lg pxp-has-left-border">
        <div class="input-group mb-3 mb-lg-0">
            <span class="input-group-text"><span class="fa fa-calendar-o"></span></span>
            <input type="date" class="form-control" id="endPicker" name="end_date" placeholder="Elige una fecha de finalización">
        </div>
    </div>
    <div class="col-12 col-lg-auto">
        <button type="submit">Buscar fechas</button>
    </div>
</form>

En lugar de registrar los resultados en la consola, ahora me gustaría actualizar una parte.

Tengo una parte en la vista llamada ‘course/metas’.

¿Alguien puede ayudarme, por favor?

Gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para actualizar la sección parcial y mostrar las fechas del curso cuando se especifica un rango de fechas y se envía, puedes hacer los siguientes cambios:

    1. Agrega el atributo data-update al elemento del formulario para especificar la sección parcial que debe actualizarse: 
      <form class="row gx-3 align-items-center" data-request="onFetchData" data-request-success="console.log(data)" data-update="course/metas">
    2. Modifica la función onFetchData para actualizar la sección parcial con los datos obtenidos: 
      function onFetchData()
{
   $curso = Curso::findOrFail($this->param('id'));

   $inicio = Input::get('fecha_inicio');

   $fin = Input::get('fecha_fin');

   $fechas = $curso->metascurso->whereBetween('fecha', array($inicio, $fin));

   return ['#partial-course-metas' => $this->renderPartial('course/metas', ['fechas' => $fechas])];
}

      El método renderPartial genera el HTML para la sección parcial course/metas con las fechas obtenidas como datos de entrada. El selector #partial-course-metas en el array retornado especifica el elemento que debe actualizarse con el HTML generado.

    3. Agrega el atributo id="partial-course-metas" al elemento que incluye la sección parcial:

      <div id="partial-course-metas">
   {% partial 'course/metas' %}
</div>

    Con estos cambios, cuando un usuario selecciona un rango de fechas y hace clic en el botón de búsqueda, se llamará a la función onFetchData para obtener las fechas y la sección parcial course/metas se actualizará con los datos obtenidos.

Comments are closed.