This article was originally written in 2011 in response to queries about a plugin hosted on the jQuery site, originally written by Raymond Julin. The plugin has subsequently been removed from jQuery and the source code has not been updated since 2010. This article provides an explanation on its usage, and has applied a number of fixes to the original code.
Let’s start with the form – I’m using php to retrieve data from a database and display it in a form for editing. To make the demo worthwhile I’ve added various input elements:
<form action="autosave7.php" method="post"> <fieldset> <label for="name">Name:<input type="text" name="name" id="name" value="<?php echo $row['name'] ?>"/></label> <label for="email">Email:<input type="text" name="email" id="email" value="<?php echo $row['email'] ?>" /></label> <label for="textboxarea">Text:<textarea id="textboxarea" name="textboxarea" rows="2" cols="20"><?php echo $row['textarea'] ?></textarea></label> <label for="selectfield">Select:<select id="selectfield" name="selectfield"> <option>Option 1</option> <option>Option 2</option> </select></label> <label for="radio1">Radio 1:<input type="radio" name="radios" id="radio1" value="radio1" <?php if ($row['radio']=="radio1") echo "checked='checked'"; ?> /></label> <label for="radio2">Radio 2:<input type="radio" name="radios" id="radio2" value="radio2" <?php if ($row['radio']=="radio2") echo "checked='checked'"; ?> /></label> <label for="checkvalue">Check with value attribute:<input type="checkbox" name="checkvalue" id="checkvalue" value="sbtest" <?php if ($row['checkboxvalue'] ) echo "checked='checked'"; ?>/></label> <label for="check">Check with no value attribute:<input type="checkbox" name="check" id="check" <?php if ($row['checkbox']==1 || $row['checkbox']=='on') echo "checked='checked'"; ?>/></label> <input type="hidden" name="id" value="<?php echo $row['id'] ?>" /> <input type="submit" value="Save changes" /> </fieldset> </form> <p id="message"></p>
I’m including an empty element for the message, just to keep the javascript simple – a more sophisticated solution would append this when required. Now, to add the autosave functionality I need to include this javascript:
$("input,select,textarea").autosave({
url: "autosave7.php",//set the php file that updates the database
method: "post",
grouped: true,//send data for all fields with the autosave
success: function(data) {//on a successful update...
$("#message").html("Data updated successfully").show();//...show a message...
setTimeout('fadeMessage()',1500);//...and then fade it out after an interval
},
send: function(){//on a save...
$("#message").html("Sending data....");//..show a message
},
dataType: "html"
});
function fadeMessage(){
$('#message').fadeOut('slow');//just a function to fade out the message
}
All this just leaves the php to update the database, which is:
if ($_POST['checkvalue']!='false') $checkvalue = $_POST['checkvalue']; else $checkvalue = 0;//checkbox with a value attribute if ($_POST['check']=="true" || $_POST['check']=="on" || $_POST['check']=="checked" ) $check = 1; else $check = 0;//and one without $qstring="UPDATE test_autosave SET name = '".$_POST["name"]."' ,"; $qstring .= " email = '".$_POST["email"]."',"; $qstring .= " textarea = '".$_POST["textboxarea"]."',"; $qstring .= " selectfield = '".$_POST["selectfield"]."',"; $qstring .= " checkbox = ".$check.","; $qstring .= " radio = '".$_POST["radios"]."',"; $qstring .= " checkbox = '".$check."',"; $qstring .= " checkboxvalue = '".$checkvalue."'"; $qstring .= " WHERE id =".$_POST['id'].""; mysql_query($qstring);
Because jQuery 1.6 changed the way form elements are posted by the autosave plugins, the autosave plugin itself will not work correctly with this and later versions of jQuery where radio buttons are used. A small change is needed to the plugin to cope with this – you can download the amended version here: jQuery autosave plugin
Inevitably, there’s a working demo here – just to make it more obvious the demo includes a snapshot of the database itself to show the updates.
A few people have asked for copies of the php files used in the demo – so here they are as text files:
- Demo page code: autosave_demo5.php
- Database update code: autosave7.php
- Code that updates the page via ajax: autosave6.php
Updated 07/05/2014 to cope with value attributes on checkbox fields
');
$(".ui-slider-handle").append('
');
$(".ui-slider-handle").append('
');
}
}//end if
//code for clicks on the scrollbar outside the slider
$(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
event.stopPropagation();
});
$(".slider-wrap").click(function(event){//clicks on the wrap outside the slider range
var offsetTop = $(this).offset().top;//read the offset of the scroll pane
var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked
$(this).find(".slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
});
//additional code for mousewheel
if($.fn.mousewheel){
$scrollpane.parent().unmousewheel();//remove any previously attached mousewheel events
$scrollpane.parent().mousewheel(function(event, delta){
var speed = Math.round(5000/$scrollpane.data('difference'));
if (speed <1) speed = 1;
if (speed >100) speed = 100;
var sliderVal = $(this).find(".slider-vertical").slider("value");//read current value of the slider
sliderVal += (delta*speed);//increment the current value
$(this).find(".slider-vertical").slider("value", sliderVal);//and set the new value of the slider
event.preventDefault();//stop any default behaviour
});
}
}
');
$(".ui-slider-handle").append('
');
$(".ui-slider-handle").append('
');
}
...
