Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2021
    Messaggi
    0

    Ajax, httpRequest e eventi onchange

    Buongiorno!

    Sto creando un form che pressapoco ha la funzione di fissare degli appuntamenti per degli operatori.
    Il form, in particolare, ha un input data (data appuntamento) e una select (elenco operatori).

    Al caricamento della pagina la select viene popolata con i nominativi di tutti gli operatori disponibili nella settimana, ordinati per giorni.
    Alla selezione di una data (onchange), tramite JS mando un HTTPRequest ad una pagina php che, interrogato il DB, sostituisce la select caricata inizialmente con una sua gemella contenente solo i nominativi degli operatori attivi in quel preciso giorno.

    Alla select è associato un altro evento, sempre onchange, che, una volta selezionato un operatore, mostra in un div esterno gli orari degli appuntamenti già presenti per quell'operatore.

    Ora, finchè nella mia pagina non viene selezionata una data (evento onchange sulla data) l'evento onchange sulla select funziona correttamente. Ma dal momento in cui la select viene modificata tramite il primo evento JS (riferito alla data) la funzione su di essa termina si funzionare.
    Per semplificare la vita a chi leggerà questo messaggio ho semplificato e striminzito il codice, mantenendo ovviamente le parti importanti e che generano problemi.

    Vi riporto il codice sorgente:
    FORM
    codice HTML:
    <div id="info"></div>
    <form>
    <div id="input-form">
      <input type="date" name="data" id="dataApp" onChange="checkDate()" required>
    </div>
    <div id="divSquadre">
      <select name="squadra" onChange="orariApp()" id="squadra" required>
      <option value="0">Operator 1</option>
      <option value="1">Operator 2</option>
      <option value="2">Operator 3</option>
      </select>
    </div>
    </form>
    codice HTML:
    function checkDate() {
          var data=document.getElementById("dataApp").value;
    
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("divSquadre").innerHTML = this.responseText;
            }
          };
          xmlhttp.open("GET", "./ajax/checkSquadreInDataApp.php?data=" + data , true);
          xmlhttp.send();
        }
    
    function orariApp() {
    
      //if run function checkDate() this function doesn't work
      alert("i'm working :)");
     }
    Codice PHP:
    $data=$_REQUEST["data"];
    //CODICE OSCURATO DI INTERROGAZIONE DB
    echo '<select name="squadra" onChange="orariApp()" id="squadra" required>';
    foreach(
    $squadra as $el){
      echo 
    '<option value="'.$el['id'].'">'.$el['id'].'</option>';
    } echo 
    '</select>'

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,372
    il problema nasce dal fatto che quando cambi la data, e ricarichi la select, difatti stai cancellando anche l'evento ad esso associato.

    All' avvio della pagina viene associato l'evento change alla select degli operatori
    Cambiando data, cancelli la select e la inserisci in pagina. In questo caso l'evento non viene riassociato.

    Per evitare questo problema puoi usare jQuery oppure modificare solo il contenuto della option della select piuttosto che riscriverla.
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.