Как я могу добавить AJAX -груженную форму после нажатия на div? - PullRequest
Новая
       1

Как я могу добавить AJAX -груженную форму после нажатия на div?

0 голосов
/ 23 января 2020

У меня есть список элементов на веб-странице. Я хотел бы загрузить форму с помощью Ajax каждый раз, когда я нажимаю на любой элемент в списке. HTML выглядит следующим образом: 

<div class="item">
    <... some html code for the first item ...>
</div>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

Моя цель состоит в том, чтобы, если пользователь нажимает на первый «элемент-элемент», форма загружалась с использованием AJAX. Загруженная форма должна быть вставлена ​​после "item-div" ... примерно так: 

<div class="item">
    <... some html code for the first item ...>
</div>
<form>
    <... some html code for the form... loaded via AJAX...>
</form>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

Я не могу понять, почему это не сработает. Вот мой jQuery код: 

$(document).ready(function(){
  $(".item").click(function(){
    $(this).after().load("loadform.php");
  });
});

Функция Ajax -load перезаписывает внутренний <... some html code... > вместо добавления его после "item-div". Что не так? Как я могу решить это?

Ответы [ 4 ]

1 голос
/ 23 января 2020

У меня нет фиктивного фрагмента где-то в inte rnet, где я могу загрузить фиктивный контент для имитации вашего loadform.php, но я проверил его локально, и он работает.

  1. Сначала вы прикрепляете событие щелчка, вы также можете использовать on('click', function ...)
  2. Вы сохраняете нажатый элемент в currentItem
  3. Вы выполняете запрос Ajax с $.get
  4. В случае успеха , добавьте результат запроса Ajax к сохраненному элементу currentItem 

$(document).ready(function(){
    $(".item").click(function(){
        var currentItem = $(this);
        $.get('loadform.php', function(data){
            currentItem.after(data); 
        }).fail(function() {
            console.log( "Can't load loadform.php" );
        })
    });
});
.item {
    cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
    ... some html code for the first item ...
</div>
<div class="item">
    .. some html code for the next item ...
</div>
0 голосов
/ 23 января 2020

Вы не можете использовать load () с after (). Когда обнаружен успешный ответ (т. Е. Когда textStatus имеет значение «success» или «notmodified»), .load () устанавливает содержимое HTML соответствующих элементов в возвращаемые данные. Если вы хотите загрузить содержимое для loadform, вы можете попробовать Метод $ .get, как показано ниже. 

$(document).ready(function(){
      $(".item").click(function(){
         $.get('loadform.php', function(data){ 
        $(this).after(data); 
       });

      });
    });
0 голосов
/ 23 января 2020

Иногда случается так, что если вы вставили новый код html в DOM с помощью jquery, тогда вы будете следовать этой процедуре. Это обновит sh DOM позади увиденного. Это может помочь вам, простой тест без ajax. У вас есть ошибка в вашем запросе ajax, сначала убедитесь, что console.log(data) ваши возвращаемые данные, а затем добавьте их. Спасибо. 

    <!DOCTYPE html>
      <html>
        <head>
         <title>Smple Test</title>
        </head>
      <body>
       <div class="item">Div 1</div>
       <div class="item">Div 2</div>
       <div class="item">Div 3</div>
       <div class="item">Div 4</div>
     </body>
    </html>


    $(document).ready(function(){
      var form = '<form action="#" id="form1"><div>Hello Text</div></form>';
      $(document).on('click','.item',function(){
       $(this).after(form);
      });
    });

Простой тест JSFiddle

0 голосов
/ 23 января 2020

Может быть, попробуйте следующий способ. Получите данные из php, а затем вставьте их с помощью функции after. 

$.get('loadform.php', function(data){ 
    $(this).after(data); 
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...