jQuery的 - 在父页的DIV中加载表单提交（？） [英] jQuery - Loading form submission in DIV of parent page (?)

问题描述

我有以下代码，完美的工作......迄今为止。但我想接下来有一个表单加载...阅读下面的代码进行解释。

主页：

 < li>< a href =content1.phpclass =load-externaldata-target =＃right_section>一些内容< / li>< / 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.phpclass =load-externaldata-target =＃right_section>一些内容2< / a> ;< /锂> 
  

现在，在content1.php中，所有链接（a = href ...）到#right_section div。

但是在content1.php中，我也有一些表单，我希望它们也加载到同一个div #right_section中。表单示例如下：

content1.php中的示例表单：

 < form action =report_output.phpmethod =getid =graphIt> 
  

如何获取表单（任何表单，可能是页面上的多个表单） div #right_section，没有加载整个页面（现在它）

谢谢！

解决方法

您需要替换表单的提交处理程序，类似于您替换链接上的常规点击处理程序的方式。

HTML： / p>

 < form action =report_output.phpclass =load-externalmethod =getid =graphIt数据目标= ＃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）; 
} 
}）; 
}）; 
  

I have the following code, which works perfectly ... so far. But I want to next have a form load ... read below this code for an explanation.

Main Page:

<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>

Now, in content1.php , all links (a=href... ) work great and load into the #right_section div.

But on content1.php, I also have some forms, and I would like them to also load into the same div #right_section. A sample of a form is as follows:

sample form in content1.php:

<form action="report_output.php" method="get" id="graphIt">

How can I get a form (any form, might be multiple on the page) to load into the div #right_section, without loading over the entire page (which it does now)

Thanks !

解决方案

You'll need to replace the form's submit handler, similarly to the way you replaced the normal click handler on links.

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);
        }
    });
});

这篇关于jQuery的 - 在父页的DIV中加载表单提交（？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！