Slider Using PHP, Ajax And Javascript
Posted on January 10, 2008
Filed Under ajax, how-to, php, tutorial
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 ;
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.
You can view the demo from here.
Click here to download the full source code
Popularity: 71% [?]
If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.
Related Posts
» This blog’s Code and content is stolen - Please help
» About Me
» Jquery : Benefits, Examples and Free Ebook
» How to return value from Ajax Function - Use synchronous request
Comments
12 Responses to “Slider Using PHP, Ajax And Javascript”
Leave a Reply
-
Rss and Readers
-
Affiliates
Subscribe in a reader-
Sponsors
cool, but I prefer the jQuery slider plugin…
have you seen the shopify.com ’s slider, two controls for MINIMUM and MAXIMUM values
[...] Fonte: http://roshanbh.com.np/2008/01/slider-using-php-ajax-and-javascript.html [...]
[...] Slider Using PHP, Ajax And Javascript (tags: javascript ajax php slider programming software webdev web development) [...]
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.
Hey!…Thanks for the nice read, keep up the interesting posts..
[...] Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy.rnrnYou can check the demo by clicking herernrn Read the rest of the story by clicking here [...]
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?
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.
[...] you guyz can help me about content stolen over ajaxprojects.com. First of look at my post about slider using ajax php and javascript.And, now look at this top to bottom stolen tutorial from ajaxprojects.com . And, now look at the [...]
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)
Ronald…….thanks for heads up….it was due to server change in last month and now i’ve fixed it..
[...] Slider Using PHP, Ajax And Javascript- A slider script implemened in Ajax with [...]