изменить список выбора после модального подтверждения начальной загрузки - PullRequest
0 голосов
/ 13 февраля 2019

У меня есть список выбора.

Когда пользователь изменяет опцию списка выбора, я хочу, чтобы модал начальной загрузки отображался, и только если нажата кнопка подтверждения модала, измени список выбора.

Я просто не могу правильно понять код и не могу найти ответ от Google.

Вот мой список выбора кода:

<select id="id_language_code" name="language_code" required="">

    <option value="en" selected="selected">English (US)</option>
    <option value="en-ca">English (Canada) - English (Canada)‎</option>
    <option value="en-gb">English (UK) - English (UK)‎</option>
    <option value="es">Spanish (Spain) - español (España)‎</option>
    <option value="es-419">Spanish (Latin America) - español (Latinoamérica)‎</option>
    <option value="fr">French (France) - français (France)‎</option>
    <option value="fr-ca">French (Canada) - français (Canada)‎</option>
    <option value="fr-ch">French (Switzerland) - français (Suisse)‎</option>

</select>

Вот мой модальный код:

<div id="language_change_modal" class="modal rounded modal-confirm-medium-width fade" style="height: 230px;" role="dialog" aria-labelledby="cancelConfirmLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="glyphicon glyphicon-remove"></icon></button><h4 class="modal-title" id="cancelConfirmLabel">{% trans "Confirm Change Language" %}</h4>
    </div>
    <div class="modal-body-confirm">{% trans "This will reset all your details." %} {% trans "Are you sure you want to change languages?" %}</div>
    <div class="modal-footer">
        <a class="btn rounded btn-default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle icon_padding"></i>{% trans "No" %}</a>
        <span class="spacer"></span>
        <a class="btn rounded btn-primary" id="cancelConfirmOK"><i class="fa fa-check-circle icon_padding"></i>{% trans "Yes" %}</a>
    </div>
</div>

Вот мой триггерный код js / jq:

$(document).ready(function() {
  ....
  $('#id_language_code').on('change', function() {
    $('#language_change_modal').modal('show');  // user confirm language change.
  });

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Поскольку вы уже ссылаетесь на Bootstrap, я настоятельно рекомендую использовать Bootbox.confirm .Он прост в использовании и намного чище, чем необходимость выписывать всю модальную коробку ... плюс он поставляется с обратным вызовом (из коробки), чтобы помочь вам.

Я создал JSFiddle для вас, чтобы показать, что я имею в виду.Я не изменяю список выбора, но показываю предупреждение, если кнопка «Да» была нажата (это то, что вы ищете в соответствии с вашими комментариями).Вы можете редактировать и настраивать определенные параметры загрузочной коробки в соответствии с вашими потребностями.

Вот мой пример кода.

HTML

<select id="My-Select">
  <option value="0">Select Option</option>
  <option value="1">Option One</option>
  <option value="2">Option Two</option>
  <option value="3">Option Three</option>
</select>

jQuery

$("#My-Select").change(function(){

  // use bootbox for easy implementation
  bootbox.confirm({
    message: "Are you sure you want to do this?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-success'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) { // result is 'true' if the 'yes' button is clicked
        if(result)
            alert("Yes, I want to change the select list.");
            // Here is where you would reset the select list
        else
            alert("No, I do not want to change the select list.");
            // Here is where you do not reset the select list
    }
});

});

Дайте мне знать, если это поможет!

0 голосов
/ 13 февраля 2019

Все, что вам нужно сделать, это добавить прослушиватель событий щелчка на кнопках «Да» и «Нет» внутри модального окна, а также сохранить предыдущую опцию выбора.

Я немного обновил модальный html, потому что модальный не былвыглядит хорошо.Также я добавил атрибут data-dismiss к кнопке Yes.

Когда пользователь выбирает yes, все в порядке, выбор будет изменен, и мы сохраняем этот новый выбор в нашей переменной $preSelection. * 1006.*

Когда пользователь выбирает «Нет», мы возвращаем назад к предыдущему значению.Как правило, это способ сделать это, я не видел другого способа специально предотвратить выборочный обмен.

$(document).ready(function() {
  let $prevSelection = $("#id_language_code option:selected");

  $('#id_language_code').on('change', function() {
    $('#language_change_modal').modal('show'); // user confirm language change.
  });

  $('#yesButton').on('click', function() {
    $prevSelection = $("#id_language_code option:selected");
    console.log("Yes was clicked. Allowing selection change and saving new selection");
  });

  $('#cancelButton').on('click', function() {
    console.log("No was clicked. Resetting select to previous value");
    $prevSelection.prop("selected", true);
  });

});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<select id="id_language_code" name="language_code" required="">

  <option value="en" selected="selected">English (US)</option>
  <option value="en-ca">English (Canada) - English (Canada)‎</option>
  <option value="en-gb">English (UK) - English (UK)‎</option>
  <option value="es">Spanish (Spain) - español (España)‎</option>
  <option value="es-419">Spanish (Latin America) - español (Latinoamérica)‎</option>
  <option value="fr">French (France) - français (France)‎</option>
  <option value="fr-ca">French (Canada) - français (Canada)‎</option>
  <option value="fr-ch">French (Switzerland) - français (Suisse)‎</option>

</select>

<div id="language_change_modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Change</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>This will reset all your details. Are you sure you want to change languages?
        </p>
      </div>
      <div class="modal-footer">
        <a class="btn rounded btn-default" id="cancelButton" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle icon_padding"></i>No</a>
        <span class="spacer"></span>
        <a class="btn rounded btn-primary" id="yesButton" data-dismiss="modal"><i class="fa fa-check-circle icon_padding"></i>Yes</a>
      </div>
    </div>
  </div>
</div>
...