Use jquery ID from div in a hyperlink - javascript

I'm using FullCalendar.io and implemented a few features. When trying to link an existing appointment to its client_id, I don't get the variable in a hyperlink. The variable does appear in the modal div when calling modalclient_id (please see picture), but need it in my hyperlink. Any help is much appreciated!
INDEX.PHP
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detalhes:</h4>
</div>
<div id="modalBody" class="modal-body">
<div id="modalTitle" class="modal-title"></div>
<div id="modalclient_id"></div>
<div id="modalStatus" style="margin-top:5px;"></div>
<a id="lnkTarget" href="#">List all appointments</a>
<script type="text/javascript">
var x = "/schedule/list-appointments.php?id=";
var y = $('#modalclient_id').html(); // this gets what's inside <div>here</div>
//var y= $('#modalClientID').val('event.client_id');
//var y = $(this).attr('#client_id');
//var y = $(this).attr('client_id');
//var y= $("#client_id").text();
var result = x + y;
$('#lnkTarget').attr('href', result);
});
});
</script>
SCRIPT.JS
$(document).ready(function(){
var calendar = $('#calendar').fullCalendar({
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
//defaultView: 'agendaDay',
editable: true,
selectable: true,
allDaySlot: false,
events: "index.php?view=1",
eventClick: function(event, jsEvent, view) {
endtime = $.fullCalendar.moment(event.end).format('h:mm');
starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalStatus').html(event.status);
$('#modalclient_id').text(event.client_id);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
},
//header and other values
select: function(start, end, jsEvent) {
endtime = $.fullCalendar.moment(end).format('h:mm');
starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
start = moment(start).format();
end = moment(end).format();
$('#createEventModal #startTime').val(start);
$('#createEventModal #endTime').val(end);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('toggle');
},
eventDrop: function(event, delta){
$.ajax({
url: 'index.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
type: "POST",
success: function(json) {
//alert(json);
}
});
},
eventResize: function(event) {
$.ajax({
url: 'index.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
type: "POST",
success: function(json) {
//alert(json);
}
});
}
});
$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
$('#deleteButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doDelete();
});
function doDelete(){
$("#calendarModal").modal('hide');
var eventID = $('#eventID').val();
$.ajax({
url: 'index.php',
data: 'action=delete&id='+eventID,
type: "POST",
success: function(json) {
if(json == 1)
$("#calendar").fullCalendar('removeEvents',eventID);
else
return false;
}
});
}
function doSubmit(){
$("#createEventModal").modal('hide');
var title = $('#title').val();
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
var status = $('#status').val(); /// added.
var client_id = $('#client_id').val(); /// added.
var active = $('#active').val(); /// added.
var added_user = $('#added_user').val(); /// added.
$.ajax({
url: 'index.php',
data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime+'&status='+status+'&client_id='+client_id+'&active='+active+'&added_user='+added_user, //added
type: "POST",
success: function(json) {
$("#calendar").fullCalendar('renderEvent',
{
id: json.id,
title: title,
start: startTime,
end: endTime,
status: status,
client_id: client_id,
active: active,
added_user: added_user
},
true);
}
});
}
});

The JS code in your first snippet is executed before the data is updated by clicking your calendar. You need to remove that logic and update the href of #lnkTarget within the eventClick handler:
eventClick: function(event, jsEvent, view) {
let endtime = $.fullCalendar.moment(event.end).format('h:mm');
let starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
let mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalStatus').html(event.status);
$('#modalclient_id').text(event.client_id);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
$('#lnkTarget').prop('href', '/schedule/list-appointments.php?id=' + event.client_id // add this line
},
});

Related

Laravel Date Range Search using Ajax jQuery datatables using Yajra

