I have created a calendar that saves to MySQL.
I have the allDay value set as false for time frame events but the calendar displays it as all day.
This gets the events..
$sql = mysql_query('SELECT * FROM `companies`.`calendar`');
${'Events'} = array();
while(${'Event'} = mysql_fetch_assoc($sql)){
${'Events'}[] = ${'Event'};
}
Snapshot of my table:
Here is my jQuery
$(document).ready(function() {
$('#eventToAdd').dialog({
autoOpen: false,
height: '300',
width: '550',
modal: true,
resizable: false,
position: 'center',
});
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventClick: function(calEvent, jsEvent, view) {
$('#eventTitle').val(calEvent.title);
$('#textColor').val(calEvent.textColor);
$('#backgroundColor').val(calEvent.color);
$("#eventToAdd").dialog({
autoOpen: true,
title: "Update Event",
modal: true,
buttons: [
{
text:"Update Event",
click: function () {
if($('#eventTitle').val()){
calEvent.title = $('#eventTitle').val();
calEvent.color = $('#backgroundColor').val();
calEvent.textColor = $('#textColor').val();
calendar.fullCalendar('updateEvent',calEvent);
$.post('post.api.php', { 'api': 'updateEvent', 'id': calEvent.id, 'title': calEvent.title, 'start': $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd h:mm:ss tt'), 'end': $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd h:mm:ss tt'), 'allDay': calEvent.allDay, 'bgColor': calEvent.color, 'textColor': calEvent.textColor }, function(resp) {
if(resp == 'SUCCESS') {
jAlert('The event has been updated','Updated');
} else {
jAlert('There was an error updating the event<br />Please try again later.<br />ERROR CODE: 728375', 'Process Error');
}
$('#eventToAdd').dialog('close');
});
}
}
},
{
text: "Cancel",
click: function() { $(this).dialog('close'); }
}]
});
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay, jsEvent, view) {
$("#eventToAdd").dialog(
{
autoOpen: true,
title: "Create Event",
modal: true,
buttons: [
{
text:"Create Event",
click: function () {
if($('#eventTitle').val()){
calendar.fullCalendar('renderEvent',
{
title: $('#eventTitle').val(),
start: $.fullCalendar.formatDate(start, 'yyyy-MM-dd h:mm:ss tt'),
end: $.fullCalendar.formatDate(end, 'yyyy-MM-dd h:mm:ss tt'),
allDay: allDay,
textColor: $('#textColor').val(),
color: $('#backgroundColor').val()
},
true
);
var startDate = $.fullCalendar.formatDate(start, 'yyyy-MM-dd h:mm:ss tt');
var endDate = $.fullCalendar.formatDate(end, 'yyyy-MM-dd h:mm:ss tt');
$.post('post.api.php', { 'api': 'createEvent', 'title': $('#eventTitle').val(), 'start': startDate, 'end': endDate, 'allDay': allDay, 'textColor': $('#textColor').val(), 'bgColor': $('#backgroundColor').val() }, function(response) {
if(response == 'SUCCESS'){
jAlert('The event has been saved!','Event Created');
} else {
jAlert('There was an error saving your event<br />Please try again later or let JD know<br />ERROR CODE: 882293','Process Error');
}
});
}
$(this).dialog('close');
}
},
{
text: "Cancel",
click: function() { $(this).dialog('close'); }
}
],
close: function(){
$('#eventTitle').val('');
$('#textColor').val('');
$('#backgroundColor').val('');
}
});
},
editable: true,
events: <?= ${'Events'}; ?>
});
});
The record value should be returned as false (without quotes); not "false". I had the same problem and applied this simple solution:
// -----------------------
while ($row = mysql_fetch_assoc($sql)) {
// -----------------------
if ($row['event_allday'] = 'false') {
$allDayStatus = false;
}
// -----------------------
$eventsArray['id'] = $row['event_id'];
$eventsArray['title'] = $row['event_title'];
$eventsArray['start'] = $row['event_start'];
$eventsArray['end'] = $row['event_end'];
$eventsArray['url'] = $row['event_url'];
$eventsArray['allDay'] = $allDayStatus;
$eventsArray['className'] = $row['event_class'];
$eventsArray['admNotes'] = $row['event_adm_notes'];
// -----------------------
Related
When I start to dragging an event, always scrolls to top of the day (timeGridDay). If I drag and drop when I see, p.e. from 00:00 to 08:00 is ok, but I if I try to drag an event that's at 17:00 then automitically moves to 00:00 -- 08:00 area on the top..
I have another calendar that's working fine... I've compared and it's all the same I think..
Thanks for your help.
var doubleClick = false;
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
height: '700',
plugins: [ 'timeGrid','dayGrid' ,'resourceTimeGrid','interaction'],
titleFormat: {
year: 'numeric',
month: 'numeric',
day: 'numeric'
},
defaultView: 'timeGridDay',
locale: lan,
minTime: '00:00:00',
maxTime: '23:59:00',
allDaySlot: false,
editable: true,
selectable: true,
select: function(info)
{
$('#newEventForm').trigger('reset');
cadenaStr = info.startStr;
cadenaEnd = info.endStr;
datavisita = cadenaStr.substr(0,10);
horainici = cadenaStr.substr(11,8);
horafi = cadenaEnd.substr(11,8);
$('#horastart').val(horainici);
$('#horaend').val(horafi);
$('#data').val(datavisita);
$('#newEventModal').modal('show');
},
droppable: true,
dragScroll: true,
eventResourceEditable: true,
header: {
left: 'prev,next, addEventButton, addReserveButton',
center: 'title',
// right: 'resourceTimeGrid,dayGridMonth,timeGridWeek,timeGridDay'
right: ''
},
views: {
resourceTimeGrid: { buttonText: resbtnname },
//dayGridMonth: { buttonText: 'month' },
//dayGridWeek: { buttonText: 'week' },
//dayGridDay: { buttonText: 'day' }
},
timeZone: 'local',
customButtons: {
addEventButton: {
text: '+',
click: function() {
$('#newEventForm').trigger("reset");
//alert ("passo abans client");
//$('#client').val('').trigger('change');
//$('#pacient').val("");
$('#newEventModal').modal('show');
}
},
addReserveButton: {
text: '||',
click: function() {
$('#newReserveModal').modal('show');
$('#newReserveForm').trigger('reset');
}
}
},
// title: info.event.extendedProps.pacientnom+': '+info.event.extendedProps.description,
// tootlip show up on event mouse hover
dayClick: function(date, jsEvent, view) {
if(!doubleClick) {
doubleClick = true;
setTimeout(function() { doubleClick = false; }, 500); //this waits for a second click for the next 500ms
}
else {
alert ("doble cliiiiikkkk");
//do your double click action here (date and time available in date variable)
}
},
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
$(info.el).on("mousedown", function(){
tooltip.hide();
});
$(info.el).on("mouseup", function(){
tooltip.hide();
});
$(info.el).on("click", function(){
tooltip.hide();
});
},
// edit form modal show up on event click
eventClick: function(info) {
$('#editsala').empty();
$('#editpacient').empty();
var idvisita = info.event.id;
$('#idvisitaorg').val(idvisita);
$('#visitaForm').submit();
},
// drag and drop event with database records change
eventDrop: function( info ) {
$('.tooltip').hide();
//if (!confirm("Are you sure about this change?")) {
//
// info.revert();
//} else {
var id = info.event.id;
var title = info.event.title;
var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };
var starttime = calendar.formatDate(info.event.start, timeSettings);
var endtime = calendar.formatDate(info.event.end, timeSettings);
var startdate =moment(info.event.start).format('YYYY-MM-DD');
if(info.newResource) {
var resourceId = info.newResource.id;
} else {
if(info.oldEvent.extendedProps.Resource_Id){
var resourceId = info.oldEvent.extendedProps.Resource_Id;
} else {
var resourceId =0;
}
}
$.ajax({
url: "calvis_event_dropped_update.php",
type: "POST",
data: ({
id: id,
title: title,
starttime: starttime,
endtime: endtime,
startdate: startdate,
resourceId: resourceId
}),
success: function(data){
calendar.refetchEvents()
},
error: function() {
info.revert();
}
});
//}
},
// resize event with database records change
eventResize: function( info ) {
$('.tooltip').hide();
//if (!confirm("Are you sure about this change?")) {
// info.revert();
//} else {
var id = info.event.id;
var title = info.event.title;
var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };
var starttime = calendar.formatDate(info.event.start, timeSettings);
var startdate = moment(info.event.start).format('YYYY-MM-DD');
var endtime = calendar.formatDate(info.event.end, timeSettings);
var resourceId=info.event.extendedProps.Resource_Id;
//console.log(starttime);
//console.log(endtime);
// console.log(info.event.extendedProps.Resource_Id);
$.ajax({
url: "calvis_event_dropped_update.php",
type: "POST",
data: ({
id: id,
title: title,
starttime: starttime,
endtime: endtime,
startdate: startdate,
resourceId: resourceId
}),
success: function(data){
calendar.refetchEvents()
},
error: function() {
info.revert();
}
});
//}
},
//hide select resource for other views
viewSkeletonRender: function(info){
if(info.view.type=="resourceTimeGrid"){
$("#resource_select_div").show();
$("#filter_events_div").hide();
$('#usuario_filter').val('none');
calendar.refetchEvents();
} else{
$("#resource_select_div").hide();
$("#filter_events_div").show();
}
},
// generate events
eventSources: [
{
url: 'calvis_get_events_caltask.php',
method: 'POST',
extraParams: function() {
return {
idusuario: $('#usuario_filter').val()
};
},
failure: function() {
alert('there was an error while fetching events!');
}
}
// any other sources...
],
// generate resources
resources: 'calvis_get_resources.php',
});
//render calendar
calendar.render();
I'm developing an Event Calendar in PHP, saving the data in MS-SQL.
I was successful in sending the data to the database, however, I'm not able to fetch the data from it.
Here's what I've done so far:
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true,
events: "all_events.php",
displayEventTime: false,
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Detail:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'add_event.php',
data: 'title=' + title + '&start=' + start + '&end=' + end,
type: "POST",
success: function(data) {
displayMessage("Added Successfully");
}
});
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
}, true);
}
calendar.fullCalendar('unselect');
}
});
});
all_events.php
<?php
require_once("connection.php");
$conn = DB::databaseConnection();
$json = array();
$sql = "SELECT * FROM Events ORDER BY id";
$result = $conn->prepare($sql);
$result->bindParam(':id', $id);
$alldata = array();
while($row = $result->fetch(PDO::FETCH_ASSOC))
{
array_push($alldata, $row);
}
echo json_encode($alldata);
?>
I'm just getting a '[]' in the console. No other error and the calendar is blank, it is not displaying any data from the database.
I am trying to debug a problem I have with submitHandler: function. What is happening, in firebug it is displaying the correct error message based on the true handle in the submitHandler. But, it is firing the success dialog and not the error dialog. I am fairly new to jquery and ajax so I have proably got some brackets or commas in the wrong place.
I would be grateful if someone could point out my error. Thanks
submitHandler: function() {
if ($("#USRboxint").valid() === true) {
var data = $("#USRboxint").serialize() + '&submit=true';
$.post('/domain/users/box.php', data, function(msgs) {
if (msgs.boxerror === true) {
var $dialog = $('<div id="dialog"></div>').html('<br /><b>Your New entry was NOT SUBMITTED.<br /><br />Thank you.</b>');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'New entry Unsuccessfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
}
else
var messageOutputs = '';
for (var i = 0; i<msgs.length; i++){
messageOutputs += msgs[i].box+' ';
}
$("#USRboxint").get(0).reset();
var $dialog = $('<div id="dialog"></div>').html('<br /><b>Your New entry was successfully submitted.<br /><br />Thank you.</b>');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'New entry successfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
//$("#frmreport").get(0).reset();
}, 'json');
}
},
success: function(msgs) {
}
PHP Code
<?php
$boxerrortext = 'No duplicates';
$array = split('[,]', $_POST['box_add']);
if (isset($_POST['submit'])) {
if ($box == 'DEMO111')
{
$error = array('boxerror'=>$boxerrortext);
$output = json_encode($error);
echo $output;
return;
}
else
$form = array();
foreach ($array as $box) {
// if (empty($box)) {
// $error = array('boxerrortext'=>$boxerrortext);
// $output = json_encode($error);
// echo $output;
// }
// else
// {
$form[] = array('dept'=>$dept,
'company'=>$company,
'address'=>$address,
'service'=>$service,
'box'=>$box,
'destroydate'=>$destroydate,
'authorised'=>$authorised,
'submit'=>$submit);
}
}
$result=json_encode($form);
echo $result;
?>
Creating dialogs each time is not efficient, better to initialize the dialogs on document ready:
$(function(){
$('<div id="dialog_error"></div>').html('<br /><b>Your New entry was NOT SUBMITTED.<br /><br />Thank you.</b>').dialog({
autoOpen: false,
modal: true,
title: 'New entry Unsuccessfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('<div id="dialog_success"></div>').html('<br /><b>Your New entry was successfully submitted.<br /><br />Thank you.</b>').dialog({
autoOpen: false,
modal: true,
title: 'New entry successfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
});
Then open them when you need them:
submitHandler: function () {
if ($("#USRboxint").valid() === true) {
var data = $("#USRboxint").serialize() + '&submit=true';
$.post('/domain/users/box.php', data, function (msgs) {
if (msgs.boxerror === true) {
$("#dialog_error").dialog("open");//Open error dialog
} else var messageOutputs = '';
for (var i = 0; i < msgs.length; i++) {
messageOutputs += msgs[i].box + ' ';
}
$("#USRboxint").get(0).reset();
$("#dialog_success").dialog("open");//Open success dialog
//$("#frmreport").get(0).reset();
}, 'json');
}
}
You should add braces around the code for the else-statement, or else only the first line is is part of the else block, and all the lines after it are executed no matter what.
Change this:
else
var messageOutputs = '';
To this:
else {
var messageOutputs = '';
// Other lines that belong in the else block.
}
I disagree with Wilmer, but you should properly clean up the dialog when it is closed. Since you create the div just to display the dialog once, you should remove it when the dialog is closed. You can do this by adding the following dialog option:
close: function() { $(this).dialog('destroy').remove(); },
I have a problem when I pass parameters with json_encode because I need to pass two arrays from php to javascript. My code run ok if i don't put the arrays
This is my javascript charts code:
function ChangeChartType(chart, series, newType) {
newType = newType.toLowerCase();
for (var i = 0; i < series.length; i++) {
var srs = series[0];
try {
srs.chart.addSeries({
type: newType,
stack: srs.stack,
yaxis: srs.yaxis,
name: srs.name,
color: srs.color,
data: srs.options.data
},
false);
series[0].remove();
} catch (e) {
}
}
}
// Two charts definition
var chart1, chart2;
// Una vez que el DOM (documento) ha acabado de cargar
$(document).ready(function() {
// First chart initialization
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: "<?php echo $titulo; ?>"
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Meses'
}
},
},function(chart){
//var i = 0;
for(i=0; i<3; i++) {
chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
}
});
// Second chart initialization (pie chart)
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'chart_2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: "<?php echo $titulo; ?>"
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y + ' totales';
} else {
s = ''+
this.x +': '+ this.y + ' totales';
}
return s;
}
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Resultado',
data: [<?php echo $resultado ?>]
}]
});
// Switchers (of the Chart1 type) - onclick handler
$('.switcher').click(function () {
var newType = $(this).attr('name');
ChangeChartType(chart1, chart1.series, newType);
});
});
I open both charts with a dialog window
$(function() {
$( "#dialog1" ).dialog({
autoOpen: false,
width: 950,
height: 460,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#dialog2" ).dialog({
autoOpen: false,
width: 650,
height: 760,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#opener1" ).click(function() {
$( "#dialog1" ).dialog( "open" );
});
$( "#opener2" ).click(function() {
$( "#dialog2" ).dialog( "open" );
});
});
The problem is when i try add this arrays to add months and names instead of ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript'] and default names
// Two charts definition
var chart1, chart2;
// Una vez que el DOM (documento) ha acabado de cargar
$(document).ready(function() {
var nombres = <?php echo json_encode($names); ?>; //I CAN'T SEE MY FIRST PIE CHART
var meses = <?php echo json_encode($valorX); ?>; //WHEN I INSERT BOTH VARIABLES
// First chart initialization
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
My portion of php
$valorX = array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
$names = array('Ana', 'Elena', 'Juan');
So, I don't know what i did wrong. With only these arrays declared, my second chart (Pie chart) doesn't appear. My code is under construction. Sorry my bad english, coding and Thanks you very much!!!!!!
Im having problems getting my datatable to refresh. I have a button which calls an update script and a confirmation message before it does anything. This all works fine but, I would like the table to refresh to get the new results. Here is what I have so far.
function unapprove_link(data)
{
var str = $(this).attr('title');
var answer = confirm("Are you sure you want to UNAPPROVE this lead?");
if (!answer) return false;
$.post("actions/unapprove-lead.php",
{'lead_id': data},
function()
{
oTable.fnClearTable(0);
oTable.fnDraw();
}
);
}
Here is my full code:
$(document).ready(function()
{
/* // Unapprove Lead Alert
$('.unapprove').live('click', function() {
var str = $(this).attr('title');
var answer = confirm("Are you sure you want to UNAPPROVE this lead?");
oTable.fnDraw();
if (!answer) return false;
});
// Delete Lead Alert
$('.delete').live('click', function() {
var str = $(this).attr('title');
var answer = confirm("Are you sure you want to DELETE this lead?");
oTable.fnDraw();
if (!answer) return false;
});
*/
var anOpen = [];
var oTable = $('#example').dataTable
({
'bProcessing': true,
'aaSorting': [[1,'asc']], // sorts date by default.
'iDisplayLength': 10,
'bJQueryUI': true,
'bStateSave': true,
'bServerSide': true,
'sAjaxSource': 'ajax/pc-ajax-table.php',
'fnServerData': function(sSource, aoData, fnCallback)
{
aoData.push( { "name": "from_date", "value": $( "#from" ).val() },
{ "name": "to_date", "value": $( "#to" ).val() } );
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
'aoColumns':[
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"fnRender": format_ddmmyyyy}, // renders the date as dd/mm/yyyy
null, // name
null, // lead location
null, // course type
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
null,
null,
{"sClass": "control", "bSortable": false, "bSearchable": false},
{"bSortable": false, "bSearchable": false},
{"bSortable": false, "bSearchable": false}]
});
// for adding a details box
$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
$('img', this).attr( 'src', "../images/details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', "../images/details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} );
function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
'<div class="innerDetails">'+
'<div style="padding:6px; background-color:#FFF;">Enquiry: <span style="color:#2663A4;">'+oData[8]+'</span></div>'+
'<div style="padding:6px; background-color:#FFF;">Email: <span style="color:#2663A4;">'+oData[5]+'</span></div>'+
'<div style="padding:6px; background-color:#FFF;">Phone: <span style="color:#2663A4;">'+oData[6]+'</span></div>'+
'<div style="padding:6px; background-color:#FFF;">IP Address: <span style="color:#2663A4;">'+oData[7]+'</span></div>'+
'<div style="padding:6px; background-color:#FFF;">Lead ID: <span style="color:#2663A4;">'+oData[0]+'</span></div>'+
'<div style="height:6px;"></div>'+
'<div class="light-blue-underline-main" style="margin:0px;"></div>'+
'<div style="height:6px;"></div>'+
'</div>';
return sOut;
}
// For clicking and selecting the date ranges
$("button").button().click(function() {
oTable.fnDraw();
});
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
// Take date from mysql, formatted yyyy-mm-dd, and return as dd/mm/yyyy
function format_ddmmyyyy(oObj) {
var sValue = oObj.aData[oObj.iDataColumn];
var aDate = sValue.split('-');
return aDate[2] + "/" + aDate[1] + "/" + aDate[0];
}
// Highlight Rows
$("tbody tr").live("mouseover", function(){
$(this).children().addClass("highlighted");
});
$("tbody tr").live("mouseout", function(){
$(this).children().removeClass("highlighted");
});
// Actions for Unapprove button
function unapprove_link(data)
{
var str = $(this).attr('title');
var answer = confirm("Are you sure you want to UNAPPROVE this lead?");
if (!answer) return false;
$.post("actions/unapprove-lead.php",
{"lead_id": data},
function(data)
{
oTable.fnDraw();
}
);
}
/*// Actions for Delete button
function delete_link(data)
{
$.post("actions/delete-lead.php",
{'lead_id': data},
function(data)
{
oTable.fnDraw();
}
);
}
*/
Calling oTable.fnDraw() will cause the refresh for sure. You are doing $.post, I would change it to .$ajax, also, you don't seem to be doing anything with the data returned from the post operation. Remember, DataTable expects an oData object somewhere in the response if you expect it to rebind the data.
In fact, datatable expects a lot more, you need to return the number of items in total, the number being displayed on the page, etc.