Slider Using PHP, Ajax And Javascript

Thursday, January 10, 2008, 19:01
ajax, how-to, php, tutorial
69 comments

Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy.Here is the post for you in which I’ve implemented javascript slider to work in Ajax using PHP. Ok let’s Begin it by creating the following tables in the database. Here is the mysql code to create the table named “tbl_slider” in database.

CREATE TABLE `tbl_slider` (
  `id` smallint(6) NOT NULL auto_increment,
  `slider_val` smallint(6) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

VIEW DEMO
DOWNLOAD SOURCE CODE

And now, there is a file slider.js which contains the code of javascript for the slider. I would like to say thanks to Tom Hermansson Snickars for the slider script. The main line you’ve notice in the slider.js is 164 where I’ve place the following code to call the Ajax function which is called when the slider is released after moving i.e on “onMouseUp” event.

setSliderVal(document.getElementById('slider1').style.left);

Slider1 is the if Division(div) which is available in the index.php file. The following code displays the slider in the index.php file.

<DIV class=carpe_slider_group>
 <DIV class=carpe_horizontal_slider_display_combo>
  <DIV class=carpe_slider_display_holder>
   <!-- Default value: 0 -->
   <input name="Input" class=carpe_slider_display id="display1" alue="<?=$row['slider_val']?>" />
  </DIV>
 <DIV class=carpe_horizontal_slider_track>
 <DIV class=carpe_slider_slit></DIV>
 <DIV class=carpe_slider id=slider1 display="display1" tyle="left:<?=$row['slider_val']?>px"></DIV>
</DIV>
</DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
</DIV>

As you can see above there is “<?=$row['slider_val']?>” which is value of the slider stored in the database, the code for retrieving value from database look like this you can find this code in the index.php file

$link = mysql_connect('localhost', 'root', ''); //change the configuration if required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if equired
$query="SELECT slider_val FROM  tbl_slider WHERE id='1'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);

And in the index.php there is Ajax function called “setSliderVal()” which is called from silder.js and use the ajax to call AJAX4Slider.php and retrive the current value of the slider from database.Here is the code of the AJAX4Slider.php

$sliderval=$_GET['sliderval']; //get the value from ajax function
$link = mysql_connect('localhost', 'root', ''); //change the onfiguration in required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if required
$query="UPDATE tbl_slider SET slider_val='$sliderval' WHERE id='1'";
$result=mysql_query($query);

The above code saves the value of the slider to the database.

VIEW DEMO
DOWNLOAD SOURCE CODE

Security Note : It is just a simple demo and If you want to use this code in your professional project then there is a security issue in the PHP code, please use $sliderval=intval($_GET['sliderval']); in the php code instead of $sliderval=$_GET['sliderval']; in the AJAX4Slider.php to prevent your site from sql injection attack.

Popularity: 18% [?]

Tags: ajax, javascript, php, Slider

» This blog’s Code and content is stolen – Please help
» jQuery is the most popular JavaScript and Ajax Framework
» Which is the best JavaScript and Ajax Framework ?
» About Me

69 Comments on “Slider Using PHP, Ajax And Javascript”

fedmich wrote on 14 January, 2008, 2:05
cool, but I prefer the jQuery slider plugin…
have you seen the shopify.com ‘s slider, two controls for MINIMUM and MAXIMUM values
Staxitix wrote on 16 January, 2008, 4:22
Hey, that’s a very cool little widget there. Of course, it needs some sort of design applied to it, but I can find lots of uses for it.
Kim Smith wrote on 19 January, 2008, 12:05
Hey!…Thanks for the nice read, keep up the interesting posts..
Alex93053 wrote on 21 February, 2008, 12:52
I keep on getting the “req is not defined” error:

req is not defined
onreadystatechange()ajaxslider (line 27)
(no name)(XMLHttpRequest, null)javascript: eval(… (line 1)
setSliderVal(“47px”)ajaxslider (line 37)
sliderMouseUp()slider.js (line 164)
[Break on this error] if (req.readyState

any idea where to define that?
Danthehat wrote on 22 February, 2008, 22:34
Although it is pretty cool to have a slider hooked right into the database like that… is it really necessary? I mean, if you need the value associated with something other than a slider… say a number of orders or something–well then you’d have redundant data in your database: one value in your slider table and one in your order table.

It makes much more sense to have those values stored at runtime.
ronald wrote on 7 April, 2008, 16:43
Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘roshan_usrtest’@'localhost’ (using password: YES)
Could not connect: Access denied for user ‘roshan_usrtest’@'localhost’ (using password: YES)
Roshan wrote on 8 April, 2008, 8:35
Ronald…….thanks for heads up….it was due to server change in last month and now i’ve fixed it..
Adam wrote on 17 October, 2008, 14:25
Nice injection attack there.

If you have this:

$query=”UPDATE tbl_slider SET slider_val=’$sliderval’ WHERE id=’1′”;

Then what if I pass the URL, manually:

?sliderval=A

The script will crash. What if I pass

?sliderval=1′; TRUNCATE tbl_slider; DROP tbl_slider;

On some databases, I’ve just nuked your database.

Try this on index.php:

$sliderval=(int) $_GET['sliderval']; //get the value from ajax function
Roshan wrote on 19 October, 2008, 10:45
@adam- you’re right and I was already aware of it and added a security note below but when magic quote is on sql injection attack is almost not possible…
M.Dubb wrote on 2 December, 2008, 16:07
I thought about it and can’t seem to come up with a valuable idea as to why I would need a slider. Why would anyone need a slider?

I see the code but don’t see the design and or idea.
What could a slider do for me?

Cheers
Kevin wrote on 3 December, 2008, 12:33
Your ajax request gives an error. If u use an other request the error won’t display. So u don’t get the annoying javascript error at the bottom..
thanks for the script though!
Cristian wrote on 20 February, 2009, 19:45
10+ Excellent Examples of Sliders in Ajax, Javascript and PHP
http://www.navioo.com/javascript/dhtml/GUI_Components_227.dhtml
Cheeray wrote on 23 February, 2009, 23:16
Thanks for the nice article, very useful, very neat, yet very plain to read for a non-english speaker like me.
daft01 wrote on 27 April, 2009, 12:06
you should really enhanced your code presentation dude.
andy Peacock wrote on 21 January, 2010, 20:43
Thanks for the tutorial. Is there any way to make the number update in real time on a remote instance when the database number changes?
?? ???????? wrote on 27 February, 2010, 20:52
I think it is nice tutorial
Raj wrote on 25 March, 2010, 13:07
Thanks for this beautiful script.
Really nice script
Saira wrote on 30 April, 2010, 6:28
Excellent Examples of Sliders in Ajax, Javascript and PHP

http://www.tutorials99.com

Hope it’s helpful!
Conixit wrote on 27 May, 2010, 22:44
This works really well. I intend to use it as a percent complete on a task list. However the increment of “1″ is too small. I would like to see increments of 10, ie 10% 20% 30% 40% etc ..Possible?
php techie wrote on 22 June, 2010, 8:51
This is a nice article. Its easy to understand and implemented to this. I like to your article.
Thanks:-)

Slider Using PHP, Ajax And Javascript

Related Posts

69 Comments on “Slider Using PHP, Ajax And Javascript”

Trackbacks

Write a Comment

Subscribe

Advertising

Archives

Categories

Blogroll & Misc.