I'm trying to make Date Range Search after I completed making CRUD system in Laravel from this tutorial:
https://www.webslesson.info/2018/02/delete-or-remove-mysql-data-in-laravel-using-ajax.html
After this I looked at this tutorial:
https://www.webslesson.info/2019/02/laravel-date-range-search-using-ajax-jquery.html
The problem is that I can't implement this in the first tutorial.
1st my opinion is to integrate it in this function in the AjaxdataController
function getdata()
{
$students = Student::select('id', 'first_name', 'last_name');
return Datatables::of($students)
->addColumn('action', function($student){
return '<i class="glyphicon glyphicon-edit"></i> Edit<i class="glyphicon glyphicon-remove"></i> Delete';
})
->addColumn('checkbox', '<input type="checkbox" name="student_checkbox[]" class="student_checkbox" value="{{$id}}" />')
->rawColumns(['checkbox','action'])
->make(true);
}
But i have this:
function fetch_data(Request $request)
{
if($request->ajax())
{
if($request->from_date != '' && $request->to_date != '')
{
$data = DB::table('students')
->whereBetween('created_at', array($request->from_date, $request->to_date))
->get();
}
else
{
$data = DB::table('students')->orderBy('created_at', 'desc')->get();
}
echo json_encode($data);
}
}
In the view file i have script:
<script>
$(document).ready(function(){
var date = new Date();
$('.input-daterange').datepicker({
todayBtn: 'linked',
format: 'yyyy-mm-dd',
autoclose: true
});
var _token = $('input[name="_token"]').val();
fetch_data();
function fetch_data(from_date = '', to_date = '')
{
$.ajax({
url:"{{ route('daterange.fetch_data') }}",
method:"POST",
data:{from_date:from_date, to_date:to_date, _token:_token},
dataType:"json",
success:function(data)
{
var output = '';
$('#total_records').text(data.length);
for(var count = 0; count < data.length; count++)
{
output += '<tr>';
output += '<td>' + data[count].first_name + '</td>';
output += '<td>' + data[count].last_name + '</td>';
output += '<td>' + data[count].created_at + '</td></tr>';
}
$('tbody').html(output);
}
})
}
$('#filter').click(function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
if(from_date != '' && to_date != '')
{
fetch_data(from_date, to_date);
}
else
{
alert('Both Date is required');
}
});
$('#refresh').click(function(){
$('#from_date').val('');
$('#to_date').val('');
fetch_data();
});
});
</script>
Can anyone suggest something?
2nd try:
I edit the get data function AjaxdataController
function getdata(Request $request)
{
if($request->start_date != '' && $request->end_date != '')
{
$students = Student::whereBetween('created_at', array($request->start_date, $request->end_date));
} else {
$students = Student::select('id', 'first_name', 'last_name', 'created_at');
};
return Datatables::of($students)
->addColumn('action', function($student){
return '<i class="glyphicon glyphicon-edit"></i> Edit<i class="glyphicon glyphicon-remove"></i> Delete';
})
->addColumn('checkbox', '<input type="checkbox" name="student_checkbox[]" class="student_checkbox" value="{{$id}}" />')
->rawColumns(['checkbox','action'])
->make(true);
}
and ajaxdata.blade.php:
var date = new Date();
$('.input-daterange').datepicker({
todayBtn: 'linked',
format: 'yyyy-mm-dd',
autoclose: true
});
var _token = $('input[name="_token"]').val();
getdata();
function getdata(start_date='', end_date='')
{
$('#student_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url:"{{ route('ajaxdata.getdata') }}",
type:"POST",
data:{
start_date:start_date, end_date:end_date, _token:_token
}
},
"columns":[
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "created_at" },
{ "data": "action", orderable:false, searchable: false},
{ "data":"checkbox", orderable:false, searchable:false}
]
});
}
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if(start_date != '' && end_date != '')
{
$('#student_table').DataTable().destroy();
getdata(start_date, end_date);
}
else
{
alert('Both Date is required');
}
});
With error
POST http://laravel.localhost/ajaxdata/getdata 405 (Method Not Allowed)

Laravel : Bootstrap-datepicker-sandbox highlight specific date

