Why isn't my AJAX code working?
Question
I believe this should be pretty trivial, but I cannot figure it out at all. I am doing a small test with sending an AJAX request, and echoing a variable extracted from a drop-down menu.
However, it doesn't seem to be executing whatsoever. I was wondering if someone could help me point out what's wrong?
Here are the relevant snippets from index.php :
<html>
<?php
//create a drop down of available accounts
echo 'Available Accounts: ';
echo '<select name=dropAccounts class=dropAccounts>';
//if there is at least one account available
if (count($accsAvailable) > 0) {
echo '<option value=0>---Select an account---</option>'; //default option
foreach ($accsAvailable as $account) {
//populate from API
echo '<option value=' . $account->getId() . '>' . $account->getName() . '</option>';
}
} else {
echo '<option value=0>---No accounts---</option>'; //else if no accounts exist
}
echo '</select>';
//for available webproperties
echo '<br> Available Webproperties: ';
echo '<select name=dropProperties class=dropProperties>';
echo '<option selected=selected>---Select a webproperty---</option>';
echo '</select>';
?>
</html>
The important thing to take away from the snippet is that the first drop-down menu is called 'dropAccounts'.
here is my JS script for handling an onchange event on 'dropAccounts':
<script type="text/javascript">
$(document).ready(function()
{
$(".dropAccounts").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "propertyID.php",
data: dataString,
cache: false,
success: function(html)
{
$(".dropProperties").html(html);
}
});
});
});
</script>
I eventually intend to populate the second drop-down menu 'dropProperties' using the value grabbed from 'dropAccounts' but it's not even echoing in my PHP script.
propertyID.php :
<?php
if($_POST['id'])
{
$accountID = $_POST['id'];
echo $accountID;
}
?>
I was following the tutorial found here: http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html
3 answers
solution1
0 ACCPTED 2014-05-08 18:50:43
According to what I see the problem is the following:
var dataString = 'id='+ id;
data: dataString
You need to send the data in the following way;
data : {
'id' : id
}
And it should send you the data in the correct format.
EDIT: I'm adding this to clarify how your code would look.
<script type="text/javascript">
$(document).ready(function()
{
$(".dropAccounts").change(function()
{
var id=$(this).val();
$.ajax
({
type: "POST",
url: "propertyID.php",
data: {
'id' : id
},
cache: false,
success: function(html)
{
$(".dropProperties").html(html);
}
});
});
});
</script>
solution2
0 2014-05-08 18:53:31
your generated html is not valid. every class and name should be inside quotes.
Change your index.php
like this:
<html>
<?php
//create a drop down of available accounts
echo 'Available Accounts: ';
echo '<select name="dropAccounts" class="dropAccounts">';
//if there is at least one account available
if (count($accsAvailable) > 0) {
echo '<option value="0">---Select an account---</option>'; //default option
foreach ($accsAvailable as $account) {
//populate from API
echo '<option value="' . $account->getId() . '">' . $account->getName() . '</option>';
}
} else {
echo '<option value="0">---No accounts---</option>'; //else if no accounts exist
}
echo '</select>';
//for available webproperties
echo '<br> Available Webproperties: ';
echo '<select name="dropProperties" class="dropProperties">';
echo '<option selected=selected>---Select a webproperty---</option>';
echo '</select>';
?>
</html>
you should append in the ajax success callback:
$(".dropProperties").append(html);
solution3
-1 2014-05-08 18:56:31
There are a couple of issues here!
For the sake of legibility and syntax highlighting (not to mention that it will draw awareness to your mistakes) you should use direct html output instead of echoing it with php.
Instead of
echo '<select name=dropAccounts class=dropAccounts>';
try
//End php parsing with a closing php tag
?>
<select name=dropAccounts class=dropAccounts>
<?php
//Resume php parsing
This draws attention to the fact that you're not surrounding your attribute values with quotes
Instead of
<select name=dropAccounts class=dropAccounts>
It's important that you quote the attribute:
<select name="dropAccounts" class="dropAccounts">
The next thing is that you're trying to insert the server's output (a raw STRING) into a select element with this code:
success: function(html) {
$(".dropProperties").html(html);
}
I believe this is what you want instead:
success: function(html) {
var newOption = $('<option value="' + html + '">' + html + '</option>');
$(".dropProperties").append(newOption);
}
According to html specification, only option elements should be the children of select elements. In order to add a string into the select element, my code is creating a new option element, making its text the "html" string, and inserting that option element into the select element.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.