Jquery UI Slider with ajax, php and maybe mysql -

i have slide this:

$(function () {      /*--------------------------------------------------     plugin: slider     --------------------------------------------------*/      /* increment slider */     $( "#incrementslider" ).slider({         range: "min",         value:1993,         min: 1914,         max: 2013,         step: 1,         slide: function( event, ui ) {             $( "#incrementamount" ).text ("birthday: " +  ui.value);          }     });      $( "#incrementamount" ).text ( "birthday: " + $( "#incrementslider" ).slider( "value" ));   }); 

if user select on slider birthday want show infos.

for example user takes 1980:

infotext 1 belong 1980, infotext 2 belong 1980, birthday   belong 1980, infotext 3 belong 1980, infotext 4 belong 1980 

i need so, can use free in text, of course must change automatically if user change birthday in slider.

it don't must , don't prefer solution mysql if there other way.

ok solutions without mysql; assuming

• we're talking limited set of values hot , cold (rather long paragraphs of text)
• the data static , never changes

including data when screen loads

you include data in javascript file eg create , link file called sliderdata.js. inside file create hash table of data (aka javascript associative array)

var dataforinfotext = {     "1980": "cold",     "1985": "hot",     "1990": "cold", }; 

then inside you're slide event handler add following js

infotext1.text(dataforinfotext[ui.value]); 

note: associative arrays allow access values in 2 ways either dataforinfotext.propertyname1 or dataforinfotext['propertyname1']

and heres fiddle show working http://jsfiddle.net/sdbty/ although in example i've included data directly in example (not separate file, do)...

variation - loading data year required

first need helper method allows dynamically load script files required:

function loadmodule(name, callback) {     $.ajax({type: "post"         , url: name         , datatype: "script"         , success: callback     });      } 

create script file each year contains info-text need. contents of 1980.js

var infotextdata = {     "text1" : "cold",     "text2" : "its 1980" }; 

and 1981.js

var infotextdata = {     "text1" : "hot",     "text2" : "this 1 born 1981" }; 

note: time i've included 2 properties per object text1 , text2, number depending on info-text need show

finally amend slide event handler this

// declare slidertimeout outside of handler cleartimeout(slidertimeout);  slidertimeout = settimeout(function () {     loadmodule(selectedvalue + ".js", function () {         infotext1.text(infotextdata.text1);         infotext2.text(infotextdata.text2);     }), 2000); 

where selectedvalue + ".js" result in url eg 1980.js; have .js each year , set info-text first loading js file year , setting text first 1 , 2 required.

the cleartimeout , settimeout, add delay data file loaded when user pauses on year 2 seconds, can change delay required, or remove completely...

personally think 2nd method closest you're going ajax without database (assuming data static). you're bypassing php, more efficient; directly asking web server data , gives flexibility of not getting data years unnecessarily...