Jquery не проходит через AJAX

ProgramBox

Jquery не проходит через AJAX

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

#javascript #jquery #ajax

Вопрос:

У меня есть странная проблема, с которой я столкнулся, и я не уверен, что происходит.

У меня есть две страницы, созданные с помощью PHP — «главная» страница, которая используется для целей AJAX. Проблема, с которой я сталкиваюсь, заключается в следующем: кажется, что я не могу использовать JQUERY всякий раз, когда я использую AJAX для запроса страницы. Вот что я имею в виду.

Первым в списке указан исходный код главной страницы. Вы заметите, что пока nav работает на главной странице, appendSection() не работает. С чего бы это? Мое лучшее предположение заключается в том, что JQUERY плохо играет с AJAX, но я понятия не имею. Это новая проблема для меня.

Далее в списке приведен исходный код страницы «AJAX». Вы заметите nav , что функция и то appendSection() и другое работают, так как навигация по боковой панели работает, а на странице вложений всякий раз, когда вы начинаете вводить запись во ввод URL-адреса, ниже вставляется новый ввод.

Главная страница:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<a onclick="assignInfo('new')">Launch</a>

<div id="assignModal" class="modal">
  <form id="assignInfo" action='assign.int.php' method='POST'></form>
  <input form='assignInfo' type='hidden' name='source' value='plan'>
</div>

<script> /* ---- Script to populate Assign modal ---- */
  var assignModal = document.getElementById("assignModal");

  function assignInfo(str){
     assignModal.style.display = "block";
     if (str == 'new') {var url = "assignModal.tem.php";}
     else {var url = "assignModal.tem.php?assID="   str;}
     fetch(url).then((response) =>response.text()).then((text) => {
          var parser = new DOMParser();
          var doc = parser.parseFromString(text, "text/html");
          var ele = doc.documentElement;
          var scripts = ele.getElementsByTagName('script');
          for(var script of scripts){
              var head = document.getElementsByTagName('head')[0];
              var scriptElement = document.createElement('script');
              scriptElement.setAttribute('type', 'text/javascript');
              scriptElement.innerText = script.innerText;
              head.appendChild(scriptElement);
              head.removeChild(scriptElement);
         }
         document.getElementById("assignInfo").innerHTML=text;
        });
  }

  window.onclick = function(event) {                                              /* Make modal disappear when you click "X" */
    if (event.target == assignModal) {
      if (confirm("Are you sure? This assignment will not be saved if you exit.")) {
        assignModal.style.display = "none";
      } else {
        assignModal.style.display = "block";
      }
    }
  }
</script>

<script>
  // This section handles adding new links to page //
  function appendSection() {
    $(this).off('change');
    const newSection = $(this).closest('section').clone();
    newSection.find('input, select').each((i, el) => {
      el.value = '';
      el.name = el.name.replace(/[(d)]/, (match, p1) => `[${parseInt(p1)   1}]`);
    });
    newSection.on('change', appendSection);
    $('.attachments').append(newSection);
  }
  $(".attachments section input[type='url']").change(appendSection);

  // This section handles navigation //
  function nav(arg) {
    var destination = arg.dataset.nav;
    var pages = document.querySelectorAll("[data-page]");
    var nav = document.querySelectorAll("[data-nav]");

    for (i = 0; i < nav.length; i  ) { // Remove the class 'active' if it exists
      nav[i].classList.remove('active')
    }
    arg.classList.add('active');

    for (i = 0; i < pages.length; i  ) { // Hide/show the correct pages
      if (pages[i].dataset.page != destination) {
        pages[i].style.display = "none";
      } else {
        if (destination == 'basic') {pages[i].style.display = "flex";}
        if (destination != 'basic') {pages[i].style.display = "block";}
      }
    }
  }
</script>

