Dropdown lists AJAX

  • jamiesw

    (@jamiesw)


    8 years, 5 months ago

    I am developing a custom plugin that has a dropdownlist that gets it value & text from the Database. I then have another dropdownlist that needs to be populated based on the previous dropdown selected value.

    Here is the code i have for the AJAX, but doesnt seem to be working. My jquery code is in a separate js file….
    /plugindir/customplugin/js/jsscript.js

    jQuery(document).ready(function() {
jQuery('#ddlSchool').change(function(){
var school=jQuery('#ddlSchool').val();
jQuery('#ddlResVisit').empty(); //remove all existing options
jQuery.ajax({
			type: 'POST',
       dataType: 'json',
            url: residential_visits.ajaxurl,
            data: {
        	'action' : 'residential_visits',
	        'school' : school
                },
	complete: function( response ) {
		console.log(response );
		alert(response.responseText);
         );
	}
      });
   });
});

    Custom Plugin File that has my php and html

    <?php
//Load CSS and Javascript Files
wp_register_style('my_styles', plugins_url('css/styles.css', __FILE__));
wp_enqueue_style('my_styles');
wp_enqueue_script( 'jquery' );
wp_register_script('ajax-script', plugins_url('js/jsscripts.js', __FILE__), array('jquery'),'1.1');
wp_enqueue_script('ajax-script');
wp_localize_script( 'ajax-script', 'residential_visits', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
 // THE AJAX ADD ACTIONS
add_action( 'wp_ajax_residential_visits', 'residential_visits');
add_action( 'wp_ajax_nopriv_residential_visits', 'residential_visits');

//Function to be called from AJAX SCRIPT
function residential_visits() {
ob_clean();
$school = $_POST['ddlSchool'];
global $wpdb;

$result = get_results("select id, group_name from wp_pods_residential_visits where school='$school'");
$main = array('data'=>$result);
echo json_encode($main);
    // Don't forget to stop execution afterward.
wp_die();
}

    And finally the code from my first dropdownlist

    <?php 
//get list of schools
global $wpdb;
$schools = $wpdb->get_results("Select abbr_code, school_name from wp_pods_schools order by school_name;");
?>
<label for"ddlSchools">School Attending:</label>
<select name="ddlSchool" id="ddlSchool">
<?php
foreach ($schools as $school){
?>
<option value="<?php echo $school->abbr_code ?>"><?php echo $school->school_name ?></option>
 <?php
}
  ?>
</select>

    Any help would be greatly appreciated as i cannot see why it isnt working.

    thanks
    Jamie

    • This topic was modified 8 years, 5 months ago by bcworkz. Reason: Code fixed - bbcode doesn't work
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    8 years, 5 months ago

    In function residential_visits(), is get_results() declared anywhere in your code? It’s not a standard WP or PHP function. Maybe you meant it to be like this: $result = $wpdb->get_results('your SQL here');?

    FYI, bbcode like [code] doesn't work here. Either use backticks or the code button. The attempt at good formatting is appreciated though 🙂

    Thread Starter jamiesw

    (@jamiesw)

    8 years, 5 months ago

    sorry yes it is meant to be $result = $wpdb->get_results('your SQL here'); but even updating that hasn’t made a difference, any where else i have missed a bit out or misspelled something?
    many thanks
    Jamie

    Thread Starter jamiesw

    (@jamiesw)

    8 years, 5 months ago

    In my console output i am now getting a 400 Bad Request (VM2647:1 POST http://my.desktopserver.dev/wp-admin/admin-ajax.php 400 (Bad Request))

    Calling my php function directly on the page works and echo’s out the correct info on the page, so i know the function works.
    also in my jsscript.js i did an alert(residential_visits.ajaxurl); and it shows the admin-ajax.php url as it is meant to.

    JSSCRIPTS FILE:

    jQuery(document).ready(function() {
jQuery('#ddlSchool').change(function(){
//var st=$('#category option:selected').text();
var school=jQuery('#ddlSchool').val();
jQuery('#ddlResVisit').empty(); //remove all existing options
jQuery.ajax({
			type: 'POST',
			dataType: 'json',
			contentType: "application/json",
			url: residential_visits.ajaxurl,
			data: {
				'action' : 'residential_visits',
				'school' : school
			},
			complete: function( response ) {
				console.log(response);
				//alert(response.responseJSON.body);				
			}
		});
	});
});

    PHP file in my custom plugin folder (this php file also creates the content used on the page as a shortcode, I dont know if this make a difference? Does my PHP function need to be elsewhere for it to be seen by the ajax handler?

    
<?php
// Registration form
//Load CSS and Javascript Files
wp_register_style('reg_styles', plugins_url('css/styles.css', __FILE__));
wp_enqueue_style('reg_styles');

wp_register_script('ajax-script', plugins_url('js/jsscripts.js', __FILE__), array('jquery'),'1.1');
wp_enqueue_script('ajax-script');
wp_localize_script( 'ajax-script', 'residential_visits', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
 // THE AJAX ADD ACTIONS
add_action( 'wp_ajax_residential_visits', 'residential_visits');
add_action( 'wp_ajax_nopriv_residential_visits', 'residential_visits');
//residential_visits(); -WHEN ENABLED IT SHOWS THE DATA SO IT WORKS

function residential_visits() {
ob_clean();
// Handle request then generate response using WP_Ajax_Response
global $wpdb;
$result = $wpdb->get_results("select id, group_name from wp_pods_residential_visits ");
//$main = array('data'=>$result);
echo json_encode($result);
// Don't forget to stop execution afterward.
wp_die();
}
}
if (!empty($_POST)){
//Pass Form Data to Save Function
saveRegData($_POST);
echo "<h2>Thank you for submitting the registration information.</h2>";
}
else{
//Display Registration Form
?>
<form method="post" name="frmVisit" id="frmVisit">
<table id="tblRegistration" name="tblRegistration" class="tblRegForm">
<!-- Other form Fields -->
<tr>
<td colspan="2"><h3>School Details</h3></td>
</tr>
<tr>
<td colspan="2">
<?php 
// Get list of schools
global $wpdb;
$schools = $wpdb->get_results("Select abbr_code, school_name from wp_pods_schools order by school_name;");
?>
<label for"ddlSchools">School Attending:</label>
<select name="ddlSchool" id="ddlSchool">
<?php
foreach ($schools as $school){
?>
<option value="<?php echo $school->abbr_code ?>"><?php echo $school->school_name ?></option>
<?php } ?>
</select>

<select id="ddlResVisit" name="ddlResVisit">
</select>
   <!-- Rest of HTML, PHP to save data etc -->

    Any clues?

    Jamie

    Moderator bcworkz

    (@bcworkz)

    8 years, 5 months ago

    If your function is available in normal WP code, such as on a template, it will be available to Ajax handlers, assuming the Ajax request is sent through admin-ajax.php.

    I think the problem is your contentType header. The data sent is not JSON, it’s plain text. Er, well, kind of. You pass a plain object as data: and jQuery automatically converts it to a plain data string. Thus when the server gets the data it’s plain text. Try passing text/plain or the default application/x-www-form-urlencoded instead. Note that dataType json is fine, that’s what you want back.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Dropdown lists AJAX’ is closed to new replies.