On a landing page a datepicker is loaded as you can see in the image. I want to be able to change the background colors of specific dates on the calendar.
For example :
If 27-11-2017 slot is booked, then on load I want the color to change for that date.
My Script code:
<script>
$(document).ready(function () {
// I am getting a data on this loop so how can i change same date background color
#if(!empty($BookeData))
#foreach($BookeData as $key => $value)
#if($value->event_date)
#endif
#endforeach
#endif
/* Gt data in $BookeData
array:13 [
"id" => 8
"source_type" => "App\Venue"
"source_id" => 7
"event_date" => "2017-11-28"
"session" => "1"
"payment" => "5000"
"status" => "Booked"
"created_at" => "2017-11-27 10:30:22"
"updated_at" => "2017-11-27 10:30:22"
]*/
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker').datepicker({
changeYear: true,
multidate :true,
maxViewMode: 0,
startDate: today
}).on('changeDate', function(e) {
var $date = $.datepicker.formatDate('yy-mm-dd', e.date);
$("#event_date").val($date);
//e.preventDefault();
//var formData = $('form').serialize();
$.ajax({
type: 'GET',
url: "{{ route('admin.calendar.add') }}",
data: {'date':$date},
cache: false,
success: function(response){
$("#calendar div.divForm").html(response);
$("<input type='hidden' value='' name='event_date' id='event_date' />").appendTo('#calendar div.dateDiv');
$("#event_date").val($date);
$("#calendar").show();
}
});
});
$(".close").on("click", function() {
$("#calendar").hide();
});
});
As i understand your issue, try as like below:
<input type="text" id="datepicker" />
var booked_date = ["27/11/2017"]; //Take your booked date here from your data
$("#datepicker").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, booked_date) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});
The activeClass can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.
.activeClass{
color: yellow;
background: white;
}
Hope this helps you OR you can get some idea!

Jquery Ajax call is not getting parameters values from textbox control

Below jquery ajax call is not working properly. IF I am directly passing values for city/area/vendortype then its working correctly. However below ajax call is not taking values from respective control.
public void GetVendors(int pageNumber, int pageSize, string city, string area, string vendortype)
{
List<VendorData> listVendors = new List<VendorData>();
string cs = ConfigurationManager.ConnectionStrings["Connectionstr"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("spGetVendorbyFilter", con);
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#PageNumber", pageNumber);
cmd.Parameters.AddWithValue("#PageSize", pageSize);
cmd.Parameters.AddWithValue("#city", city);
cmd.Parameters.AddWithValue("#area", area);
cmd.Parameters.AddWithValue("#vendortype", vendortype);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
VendorData vendor = new VendorData();
vendor.pID = Convert.ToInt32(rdr["VendorID"]);
vendor.pvendorname = Convert.ToString(rdr["VendorName"]);
vendor.pcoverimage = Convert.ToString(rdr["CoverImage"]);
vendor.pcategory = Convert.ToString(rdr["Category"]);
listVendors.Add(vendor);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listVendors));
}
}
<script type="text/javascript">
$(document).ready(function () {
var currentPageNumber = 1;
loadData(currentPageNumber);
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
currentPageNumber += 1;
loadData(currentPageNumber);
}
});
function loadData(currentPage)
{
var parCity = $("#lblCityParameter").val();
var parArea = $("#lblAreaParameter").val();
var parCategory = $("#lblVendortype").val();
$.ajax({
type: 'POST',
url: 'WebService/VendorService.asmx/GetVendors',
**data: { pageNumber: currentPage, pageSize: 6, city: parCity, area: parArea, vendortype: parCategory }**,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data)
{
var vendorRepeater = $('#repdata');
$(data).each(function (index,ven)
{
vendorRepeater.append('<div class="col-md-4 wow fadeInLeft animated" data-wow-delay="0.4s" style="text-align:center"><div id="Div1" class="living_boxauto" runat="server"><a href="VendorDetails.aspx?VendorId='+ven.pID+'"><div class="media"><img runat="server" class="img-responsive" src="images/'
+ ven.pcoverimage +
'" style="width:300px;height:200px;" /><div class="media__body"><h2>Image Title</h2><p>Description</p></div></div></a><div id="Div2" class="living_desc" runat="server"><h3><a href="VendorDetails.aspx?VendorId='
+ven.pID+
'"><asp:Label ID="lblVendorName" runat="server" Text="'
+ ven.pvendorname +
'" CssClass="lblVendorName"></asp:Label></a></h3><p></p></div></div></div>');
});
}
});
}
});
</script>

