ajax продолжайте публиковать и предыдущие запросы - PullRequest
0 голосов
/ 09 апреля 2020

Работа с Bootstrap framework 3.3.7 У меня есть такой код:

$('#field_submit').click(function() {
       //omitted part not relevant
       if (counter == 0) {
           //non ho riscontrato errori, quindi posso inviare il form
           data = $('#new_field').serialize();
           $.ajax({
           //omitted part not relevant
           }).done(function(data) {
            //aggiungo il campo creato alla lista dei campi sulla sinistra
            if(data.status==200){
                //omitted part not relevant
            }else{
              //non sono riuscito a caricare i dati
              $('#modal-text').html('<p class="text-danger">'+data.message+'</p><b>Dati per il debug</b> (saranno inviati in automatico nella mail):<br>');
              var risposta = data;
              $("#modal-text").append(JSON.stringify(data));
              $('#message').modal('show');
              $('.segnalazione').click(function(){
                if($(this).attr('id')=='error_submit'){
                  mail= true;
                }
                //effettuo il caricamento
                $.ajax({
                  url: 'segnalazione.php',
                  method: 'post',
                  data: {form:'new_field', valori:risposta, mail: mail},
                  dataType: 'json'
                });
              });
            }       
          });
       }
   });

Как вы видите, если основной вызов ajax возвращает состояние, отличное от 200, я открываю модальное , отобразить некоторую информацию и при нажатии любой из двух кнопок (class = "segnalazione") я отправляю некоторые данные на второй ajax вызов.

Модальный код:

<div class="modal fade fade" id="message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crea un nuovo campo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal-text">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary segnalazione" data-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary segnalazione" id="error_submit" data-dismiss="modal">Invia mail</button>
      </div>
    </div>
  </div>
</div>

Рассмотрим этот случай: я открываю страницу, запускаю первый ajax, отображаю модальные и отправляю данные. Это отлично работает. Затем без перезагрузки страницы Я делаю это снова, снова показываю модал и отправляю данные. На этот раз я вижу два запроса: первый с данными предыдущего вызова, второй с правильными данными. Если я сделаю это снова, я увижу три вызова, первый с первыми данными, второй со вторыми данными и третий с правильными. Итак, после трех раз на второй странице в БД у меня будет три раза первые данные, два раза вторые и один раз третий.

Я пытался использовать stopPropagation, но это предотвратит закрытие модального окна. по нажатию кнопки (usind data-dismiss method).

1 Ответ

0 голосов
/ 09 апреля 2020

Убедитесь, что вы не сохраняете ссылку на первые «данные» через ваши вторые «данные», потому что вы используете то же имя переменной. Назвав вторую переменную «data», вы измените свою первую.

Предложите назвать ее «json» или что-то еще. Таким образом вы избежите конфликта имен.

JS Ссылка на объект привязана к имени переменной, а не к данным внутри. Обновляя 2-ю переменную - в действительности вы обновляете первую.

Подробнее здесь: https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...