Archive

Archive for the ‘JQuery’ Category

Fixed width buttons in JQuery buttonset()

November 3rd, 2010
1 comment

JQuery has a really nice feature to convert checkbox and radio button groups into good looking button sets. But when you have a set of buttons positioned vertically, they may look ugly because of their varying width values. To make them fixed size just add styling to the labels of checkboxes as seen below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <div class="input select" id="tutor_availability">
        <label for="availability">Available days:</label>
        <input type="checkbox" name="data[Ad][availability][]" value="1" id="AdAvailability1"/><label for="AdAvailability1" style="width:100px">Monday</label>
        <input type="checkbox" name="data[Ad][availability][]" value="2" id="AdAvailability2" /><label for="AdAvailability2" style="width:100px">Tuesday</label>
        <input type="checkbox" name="data[Ad][availability][]" value="4" id="AdAvailability4" /><label for="AdAvailability4" style="width:100px">Wednesday</label>
        <input type="checkbox" name="data[Ad][availability][]" value="8" id="AdAvailability8" /><label for="AdAvailability8" style="width:100px">Thursday</label>
        <input type="checkbox" name="data[Ad][availability][]" value="16" id="AdAvailability16" /><label for="AdAvailability16" style="width:100px">Friday</label>
        <input type="checkbox" name="data[Ad][availability][]" value="32" id="AdAvailability32" /><label for="AdAvailability32" style="width:100px">Saturday</label>
        <input type="checkbox" name="data[Ad][availability][]" value="64" id="AdAvailability64" /><label for="AdAvailability64" style="width:100px">Sunday</label>
    </div>
 
    <script type="text/javascript">
            $(function() {
                $("#tutor_availability").buttonset();
            });
    </script>

JQuery, Programming , , ,

Getting selected values of an checkbox array with JQuery

July 1st, 2009
4 comments

With JQuery it is extremely easy to collect the checked values of an checkbox array. You can use the code below to collect checked items of an array named “itemSelect[]” and give an alert if none of them are checked. This code submits the collected data via ajax to “/ajax_do_something.php” to process the data. If sucessfully processed it refreshes the page to display new data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var selectedItems = new Array();
$("input[@name='itemSelect[]']:checked").each(function() {selectedItems.push($(this).val());});
 
if (selectedItems .length == 0) 
    alert("Please select item(s) to delete.");
else
    $.ajax({
	type: "POST",
	url: "/ajax_do_something.php",
	data: "items=" + selectedItems.join('|'),
	dataType: "text",
	success: function (request) {
	    document.location.reload();
	  },
	error: function(request,error){
	    alert('Error deleting item(s), try again later.');
	  }
	}
    )

JQuery, Javascript, Programming