У меня есть следующий код, который отлично работает … до сих пор. Но я хочу, чтобы в следующий раз была загружена форма … прочитайте ниже этот код для объяснения.
Главная страница:
<li><a href="content1.php" class="load-external" data-target="#right_section">Some Content</a></li> <div id="right_section"></div> <script> $('body').on('click', 'a.load-external', function(e){ var target = $( $(this).attr('data-target') ); target.load( $(this).attr('href') ); e.preventDefault(); }); </script> content1.php
<li><a href="content2.php" class="load-external" data-target="#right_section">Some Content 2</a></li>
Теперь в content1.php все ссылки (a = href …) отлично работают и загружаются в div #right_section.
Но на content1.php у меня также есть некоторые формы, и я бы хотел, чтобы они также загружались в тот же div #right_section. Образец формы выглядит следующим образом:
образец формы в content1.php:
<form action="report_output.php" method="get" id="graphIt">
Как я могу получить форму (любая форма, может быть несколько на странице) для загрузки в div #right_section без загрузки по всей странице (что она делает сейчас)
Благодаря !
Вам нужно будет заменить обработчик отправки формы, подобно тому, как вы заменили обычный обработчик ссылок на ссылки.
HTML:
<form action="report_output.php" class="load-external" method="get" id="graphIt" data-target="#right_section">
JS:
$('body').on('submit', 'form.load-external', function(e) { e.preventDefault(); var target = $($(this).data('target')); $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: $(this).serialize(), dataType: 'html', success: function(response) { target.html(response); } }); });