jQuery AJAX question, is this possible?
I know how to submit a form via ajax using the jQuery $.ajax() function. My Question is, what if the form is located on another page and I load the form itself via ajax:
$('.contentDiv').load('form.php');
Can I submit this AJAX loaded form via AJAX?
Basically I have to work within the limitations of a framework that is being used. The fram开发者_JAVA百科ework only allows certain forms to be rendered and to be submitted on specific views. So the form I need to show on page A can only be rendered on page B and submitted only on page B. I can load the form on page A via ajax, but if I write the code to submit the form via ajax to it's original action (page B) on page A, will it work?
What if I write the ajax code on page B, and load both the ajax code and form on page A via ajax, will that make it work?
UPDATE
Ok it did work. Sorry if I made it more complex than it was. Basically I put the ajax code for the form on page B and loaded both form and ajax code on page A via the load() function and when I submitted the form it updated the database fields properly from page A.
You simply need to bind the submit action of the form element returned by $().load().
$('.contentDiv').load('form.php', function() {
$('form#newFormId').submit(function() {
var data = $(this).serialize();
$.ajax({
url: 'submithandler.php',
data: data,
success: function(data) {
//response was ok, do something
}
});
return false;
});
})
If you need to trigger the submit action on the form, you can also do:
$('form#newFormId').submit();
This is simple loading and executing below:
<html>
<head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function()
{
$('.content').load("form.php");
$('#submit').live("click", function()
{
$.ajax({url: 'form.php'});
return false;
})
});
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
But if you want to load javascript also, than you need to append head section with the loaded javascript.
Is this what you have?
A.php:
<html>
<head>
... include your javascript files ...
</head>
<body>
<div class="contentDiv"></div>
</body>
$(document).ready(function() {
//some javascript stuff to make an ajax call
// to load form into contentDiv from source #1...
});
</html>
B.php
<html>
<head>
... include your javascript files ...
</head>
<body>
</body>
$(document).ready(function() {
//some javascript stuff to make an ajax call
// to load contents of page into body from **A.php** ...
});
</html>
If so then you have to include your javascript and CSS on both pages. It may work with out it in some browsers but other browsers (IE) will not like it.
加载中,请稍侯......
精彩评论