changing the value of a jquery ui slider
I'm calling a modal box with AJAX, and on that modal box I have a slider. I'm setting the slider on the main page, but need to specify the value of the slider within the modal box (its a value from the dbase). Make sense?
My problem is that I can't seem to set the value from the code within the modal box. This has stumped me for a few days. PLEASE HELP!!! My sanity depends on it! Thanks!
Main page:
===========
-
$(document).ready(function() {
$('#addItem, .editItem').click(function(e) {
e.preventDefault();
// load the contact form using ajax
$.get("modalForm.cfm", {'action' : $(this).attr("name")}, function(data){
// create a modal dialog with the data
var d = $("<div></div>").append(data);
$(d).modal({
overlay:80,
overlayCss: {backgroundColor:"#c0c0c0"},
escClose: true,
overlayClose: true,
onOpen: function(modal) {
modal.overlay.fadeIn(5, function() {
modal.data.hide();
modal.container.fadeIn(5, function() {
modal.data.slideDown('fast');
});
});
}
});
$("#slider").slider({
min: 20,
max: 100,
step: 20,
animate: true,
orientation: 'horizontal',
slide: function(event, ui) {
$("#slideramount").val(ui.value);
}
});
});
});
});
Modal Page (modalForm.cfm)
===================
-
$(function() {
$('#slider').slider('option', 'value', 40);
});
<div id="slider" style="width:150px;font-size: 9px;font-family: Arial;"></div>