Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

jQuery UI price slider

jQuery UI price slider

Published July 12, 2015 by , category jQuery UI

jQueryjQuery UIPrice Slider

Drag a handle to select a numeric value, a jQuery UI numeric value slider and database insertion

Introduction

You will find on internet a lot of jQuery based price slider or jQuery numeric value slider. That's why I have decided to use the the jQuery UI Slider plugin and give you an AJAX database value insertion example.

Here is how it works:

  1. Move the handle left or right to select a value (a price in my example)
  2. Click on the Submit button to register the new value in the MySQL database
  3. jQuery AJAX value insertion without page refreshment
  4. The new value is returned in the form field
  5. Success message displayed

In this example I consider we are on an article page from an e-commerce website (the article ID is 5). I use a price slider to select a price and a price field. You can select a value from 0$ to 1000$ (you can easily change values).

For your own needs you can add more fields in the form (article name, description etc.)

Live demo

Move the handle left or right to select a price, click on the "Submit" button to register.

$

Files architecture

index.php
db.class.php

ajax

tuto-price-slider.php

design

loader-small.gif

Database structure sample

I called the database table tc_tuto_price_slider. id is the "id" (database row number) of the article stored, an AUTO_INCREMENT field. article_id is the article ID (I chose 5 for my example), price is the field where I store the article price.

CREATE TABLE IF NOT EXISTS `tc_tuto_price_slider` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `article_id` int(11) NOT NULL,
  `price` int(11) NOT NULL,
  UNIQUE KEY `id_2` (`id`),
  KEY `id` (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 ;

Database connection

Page db.class.php. More information about the database connection I use here. But I guess you already have yours .

HTML & PHP code

This is the index.php page (article page with the ID 5). All lines are commented.

Notice 1: I put the JS part at the end of the code.

Notice 2: there is 3 external links

  1. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">, a jQuery UI theme (see more themes here),
  2. <script src="//code.jquery.com/jquery-1.10.2.js"></script>, jQuery JavaScript Library,
  3. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>, jQuery User Interface.
<?PHP
include('db.class.php');
$bdd = new db();
?>
<!DOCTYPE>
<html>
<head>
	<title>jQuery UI price slider</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<style>
		.inlineDiv { display: inline-block; }
	</style>
</head>

<body>

<?php
$articleId = 5; // In our example we consider we are in the page containing the article ID = 5. You may change the value.

$query = $bdd->getOne('SELECT * FROM tc_tuto_price_slider WHERE article_id='.$articleId.'');
?>
<div id="message"></div>
<form id="myForm" method="post" action="">
	<p>
		<input type="text" id="price" size="5" value="<?php echo $query['price']; ?>" readonly style="padding: 5px; color: #f6931f; font-weight: bold;"> $
	</p>
	 
	<p>
		<div id="min" class="inlineDiv"></div> <div id="price-slider" class="inlineDiv" style="width: 200px;"></div> <div id="max" class="inlineDiv"></div>
	</p>
	
	<p>
		<!-- Button the an id and a rel attribute. The rel attribute contain a JSON with the article ID -->
		<!-- We need to know which article must be updated in the database -->
		<button type="submit" id="submitForm" rel='{"articleId":<?php echo $articleId; ?>}' class="btn btn-primary">Submit</button>
	</p>
</form>


<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
	$("#price-slider").slider({ // Drag a handle to select a numeric value
		range: "min", // A min range goes from the slider min to one handle
		min: 0, // The minimum value of the slider
		max: 1000, // The maximum value of the slider
		slide: function( event, ui ) { // Triggered on every mouse move during slide
			$("#price").val(ui.value); // Update the new price in "price" input field
		}
	});
	$("#price-slider").slider("option", "value", $("#price").val()); // Init the price value of the #price-slider bar - put the slide bar cursor at the correct place
	$("#price").val($("#price-slider").slider("value")); // Init "price" input field
	$("#min").html("$" + $("#price-slider").slider("option", "min")); // Show min range before the slide bar
	$("#max").html("$" + $("#price-slider").slider("option", "max")); // Show max range after the slide bar
});

$('#submitForm').on('click', function(event) { // Click on Submit button
	var relData = $.parseJSON($(event.target).attr('rel')); // Get Json from rel attribute
	$('#message').html('<img src="design/loader-small.gif" alt="" />'); // Show the loading icon
	var data = {price: $("#price").val(), articleId: relData.articleId}; // Create JSON which will be sent via Ajax with the new price and the article ID
	$.ajax({
		type: 'POST',
		url: 'ajax/tuto-price-slider.php', // URL to the PHP file which will insert new value in the database
		data: data,
		dataType: 'json',
		timeout: 3000,
		success: function(data) {
			$('#price').val(data.price); // Update the "price" input field
			$('#message').html('<div class="alert alert-success" role="alert">New price updated!</div>'); // Display success message
		},
		error: function() {
			$('#message').html('<div class="alert alert-danger" role="alert">Error!</div>'); // Display error message
		}
	});
	return false;
});
</script>

</body>
</html>

PHP code

This is the ajax/tuto-price-slider.php file called by JS file Ajax function. All lines are commented.

<?php
include('../db.class.php');
$bdd = new db(); // database connection

if($_POST) {
	$price = $_POST['price']; // Get the price
	$articleId = $_POST['articleId']; // Get the article ID
	
	$query = $bdd->execute('UPDATE tc_tuto_price_slider SET price = '.$price.' WHERE article_id='.$articleId.''); // Update the database
	
	$dataBack = array('price' => $price); // send back a JSON with price value. You can send back as many things as you need.
	$dataBack = json_encode($dataBack);
	
	echo $dataBack;
}
?>

jQuery UI Slider Widget

More information about the jQuery UI Slider Widget functionalities (I also recommend you to check the official documentation):

Conclusion

I hope this script will help you in your coding.

As usually leave comment below if you need help or you want to share a snippet.

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

If you need help about this script, please leave a comment below. I reply as much as I can depending of my time, you may also get help from others.
I also offer a paid support, if you are in the need to adapt or create a script...

Leave a comment

Comments (0 comment)

No comments for the moment!