I am new to ajax. I want to place a combobox on page. Combobox contain option by popularity, by price and by date.
I want to change the content of div with ajax without reloading the page.
e.g i am displaying a product of watches. when user change the value at combo box, the value/images displayed at page will be change as accordingly.
1) i want to know how to use ajax with word press. 2)code to achieve this.
I am using this code:
<div class="prodimg">
<ul class="rcollpro">
<?php
$ordr ='date';
$args = array( 'post_type' => 'product', 'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$ordr','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="rcollproli">
<a href="<?php the_permalink(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?></a>
<h3><?php the_title(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span><br />
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</li><!-- /span3 -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul><!-- /row-fluid -->
</div>
You dont actually need to implement Ajax, but you can do it with simple JS. I can share a simple code with you for your reference.
<script type="text/javascript">
function hourChange(selectObj) {
var selectIndex=selectObj.selectedIndex;
var selectValue=selectObj.options[selectIndex].text;
var output=document.getElementById("output");
//alert(output.innerText);
output.innerHTML=selectValue;
}
</script>
<select id="hour" onchange="hourChange(this);">
<option>1</option>
<option>2</option>
</select>
<p/>
you selected: <span id="output">1</span>
Try this in simple HTML file. And it's easy to implement it in WP too.
You can find the solution below for your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#selector").change(function() {
var selectedValue = $("#selector option:selected").val();
alert('Selected text ' + selectedValue);
});});
</script>
</head>
<body>
<select name="orderby" class="orderby" id="selector">
<option value="menu_order">Default sorting</option>
<option value="popularity">Sort by popularity</option>
<option value="date ">Sort by newness</option>
<option value="price">Sort by price: low to high</option>
<option value="price-desc">Sort by price: high to low</option>
</select>
</body>
</html>