Jquery | MinhD.net

With Jquery of course

Ok, we often have to do delete button and have to do something about if the users click the button, an the delete action should not taken right away… What if the user doesn’t want to click the button but click it anyway (they are users, their actions are illogical but we still have to meddle around the problem). Around the usability stuff, a confirmation dialog is the mostly used, and if you are scared of this concept, you shouldn’t, because it’s so widely used.

This method is unobtrusive, meaning that even without javascript enabled, the delete button will still works, but no confirmation dialog.

First, we will have a link that will link to our delete function, whatever that’ll be

1	<a href="/delete/this/thing" class="delete">Delete</a>

I give it a class so that all delete button with the same class can have the same functionality determined by my JavaScript or just basically the same styling.
And we can go with this:

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

Very simple. And it will work. Also, you can also try

1	return confirm(”Delete this item?”);

for an easier one-liner.

Better approach and looks nicer would include using a popup box, make use of tooltips, dialog boxes from Jquery UI… there’s an universe to discover

When you think of a pagination system, you would think about some messy PHP codes to generate each and every page. So subsequently, for an user who wants to browse through your pages, they will do a lot of calls to your PHP file and by that do a lot of calls to your database (a bad thing!). So, we want to load all the data from PHP/MySQL ONCE and have the pagination taken care of by Jquery.

Copy & Paste all of this code into a html file. Make sure you are online so that the browser can retrieve the jquery library off google

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Pagination Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2");google.setOnLoadCallback(function(){});</script>

<script type="text/javascript">
$(document).ready(function(){

var show_per_page = 7;
var number_of_items = $('#content').children().size();
var number_of_pages = Math.ceil(number_of_items/show_per_page);
var end = number_of_pages -1;

$('#current_page').val(0);
$('#show_per_page').val(show_per_page);

var navigation_html = '<a href="javascript:go_to_page(0);">Begin</a>';
navigation_html += '<a href="javascript:nav(-1);">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a href="javascript:nav(+1);">Next</a>';
navigation_html += '<a href="javascript:go_to_page(' + end +')"">End</a>';

$('#page_navigation').html(navigation_html);
$('#page_navigation .page_link:first').addClass('active_page');

$('#content').children().css('display', 'none');
$('#content').children().slice(0, show_per_page).css('display', 'block');

});

function nav(dir){
if(dir==+1){
new_page = parseInt($('#current_page').val()) + 1;
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}else if(dir==-1){
new_page = parseInt($('#current_page').val()) - 1;
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
}

function go_to_page(page_num){
var show_per_page = parseInt($('#show_per_page').val());
start_from = page_num * show_per_page;
end_on = start_from + show_per_page;
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
$('#current_page').val(page_num);
}

</script>

<style>
#page_navigation a{
padding:3px;
border:1px solid #dedede;
margin:3px;
color:black;
text-decoration:none;
}
#page_navigation a:hover{
background: #FFC;
}
.active_page{
background:#036;
color:white !important;
}
ul#content li{
padding: 5px;
}
</style>

</head>

<body>
<ul id='content'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</li>
<li>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</li>
<li>Pellentesque ac sem ac sem tincidunt euismod.</li>
<li>Duis hendrerit purus vitae nibh tincidunt bibendum.</li>
<li>Nullam in nisi sit amet velit placerat laoreet.</li>
<li>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</li>
<li>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</li>
<li>In non eros eu lacus vestibulum sodales.</li>
<li>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</li>
<li>Proin ullamcorper est vitae lorem mollis bibendum.</li>
<li>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</li>
<li>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</li>
<li>Maecenas lacinia lectus ac nulla commodo lacinia.</li>
<li>Maecenas quis massa nisl, sed aliquet tortor.</li>
<li>Quisque porttitor tellus ut ligula mattis luctus.</li>
<li>In at mi dolor, at consectetur risus.</li>
<li>Etiam id erat ut lorem fringilla dictum.</li>
<li>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</li>
<li>Pellentesque quis magna vitae quam malesuada aliquet.</li>
<li>Curabitur tempus tellus quis orci egestas condimentum.</li>
<li>Maecenas laoreet eros ac orci adipiscing pharetra.</li>
<li>Nunc non mauris eu nibh tincidunt iaculis.</li>
<li>Ut semper leo lacinia purus hendrerit facilisis.</li>
<li>Praesent et eros lacinia massa sollicitudin consequat.</li>
<li>Proin non mauris in sem iaculis iaculis vel sed diam.</li>
<li>Nunc quis quam pulvinar nibh volutpat aliquet eget in ante.</li>
<li>In ultricies dui id libero pretium ullamcorper.</li>
<li>Morbi laoreet metus vitae ipsum lobortis ultrices.</li>
<li>Donec venenatis egestas arcu, quis eleifend erat tempus ullamcorper.</li>
<li>Morbi nec leo non enim mollis adipiscing sed et dolor.</li>
<li>Cras non tellus enim, vel mollis diam.</li>
<li>Phasellus luctus quam id ligula commodo eu fringilla est cursus.</li>
<li>Ut luctus augue tortor, in volutpat enim.</li>
<li>Cras bibendum ante sed erat pharetra sodales.</li>
<li>Donec sollicitudin enim eu mi suscipit luctus posuere eros imperdiet.</li>
<li>Vestibulum mollis tortor quis ipsum suscipit in venenatis nulla fermentum.</li>
<li>Proin vehicula suscipit felis, vitae facilisis nulla bibendum ac.</li>
<li>Cras iaculis neque et orci suscipit id porta risus feugiat.</li>
<li>Suspendisse eget tellus purus, ac pulvinar enim.</li>
<li>Morbi hendrerit ultrices enim, ac rutrum felis commodo in.</li>
<li>Suspendisse sagittis mattis sem, sit amet faucibus nisl fermentum vitae.</li>
<li>Nulla sed purus et tellus convallis scelerisque.</li>
<li>Nam at justo ut ante consectetur faucibus.</li>
<li>Proin dapibus nisi a quam interdum lobortis.</li>
<li>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</li>
<li>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</li>

</ul>

<div id='page_navigation'></div>
<input type='hidden' id='current_page' /><input type='hidden' id='show_per_page' />
</body>
</html>

MinhD.net

A Very Simple Delete Confirmation dialog

Jquery Pagination System

Jquery Cheatsheets

Jquery 1.2 Cheatsheet

Jquery 1.3 Cheatsheets

Jquery Visual Map

My latest tweets