Repeating time on fullcalendar event

I'm trying to make some repeating events on a certain time with full calendar.
For example i want the events to happen from
1-3-2016
until 1-7-2016.
Here is the code that i take all the events.
<script type="text/javascript">
$(document).ready(function()
{
var events=new Array();
var numberofevents = '<?php echo count ($info); ?>';
<?php
foreach($info as $module => $kati) { ?>
var date = new Date('<?php echo $kati['ModuleSchedule_StartTtime']; ?>');
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var time = date.getHours();
var start_date = new Date(year, month, day, time, 0);
var end_date = new Date(year, month, day, time+2, 0);
var ranges = [{ start:"2016/03/01", end:"2016/06/01"}] //range of repeat
var event_name = '<?php echo $kati['ModuleSchedule_Module_Name']; ?>';
var event_description = '<?php echo $kati['ModuleSchedule_Semester_Name'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_Classroom'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_TeacherUserFullName'] ?>';
event = new Object();
event.title = event_name;
event.start = start_date;
event.end = end_date;
event.description = event_description;
event.color = "blue";
event.dow = '<?php echo $kati['ModuleSchedule_DayOfWeek']; ?>';
event.ranges = ranges;
event.allDay = false;
events.push(event);
<?php }
?>
$('#calendar').fullCalendar({
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
weekMode: 'liquid',
weekends: true,
theme: true,
selectable: true,
editable: false,
events: events
});
});
On the line that i take the "ranges" is there any proper way to add then in the event ?
Because for sure what i'm trying to do is wrong here.
Thanks for your time!
Add this to your event object
event.dowend = new Date('2016/7/1');
and on eventRender check if date has reach the dowend and if that's true return false, so the calendar wont create the event
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
var theDate = event.start
var endDate = event.dowend;
if (theDate >= endDate) {
return false;
}
}
I extended the solution and created a jsfiddle [
$(document).ready(function() {
$('#scheduler').fullCalendar({
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
},
defaultView: 'month',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-15T16:00:00',
events: [{
id: 1,
title:"Front End",
start:'10:00',
end: '13:00',
dow: [0, 1, 2, 3, 4, 5, 6],
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
}
]
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet"/>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id='scheduler'></div>
]1 to show you the specific solution that display daily concurrent event only between two dates.
The solution relies on add the two custom dates parameters for the event object:
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
And then add the condition to the eventRender function:
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
}
You can also use ranges. Please check the code below
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title: "My repeating event",
start: '10:00',
end: '14:00',
dow: [1, 2, 3, 4],
ranges: [{
start: moment().startOf('week'), //next two weeks
end: moment().endOf('week').add(7, 'd'),
}, {
start: moment('2018-06-15', 'YYYY-MM-DD'), //all of february
end: moment('2018-06-15', 'YYYY-MM-DD').endOf('month'),
}, ],
}],
eventRender: function(event) {
return (event.ranges.filter(function(range) {
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length) > 0;
},
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js"></script>
<div id='calendar'></div>

Update function dialog jquery php

Im using fullcalendar. And when i click on an event it opens a dialog where i see the current event title/description/startdate/enddate. I have an update edit button so when i change one of the variables it wil change the variable in the database. But that doesnt work somehow.
agenda_view.php:
<html>
<head>
<link href='<?=base_url();?>testcalendar/css/fullcalendar.css' rel='stylesheet' />
<script src='<?=base_url();?>testcalendar/js/jquery-1.9.1.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendar.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendarextern.js'></script>
<script src='<?=base_url();?>testcalendar/js/nieuweafspraak.js'></script>
<link href="<?=base_url();?>testcalendar/assets/css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
<style>
body {
margin-top: 40px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dialogstatusevent" style="display:none" title="Mijn Afspraak">
<form>
<div class="control-group">
<div class="controls">
<label class="control-label">Titel:</label>
<input type="text" name="title" id="titlestatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Description:</label>
<input type="text" name="description" id="descstatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Van:</label>
<input type="text" name="datestatusstart" id="datestatusstart" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Tot:</label>
<input type="text" name="datestatusend" id="datestatusend" class="text ui-widget-content ui-corner-all">
</div>
</div>
</form>
</div>
<div id='calendar'></div>
</body>
</html>
Fullcalendarextern.js:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "../testcalendar/fullcalendar/events.php",
// Convert the allDay from string to boolean
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 Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventClick: function(calEvent, jsEvent, view) {
$( "#dialogstatusevent" ).dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
closeOnEscape:true,
resizable:false,
show:'fade',
buttons: {
"Edit": function() {
var titlestatus = $("#titlestatus").val(),
descstatus = $('#descstatus').val(),
datestart = $('#datestatusstart').val(),
dateend = $('#datestatusend').val();
$.post('../testcalendar/db/processupdate.php',{
user_name: titlestatus, user_desc: descstatus, user_start: datestart, user_end: dateend, action:'joined'
}); var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);//End Post
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
},
"Cancel": function() {
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
}
}
}
);
$("#titlestatus").val(calEvent.title),
$("#descstatus").val(calEvent.description),
$("#datestatusstart").val(calEvent.end),
$("#datestatusend").val(calEvent.start),
$("#datestatusstart").datepicker({ dateFormat: 'yy-mm-dd' }),
$("#datestatusend").datepicker({ dateFormat: 'yy-mm-dd' });
$( "#dialogstatusevent" ).dialog( "open" );
},
eventMouseover: function(event, domEvent) {
var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="../testcalendar/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
$(this).append(layer);
$("#delbut"+event.id).hide();
$("#delbut"+event.id).fadeIn(300);
$("#delbut"+event.id).click(function() {
$.ajax({
url: '../testcalendar/fullcalendar/delete_events.php',
data: 'id=' + event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
});
$("#edbut"+event.id).hide();
$("#edbut"+event.id).fadeIn(300);
$("#edbut"+event.id).click(function() {
var title = prompt( '\n\nNew Event Title: ');
if(title){
$.ajax({
url: '../testcalendar/fullcalendar/update_title.php',
data: 'title='+ title+'&id='+ event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
}
});
},
eventMouseout: function(calEvent, domEvent) {
$("#events-layer").remove();
},
});
});
processupdate.php:
<?php
//include db configuration file
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined'){
user_joined($user_name, $user_desc, $user_start, $user_end);
}
}
/*if ( (isset($_POST["id"]) && strlen($_POST["id"]) >= 3 && strlen($_POST["id"]) <= 60) &&
(isset($_POST["name"]) && strlen($_POST["name"]) >= 3 && strlen($_POST["name"]) <= 50) &&
(isset($_POST["age"]) && strlen($_POST["age"]) >= 3 && strlen($_POST["age"]) <= 40) )
{ //check $_POST["name"] and $_POST["address"] and $_POST["city"] are not empty
$id = $_POST["id"];
$name = $_POST["name"];
$age = $_POST["age"];
$q = "INSERT INTO tbltest ( id, name, age) VALUES
('".$id."','".$name."','".$age."')";
mysql_query($q);
}*/
?>
connection.php:
<?php
$db_host = "localhost";
// Place the username for the MySQL database here
$db_username = "roots";
// Place the password for the MySQL database here
$db_pass = "root";
// Place the name for the MySQL database here
$db_name = "blackboks-calendar";
// Run the actual connection here
mysql_connect("$db_host","$db_username","$db_pass") or die ("could not connect to mysql");
mysql_select_db("$db_name") or die ("no database");
?>
Try if you are getting an alert ?
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
print_r($_POST);
?>
Pass id through POST as well , you need to send the required id value
$.post('../testcalendar/db/processupdate.php',
{ 'user_name' : titlestatus, 'user_desc': descstatus, 'user_start' : datestart, 'user_end' : dateend, 'action':'joined' ,'id' : id },
function(response){
alert(response);
});
It doesnt echo the id.
processupdate.php:
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$id=$_POST['id'];
$user_name=$_POST['title'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
echo $id;
print_r($_POST); ?>
Like this? it doesnt output something in the alert either:(
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
} ?>

Categories

Resources