<!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=iso-8859-1" />
<script type="text/javascript" src="js/jqp.js"></script>
<script>
function do_delete(t, vid_id) {
$.post('ajax.php',
{
do: 'delete_video',
vid_id: vid_id
}
, function(data){
var d = data;
switch(d.error){
case '':
//success
$(t).parents('.vid').fadeOut();
break;
default:
alert('simple alert box! lol ^_^');
break;
}
}
, "json"
);
}
$(function() {
$('#search').click(
function (){
$.post('ajax.php',
{
do: 'search',
query: $('input#query').val(),
sort: $('input[name="sortby"]:checked').val(),
descending: $('input#descending').val()
}
);
});
$('#search_all').click(function(){
$('input#query')[0].value = '';
$('input[name="sortby"]').each(function(d){
this.checked = false
});
$('input[name="sortby"]')[0].checked = true;
$('input#descending')[0].checked = false;
$.post('ajax.php',
{
do: 'search',
query: $('input#query').val(),
sort: $('input[name="sortby"]:checked').val(),
descending: $('input#descending').val()
}
);
});
});
</script>
<style>
input#query{
width : 240px;
}
.container{
width : 600px;
margin: auto;
}
.t1, .t2{
padding : 14px;
height : 100px;
}
.t1{
text-align:center;
float : left;
}
.t2{
text-align:left;
}
.vid .v{
float : left;
margin: 4px;
}
.vidname{
width : 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="t1">
Video Name or User Name
<br />
<input type="text" name="name" id="query" />
<br />
<a href="#" id="search">Search</a> |
<a href="#" id="search_all">All</a>
</div>
<div class="t2">
Sort by
<br />
<label><input name="sortby" type="radio" value="video_date" checked /> Added Date</label>
<br />
<label><input name="sortby" type="radio" value="video_name" /> Video Name</label> <br />
<label><input name="sortby" type="radio" value="user_name" /> Username</label>
<br />
<label><input id="descending" name="desc" type="checkbox" value="desc" />Descending</label>
</div>
</div>
<div style="clear:both;"></div>
<div class="videos">
<div class="vid">
<div class="v">
User a
</div>
<div class="v vidname">
Video 1
</div>
<div class="v">
<a href="#">Edit</a>
</div>
<div class="v">
<a href="#" onclick="do_delete(this, 'vid_id!');">Delete</a>
</div>
<div class="v">
September 12, 1988
</div>
</div>
<div style="clear:both;"></div>
<div class="vid">
<div class="v">
User b
</div>
<div class="v vidname">
Video 2
</div>
<div class="v">
<a href="#">Edit</a>
</div>
<div class="v">
<a href="#" onclick="do_delete(this, 'vid_id!');">Delete</a>
</div>
<div class="v">
September 12, 1988
</div>
</div>
<div style="clear:both;"></div>
<div class="vid">
<div class="v">
User c
</div>
<div class="v vidname">
Video 3
</div>
<div class="v">
<a href="#">Edit</a>
</div>
<div class="v">
<a href="#" onclick="do_delete(this, 'vid_id!');">Delete</a>
</div>
<div class="v">
September 12, 1988
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>