Jquery UI calender with event date display using ajax and css


<div id="datepicker"></div>
<div id="dialog" title="Event" style="display:none;"></div>
<style>
.events a {
background-color: #FF33CC !important;
}
</style>

<script>
var eventsDays = [ ‘2014-03-29′ ,’2014-03-30’ ];
$( “#datepicker” ).datepicker({
dateFormat: “yy-mm-dd”,
beforeShowDay: function(date) {
date = $.datepicker.formatDate(‘yy-mm-dd’, date);
if($.inArray( date, eventsDays )!==-1){
return [true, “events”, ”];
} else {
return [true, ”,”];
}
},
onSelect: function(a,b){
$.ajax({
type: “GET”,
url: “general_ajax.php”,
data: ‘option=ShowEvent&date=’+a,
success: function(data) {
if(data != 0){
$(‘#dialog’).html(data);
$(‘.dialog’).html(data);
$( “#dialog” ).dialog();
} else {
$( “#dialog” ).dialog( “destroy” );
}
}
});
}
});
</script>

 

File upload using jquery form

File can be uploaded using this script with the help of jquery from. Copy the full script and create a new page.

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code>&lt;input type="file" name="myfile"></code>
<form action="file_upload.php" id="upload" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">
</form>

<div>
<div></div >
<div>0%</div >
</div>

<div id="status"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#upload').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});

})();
</script>

Write your file upload codes in the file_upload.php

Order By Mysql

Reorder table using single query with php, jquery UI, MySql

Script

<script>

$(function() {

$( "#sortable" ).sortable({
update: function( event, ui ) {
var sortedIDs = $( "#sortable" ).sortable( "toArray" );

$.ajax({
type: "POST",
url: "general_ajax.php",
data: { mode: "SortMustKnows", sortedIDs: sortedIDs },
success : function(data){
alert( data );
}
});
}
});

$( "#sortable" ).disableSelection();
});

</script>

HTML

<ul id="sortable">

<li id="1"><span></span>Item 1</li>
<li id="2"><span></span>Item 2</li>
<li id="3"><span></span>Item 3</li>
<li id="4"><span></span>Item 4</li>
<li id="5"><span></span>Item 5</li>

</ul>

Mysql Query

$sortedIDs = '5,4,3,2,1';
@mysql_query("SELECT @i:=0;");
@mysql_query("UPDATE `table_name` SET  must_order = @i:=@i+1 where `primary_key` IN ($sortedIDs) ORDER BY FIELD(`primary_key`,$sortedIDs)");

Add extra file field


jQuery(document).ready(function(){
	jQuery('#add').click(function() {
		jQuery('
Doc Title :
').css({"background-color" : "#E0D7A7","padding" : "5px","width" : "500px"}).fadeIn('slow').appendTo('.inputs'); }); jQuery('#remove').click(function() { jQuery('.field:last').css({"background-color" : "#ff0000"}).fadeOut(300, function(){ jQuery(this).remove();}); }); }); Continue reading