201611.27
Désactivé
0

JQuery and Ajax

This goes into the page :

<?php
/*
Template Name: Customers
*/


get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', 'page' ); ?>
					
					<?php 
					
					if (is_user_logged_in()):?>
					
						<form type="post" action="" id="newCustomerForm">
							
							<label for="name">Name:</label>
							<input name="name" type="text" />
							
							<label for="email">Email:</label>
							<input name="email" type="text" />
							
							<label for="phone">Phone:</label>
							<input name="phone" type="text" />
							
							<label for="address">Address:</label>
							<input name="address" type="text" />
							
							<input type="hidden" name="action" value="addCustomer"/>
							<input type="submit">
						</form>
						<br/><br/>
						<div id="feedback"></div>
						<br/><br/>
						
					
					<?php 
						global $wpdb;
						$customers = $wpdb->get_results("SELECT * FROM customers;");
											
						echo "<table>";
						foreach($customers as $customer){
							echo "<tr>";
							echo "<td>".$customer->name."</td>";
							echo "<td>".$customer->email."</td>";
							echo "<td>".$customer->phone."</td>";
							echo "<td>".$customer->address."</td>";
							echo "</tr>";
						}
						echo "</table>";
					else:
						echo "Sorry, only registered users can view this information";
					endif;						
					
					?>
					
					<script type="text/javascript">
						jQuery('#newCustomerForm').submit(ajaxSubmit); 
						
						function ajaxSubmit(){
							
							var newCustomerForm = jQuery(this).serialize();
							
							jQuery.ajax({
								type:"POST",
								url: "/wp-admin/admin-ajax.php",
								data: newCustomerForm,
								success:function(data){
					                jQuery("#feedback").html(data);
					   			},
					            error: function(errorThrown){
					                alert(errorThrown);
					            }	
							});
							
							return false;
						}
					</script>
					


				<?php endwhile; // end of the loop. ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

This goes into functions.php

wp_enqueue_script('jquery');

function addCustomer(){
	
	global $wpdb;
	
	$name = $_POST['name'];
	$phone = $_POST['phone'];
	$email = $_POST['email'];
	$address = $_POST['address'];
	
	if($wpdb->insert('customers',array(
		'name'=>$name,
		'email'=>$email,
		'address'=>$address,
		'phone'=>$phone
		))===FALSE){
	
		echo "Error";
		
	}
	else {
			echo "Customer '".$name. "' successfully added, row ID is ".$wpdb->insert_id;

		}
	die();	
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');

Source : http://www.makeuseof.com/tag/tutorial-ajax-wordpress/