Please help with jquery and ajax call
Need Help with code jquery newbie
[code]
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
});
</script>
<br/>
<b>Select Web Instance to Auto-Populate fields for addition</b><br/>
<select id="webselect">
<?php
$query=$wpdb->get_results("SELECT DISTINCT instance_name FROM ts_web_layer");
echo "<option value=none >Select</option>";
foreach($query as $row) {
echo '<option value='.$row->instance_name.'>'.$row->instance_name . '</option>';
}
?>
</select>
<? // new query added here ?>
<br/>
<b>Select Application</b><br/>
<select id="appselect">
<?php
$query=$wpdb->get_results("SELECT DISTINCT app_name FROM ts_applications ORDER BY app_name DESC");
echo "<option value=none >Select</option>";
foreach($query as $row) {
echo '<option value='.$row->app_name.'>'.$row->app_name . '</option>';
}
?>
</select>
<? // END of new query ?>
<script>
$(document).ready(function(){
$("#webselect").change(onSelectChangeWeb);
$("#appselect").change(onSelectChangeApp);
});
function onSelectChangeWeb(){
var selected = $("#webselect option:selected");
var web_instance = "";
if(selected.val() != 0){
web_instance = selected.text();
$('#ajaxResponse').text('');
$('#ajaxResponse').append("<img height='20' width='20' class='myLoader' src='/wp-content/themes/ts2/images/ajax-loader.gif'>");
$.ajax({
url: "/admin/application-manager/",
type: 'GET',
data: "web_instance=" + web_instance + "&webajax=true",
success: function(result) {
$('.myLoader').remove();
$('.myFormResponse').remove();
$('#ajaxResponse').append(result);
}
});
}
}
// New Function Here for App
function onSelectChangeApp(){
var selected = $("#appselect option:selected");
var app_instance = "";
if(selected.val() != 0){
app_instance = selected.text();
$('#ajaxResponse').text('');
$('#ajaxResponse').append("<img height='20' width='20' class='myLoader' src='/wp-content/themes/ts2/images/ajax-loader.gif'>");
$.ajax({
url: "/admin/application-manager/",
type: 'GET',
data: "app_instance=" + app_instance + "&webappajax=true",
success: function(result) {
$('.myLoader').remove();
$('.myFormResponse').remove();
$('#ajaxResponse').append(result);
}
});
}
}
// End Function
</script>
<div id="ajaxResponse"></div>
[/code]
My problem with this code is, I have a function created where the output gets focus for this code. When i select option from function onSelectChangeWeb, web_instance successfully set the web_instance variable, but when I select the option from onSelectChangeApp for the app_instance I lose the web_instance variable within the main function any ideas on how i can insure web_instance stays set after the first select?