This is a page using a single jQuery.ajax
posting to the same page and is working fine.
<?php
if (!isset($_POST['varA'])) {
?>
<html>
<head>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123"},
success: function(data)
{
$("#test").html(data);
}
});
}
</script>
</head>
<body>
<span id="test"></span>
</body>
</html>
<?php
}
else
{
print_r($_POST['varA']);
}
?>
Situation: I have another variable that I wish to set using another separate jQuery.ajax
. However, my page content duplicated itself when I put them altogether like this.
Bad Example (depicting what I'm trying to do)
<?php
if (!isset($_POST['varA'])) {
?>
<html>
<head>
<script type="text/javascript">
$(document).ready(bingo);
function bingo()
{
jQuery.ajax({
type: "POST",
data: {varA: "123"},
success: function(data)
{
$("#test").html(data);
}
});
}
function buttony() //added 2nd independent jQuery.ajax function
{
jQuery.ajax({
type: "POST",
data: {varB: "456"},
success: function(data)
{
$("#test2").html(data);
}
});
}
</script>
</head>
<body>
<span id="test"></span>
<span id="test2"</span> //added 2nd span
<input type="button" value="Clicky" onclick="buttony()"/> //added
</body>
</html>
<?php
}
else
{
print_r($_POST['varA']);
}
if(isset($_POST['varB'])) //added isset() checking
{
print_r($_POST['varB']);
echo 'varB Okay';
}
else
{
echo 'varB Not';
}
?>
Additional information: Posting of variables for both jQuery.ajax
of "Bad Example" are working fine.
Note: Pictures below are not from the codes above, just an example of what I meant by "content duplicated itself".
Before
After
Question: May I know where should I put my 2nd jQuery.ajax
function and isset()
checking of the POST variable, in such a way that both jQuery.ajax
functions will work correctly and won't conflict with each other?