СТРАНИЦА AJAX (ОНА ЖЕ assignModal.tem.php, как указано на главной странице):

 // This section handles adding new links to page //
  function appendSection() {
    $(this).off('change');
    const newSection = $(this).closest('section').clone();
    newSection.find('input, select').each((i, el) => {
      el.value = '';
      el.name = el.name.replace(/[(d)]/, (match, p1) => `[${parseInt(p1)   1}]`);
    });
    newSection.on('change', appendSection);
    $('.attachments').append(newSection);
  }
  $(".attachments section input[type='url']").change(appendSection);

  // This section handles navigation //
  function nav(arg) {
    var destination = arg.dataset.nav;
    var pages = document.querySelectorAll("[data-page]");
    var nav = document.querySelectorAll("[data-nav]");

    for (i = 0; i < nav.length; i  ) { // Remove the class 'active' if it exists
      nav[i].classList.remove('active')
    }
    arg.classList.add('active');

    for (i = 0; i < pages.length; i  ) { // Hide/show the correct pages
      if (pages[i].dataset.page != destination) {
        pages[i].style.display = "none";
      } else {
        if (destination == 'basic') {pages[i].style.display = "flex";}
        if (destination != 'basic') {pages[i].style.display = "block";}
      }
    }
  }

 .modal {
    display: none;
    position: fixed;
    z-index: 20;
    right: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s}

  .assignment-window{
    display: grid;
    position: fixed;
    overflow: hidden;
    padding: 10px;
    padding-bottom: 16px;
    box-sizing: border-box;
    width: 100vw; height: 70vh;
    bottom: 0; left: 0;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color: white;
    grid-template-rows: auto 1fr;
    grid-template-columns: 0.9fr 2.5fr;
    grid-template-areas:
      "asstop asstop"
      "assnav asscontent"}


  /* ----------[ASS TOP]---------- */
  .asstop {
    grid-area: asstop;
    padding: 24px 20px;
    box-sizing: border-box;
    border-bottom: 2px solid #581F98;}

  .asstop .title {
    display: flex;
    align-items: center;}

  .asstop .title input {
    flex: 1 1;
    font-size: 24px;
    border-radius: 8px;
    margin-right: 20px;
    border: 1px solid lightgray}

  .asstop select {
    outline: none;
    -webkit-appearance: none;
    padding: 12px 16px;
    font-size: 24px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid lightgray}

  .asstop button {
    margin-top: -5px;}


  /* ----------[ASS NAV]---------- */
  .assnav {
    grid-area: assnav;
    padding-top: 20px;
    padding-right: 10%;
    border-right: 1px solid lightgray}

  .assnav ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none}

  .assnav li {
    display: block;
    text-decoration: none;
    color: #484848;
    font-size: 20px;
    padding: 14px 20px;
    margin-bottom: 10px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;}
    .assnav li:hover {background-color: #F2F2F2}
    .assnav li.active {background-color: #EEEEEE}


  /* ----------[ASS CONTENT]---------- */
  .asscontent {
    grid-area: asscontent;
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    overflow: scroll}

  .asscontent input, .asscontent select {
    flex: 1;
    outline: none;
    -webkit-appearance: none;
    padding: 8px 16px;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid lightgray}


  /* ==== Basic Styling ==== */
  .asscontent .basic {
    display: flex;
    height: 100%;
    flex-direction: column}

  .asscontent .basic textarea {
    flex: 1;
    font-size: 18px;
    border-radius: 8px;
    box-sizing: border-box;}

  .asscontent .basic .config {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;}
    .asscontent .basic input {text-align: center;}
    .asscontent .basic .points {width: 80px;}


  /* ==== Attachment Styling ==== */
  .asscontent .attachments {display: none}

  .asscontent .attachments section {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid lightgray}


  /* ==== Delete Styling ==== */
  .asscontent .advanced {display: none}


  /* ==== Delete Styling ==== */
  .asscontent .delete {display: none;}

  .asscontent .delete ul {margin-bottom: 30px;}

  .asscontent .delete li {margin-bottom: 10px;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class='assignment-window'>
    <div class='asstop'>
      <div class='title'>
        <select name='assEmoji'>
          <option >✏️</option>
          <option >💻</option>
          <option >📚</option>
          <option >💯</option>
          <option >🧪</option>
        </select>
        <input name='title' type='text' placeholder='Type assignment title..' value='' required>
        <button name='createAss' class='button purple-btn'>Assign Task</button>
      </div>
    </div>
    <div class='assnav'>
      <ul>
        <li data-nav='basic' onclick='nav(this);' class='active'>Basic Setup</li>
        <li data-nav='attachments' onclick='nav(this);'>Attachments</li>
        <li data-nav='advanced' onclick='nav(this);'>Advanced Settings</li>
      </ul>
    </div>
    <div class='asscontent'>
      <div class='basic' data-page='basic'>
        <textarea name='directions' placeholder='Type assignment directions..'></textarea>
        <div class='config'>
          <section>
            <span>Subject: </span>
            <select name='subID'>
              <option value='1' >Reading</option>
              <option value='2' >Social Studies</option>
              <option value='3' >Math</option>
              <option value='4' >Science</option>
              <option value='5' >Writing</option>
            </select>
          </section>
          <section>
            <span>Points:</span>
            <input name='points' class='points' type='text' value='100'>
          </section>
          <section>
            <span>Due Date:</span>
            <input name='due' type='datetime-local' value='2021-09-10T15:00'>
          </section>
        </div>
      </div>
      <div class='attachments' data-page='attachments'>
        <section>
          <div class='displayName'>
            <select name='link[0][linkEmoji]'>
              <option >📎</option>
              <option >🎬</option>
              <option >📖</option>
            </select>
            <input name='link[0][linkTitle]' placeholder='Title of website..' type='text' value=''>
          </div>
          <div class='url'>
            <input name='link[0][linkURL]' placeholder='Insert website URL..' type='url' value=''>
          </div>
          <div class='visible'>
            <span>Visible: <span>
            <select name='link[0][linkClass]'>
              <option value=''>- All Students -</option><option value='1' >🟣 Reading/Social</option><option value='2' >🔴 Reading/Social</option><option value='3' >🔵 Reading/Social</option><option value='4' >🟢 Reading/Social</option>
            </select>
          </div>
        </section>
      </div>
      <div class='advanced' data-page='advanced'>
        <section>
          <span>Visible to students: </span><input name='assigned' type='date' value='2021-09-07'>
        </section>
        <section>
          <span>Submission: </span>
          <select name='submitType'>
            <option value='scan' >Require students to scan.</option>
            <option value='button' >Allow scanning or turn in button.</option>
            <option value='button' >Do not allow submissions.</option>
          </select>
        </section>
        <section>
          <span>Assignment Type: </span>
          <select name='assType'>
            <option >Assignment</option>
            <option >Assessment</option>
            <option >Daily Work</option>
            <option >Quiz</option>
            <option >Participation</option>
            <option >Project</option>
          </select>
        </section>
      </div>
      <div class='delete' data-page='delete'>
        <p>Deleting the assignment? The following will happen: </p>
        <ul>
          <li>All recorded scores will be deleted.</li>
          <li>Student averages will adjust from the deleted scores.</li>
          <li>The assignment will be removed from student view.</li>
          <li>This action cannot be undone.</li>
        </ul>
        <button type='button' class='button grey-btn'>Cancel</button>
        <button name='deleteAss' class='button red-btn'>Permanently Delete</button>
      </div>
    </div>
  </div>

Метки: Jquery не проходит через AJAX

Вопрос:

Вам также может понравиться

Нет метода viewDidLoad в PSListController

Как я могу получить интерактивную оболочку (например, irb от Ruby) для Java?

Как мне получить круглые углы для MDCTextField Material Design