Поле ввода в модальном окне не обновляется с помощью jQuery

ProgramBox

Поле ввода в модальном окне не обновляется с помощью jQuery

Post author:admin
Запись опубликована:23 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery

Вопрос:

Я запускаю модал с идентификатором exampleModalCenter , используя jQuery и Ajax, как показано ниже

 $(".phAssignedDetails").click(function() {
  var sr = $(this).closest(".card-body").find("input[name='srNum']").val();
  var curStage = $(this).closest(".card-body").find("input[name='currentStage']").val();
  $.ajax({
    type: "POST",
    url: "commonFiles/passFailHoldModal.php",
    data: {
      sr: sr
    },
    success: function(result) {
      $("#exampleModalCenter").modal('show');
      $("#currentSubStage").text(curStage);
    }
  });
});

Модальный код HTML внутри passFailHoldModal.php , как показано ниже

 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Actions</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" id="assignOaForm" name="assignOaForm">
          <input type="text" id="tagSerial" name="tagSerial">
          <input type="text" id="currentSubStage" name="currentSubStage">
        </form>
      </div>
    </div>
  </div>
</div>

Как вы можете видеть, я пытаюсь изменить значение #currentSubStage переменной curStage после модального показа. Но это не обновление значения. Может ли кто-нибудь помочь в этом?

Правка 1

Вот кнопка

 <button type="button" class="btn btn-outline-dark phAssignedDetails" name="phAssignedDetails" style="margin-right:5px; margin-bottom:5px; float: right;"><i class="fas fa-angle-double-right" style="color:#3CE74E"></i></button>

1. Первое, что приходит мне в голову, если вы попытаетесь обновить значение поля с помощью: $(«#currentSubStage»).val(curStage); ?

2. Значением curStage может быть некоторая строка. Но когда срабатывает модальный режим, поле ввода отображается пустым

3. Нам нужно увидеть html для phAssignedDetails

4. Измените $(«#currentSubStage»).текст(curStage); на $(«#currentSubStage»).val(curStage);

5. Я только что сказал вам в комментарии ранее, вы должны попытаться обновить значение поля с $("#currentSubStage").val(curStage); помощью успешного обратного вызова ajax

Ответ №1:

text() это не та функция. Вы не пытаетесь изменить содержимое HTML-элемента, такого как div, а пытаетесь присвоить значение входным данным.

Вот как вы должны это сделать:

 $(document).ready(function() {
  $(document).on("click", "#container", function() {
    var curStage = $("input[name='currentStage']").val();
    $("input[name='currentSubStage']").val(curStage);
  });
});

 html, body {
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
<input type="text" name="currentStage" value="foo">

<form method="post" id="assignOaForm" name="assignOaForm">
  <input type="text" id="tagSerial" name="tagSerial">
  <input type="text" id="currentSubStage" name="currentSubStage">
</form>
</div>

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

2. Ваш код работает. Но, по логике вещей, моя тоже делает то же самое. Дай мне разобраться

3. Тогда почему вы рассматривали это как ответ?

Ответ №2:

Попробуйте выполнить приведенный ниже код.

 $(".phAssignedDetails").click(function() {
  var sr = $(this).closest(".card-body").find("input[name='srNum']").val();
  var curStage = $(this).closest(".card-body").find("input[name='currentStage']").val();
  $.ajax({
    type: "POST",
    url: "commonFiles/passFailHoldModal.php",
    data: {
      sr: sr
    },
    success: function(result) {
      $("#exampleModalCenter").modal('show');
      $("#currentSubStage").val(curStage);
    }
  });
});

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-dark phAssignedDetails" name="phAssignedDetails" style="margin-right:5px; margin-bottom:5px; float: left;"><i class="fas fa-angle-double-right" style="color:#3CE74E"></i></button>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Actions</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" id="assignOaForm" name="assignOaForm">
          <input type="text" id="tagSerial" name="tagSerial">
          <input type="text" id="currentSubStage" name="currentSubStage">
        </form>
      </div>
    </div>
  </div>
</div>

Метки: Поле ввода в модальном окне не обновляется с помощью jQuery