FullCalendar IETF date in Firefox - date

I have been working with the FullCalendar and came across some problems in Firefox. I have selectable on and the start date comes over in IETF format. For some reason, IE8 is able to post this (and autoconvert it to a timestamp), but Firefox won't.
It leaves it in IETF format, and PHP's date() function doesn't work with it. I used the fullCalendar.formatDate() function as a work-around, but this doesn't seem like the best solution to me.
Is there another way to make this work?
<script type='text/javascript'>
$(document).ready(function () {
var date = new Date();
var calendar = $("#calendar").fullCalendar({
theme: true,
title: "Employee Calendar",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonIcons: {prev: 'circle-triangle-w', next: 'circle-triangle-e'},
editable: true,
droppable: true,
events: '<?php echo matry::base_to('utilities/calendar_events');?>',
eventClick: function (event) {
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
type: 'POST',
data: {id: event.id, job: 'getEvent'},
success: function(data){
$("#event_box").fadeIn(500);
$("#event_info").html(data);
}
});
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay){
var title = prompt('Event Title');
start = $.fullCalendar.formatDate(start, 'yyyy-MM-dd HH:mm:ss');
end = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm:ss');
if (title)
{
$.ajax({
type: 'POST',
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
data: {title: title, start: start, end: end, allDay: allDay, job: 'createEvent'},
success: function(data) {
calendar.fullCalendar('refetchEvents' );
$("#alerts").html(data);
}//close success function
})//close ajax
}
else
calendar.fullCalendar('unselect');
}//close select function
}); //close fullcalendar function
$("#calendar_controls").accordion({
collapsible: true,
clearStyle:true,
active: false,
autoHeight: true
});//close calendar controls
$(document).on('submit', '#event_form', function (event){
event.preventDefault();
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
type: 'POST',
data: $('#event_form').serialize(),
success: function(data){
$("#event_box").fadeOut('2000');
$("#alerts").html(data).focus();
}
})
});//close on function
$(document).on('click', '#delete', function() {
var con = confirm('Do you want to delete this Event?');
if (con)
{
var id = $("#event_form input[name= 'id']").val();
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
data: {id: id, job: 'deleteEvent'},
type: 'POST',
success: function(data){
$("#alerts").html(data).focus()
calendar.fullCalendar('refetchEvents');
$("#event_box").fadeOut(1000);
;}
});
}
})
}); //close document.ready function
</script>

IETF date format doesn't get passed correctly by firefox, but the date can be altered with the $.fullCalendar.formatDate() function that appears to work well. IF this is added wherever dates are passed, the format can be changed.

Related

Clear jQuery Chosen select options on change event

I'm having some difficulty clearing previous jQuery Chosen select options on a change function from another select.
I tried
$(".chosen-workOrderFormModal_machineSelection").val('').trigger("chosen:updated"); but that did not work.
I am using Chosen v1.8.5
$('.chosen-workOrderFormModal_systemSelection').on('change', function(evt, params) {
systemCode=$('#workOrderFormModal_systemSelection').chosen().val();
$('#workOrderFormModal_systemSelection_chosen').css('color', '#495057');
$('#workOrderFormModal_systemSelection_chosen').css('border', 'none');
machineCodeSelect = '';
//*Start -getMachineSelectionData.php AJAX
$.ajax
({
type: "POST",
url: "getMachineSelectionData.php",
data: { locationCode: userLocationCode,
systemCode: systemCode,},
dataType: 'json',
cache: false,
success: function(data) {
$.each(data, function(i, machine){
machineCodeSelect += '<option value="' + machine.machineCode + '">' + machine.machineDescription + '</option>';
});
$('#workOrderFormModal_machineSelection').append('Select Machine...');
$('#workOrderFormModal_machineSelection').append(machineCodeSelect);
$(".chosen-workOrderFormModal_machineSelection").val('').trigger("chosen:updated");
$('.chosen-workOrderFormModal_machineSelection').chosen({
disable_search_threshold: 10,
no_results_text: 'Machine Not Found',
width:'271px',
});
}
}); //* END -getMachineSelectionData.php AJAX
$('#workOrderFormModal_machineSelection').attr('readonly', false);
$('#workOrderFormModal_machineSelection').removeAttr('disabled');
$(".chosen-workOrderFormModal_machineSelection").val('').trigger("chosen:updated");
$("#workOrderFormModal_machineSelection_chosen > a > span" ).text('Select Machine...')
});

Why is my page not rendering EnhancedGrid

Good day to all, while studying dojo, I ran into a problem that I do not draw an EnhancedGrid on my page. this error appears in the browser console:
dojo.js.uncompressed.js:1321 Uncaught TypeError: Cannot read property 'get' of null
at Object.getFeatures (ObjectStore.js.uncompressed.js:241)
at Object._setStore (DataGrid.js.uncompressed.js:14511)
at Object.advice (dojo.js.uncompressed.js:8428)
at Object.c [as _setStore] (dojo.js.uncompressed.js:8408)
at Object.postCreate (DataGrid.js.uncompressed.js:14351)
at Object.l (dojo.js.uncompressed.js:10753)
at Object.postCreate (EnhancedGrid.js.uncompressed.js:90)
at Object.create (DataGrid.js.uncompressed.js:4330)
at Object.postscript (DataGrid.js.uncompressed.js:4243)
at new <anonymous> (dojo.js.uncompressed.js:10950)
the grid drawing script looks like this:
var blogStore;
/**
* Creates Dojo Store.
*/
require(["dojo/store/JsonRest",
"dojo/data/ObjectStore"
], function (JsonRest, ObjectStore) {
blogJsonStore = new JsonRest({
handleAs: 'json',
target: 'http://localhost:8080/myservice'
});
var data = {
identifier: 'id',
items: []
};
blogJsonStore.query({
start: 0,
count: 10
}).then(function (results) {
var res =[];
res = results;
if (0 === res.length){
data.items.push("There are no entries in this blog. Create a post!!!")
}else {
data.items.push(results)
}
});
blogStore = new ObjectStore({data: data});
});
/**
* Creates Dojo EnhancedGrid.
*/
require(["dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Filter",
"dojox/grid/enhanced/plugins/NestedSorting",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/domReady!"
], function (EnhancedGrid) {
Grid = new EnhancedGrid({
id: 'grid',
store: blogStore,
structure: [
{ name: 'Message', field: 'text', datatype: 'string',
width: 'auto', autoComplete: true }
],
rowsPerPage: 5,
rowSelector: "20px",
selectionMode: "single",
plugins: {
nestedSorting: true,
pagination: {
description: true,
pageStepper: true,
sizeSwitch: true,
pageSizes: ["5","10","15","All"],
maxPageStep: 4,
position: "bottom"
}
}
});
Grid.placeAt('resultDiv');
Grid.startup();
});
if you remove the blog "Creates Dojo Store." it renders normally
Help me solve the problem. Thank you in advance for any help

ag-Grid javaScript, TypeError: rowData is undefined

ag-Grid, following the official demo of javascript but using API like real world over hard-coded data. Note: no jQuery, just use the primitive plain XMLHttpRequest() for ajax.
F12 verified API returns data in the same structure as demo, has children node inside, and gripOptions.rowData is assigned with the returned data.
Tried instantiating rowData inside of gripOptions as
rowData: [], got the same error
Or
rowData: {}, got ReferenceError: rowData is not defined.
HTML:
<script src="/scripts/agGrid/ag-grid.js"></script>
<script src="/scripts/agGrid/myAG.js"></script>
<br />JavaScript ag-Grid
<div id="myGrid" style="height: 200px;" class="ag-fresh"></div>
myAG.js:
var httpApi = new XMLHttpRequest();
var columnDefs = [
{ headerName: "Client Name", field: "ClientName", unSortIcon: true, cellRenderer: "group" },
{ headerName: "Division", field: "Division" },
{ headerName: "Others", field: "Others" }
];
var gridOptions = {
columnDefs: columnDefs,
getNodeChildDetails: getNodeChildDetails
};
function getNodeChildDetails(rowItem) {
if (rowItem.ClientName) {
return {
group: true,
// provide ag-Grid with the children of this group
children: rowItem.children,
// the key is used by the default group cellRenderer
key: rowItem.ClientName
};
} else {
return null;
}
}
// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
$.ajax({
type: "GET",
url: "/api/myAG/Tree",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
gridOptions.rowData = data;
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
})
});
Version:
ag-grid = v8.1.0
FireFox = 50.1.0
Error message:
F12 confirms data exists and assigned:
inside of ag-grid.js, the line it complains about but rowData has data:
See this answered post, basically an additional check is needed for the tree.
ag-Grid, try to make Tree Demo work using own data

Replacing Filepicker files after editing with Aviary

I have an Edit button next to each uploaded thumbnail on my page that summons the Aviary modal upon click. What I'd like to do is replace the original file on FP when I save the outcome of editing in Aviary.
filepicker.saveAs doesn't seem like the right solution because I don't want to save to a new file, I just want to replace the file on FP.
The "Saving Back" documentation doesn't seem to apply because it says to POST a full file to the original URL. Ideally I'd like to just have a function take the original url and the new Aviary URL and replace the contents at the original URL.
Is this possible at the moment? Thanks!!!
I've pasted my code here:
<script src='http://feather.aviary.com/js/feather.js'></script>
<script src="https://api.filepicker.io/v0/filepicker.js"></script>
<script type="text/javascript">
$(document).on('click', '.delete-image', function(e) {
var image = $(this).closest('tr').attr('data-image');
$('.modal-footer .btn-danger').remove();
$('.modal-footer').append("<button class='delete-confirmed btn btn-danger' data-image='"+image+"'>Delete</button>");
$('#myModal').modal('show');
return false;
});
$(document).on('click', '.delete-confirmed', function(e) {
e.preventDefault();
var image = $(this).attr('data-image');
var row = $("tr[data-image="+image+"]");
$('#myModal').modal('hide');
$.ajax({
url: row.attr('data-link'),
dataType: 'json',
type: 'DELETE',
success: function(data) {
if (data.success) {
row.hide();
filepicker.revokeFile(row.attr('data-fplink'), function(success, message) {
console.log(message);
});
}
}
});
return false;
});
//Setup Aviary
var featherEditor = new Aviary.Feather({
//Get an api key for Aviary at http://www.aviary.com/web-key
apiKey: '<%= AVIARY_KEY %>',
apiVersion: 2,
appendTo: ''
});
//When the user clicks the button, import a file using Filepicker.io
$(document).on('click', '.edit-image', function(e) {
var image = $(this).closest('tr').attr('data-image');
var url = $(this).closest('tr').attr('data-fplink');
$('#aviary').append("<img id='img-"+image+"'src='"+url+"'>");
//Launching the Aviary Editor
featherEditor.launch({
image: 'img-'+image,
url: url,
onSave: function(imageID, newURL) {
//Export the photo to the cloud using Filepicker.io!
//filepicker.saveAs(newURL, 'image/png');
console.log('savin it!');
}
});
});
filepicker.setKey('<%= FILEPICKER_KEY %>');
var conversions = { 'original': {},
'thumb': {
'w': 32,
'format': 'jpg'
},
};
$(document).on("click", "#upload-button", function() {
filepicker.getFile(['image/*'], { 'multiple': true,
'services': [filepicker.SERVICES.COMPUTER, filepicker.SERVICES.URL, filepicker.SERVICES.FLICKR, filepicker.SERVICES.DROPBOX, filepicker.SERVICES.IMAGE_SEARCH],
'maxsize': 10000*1024,
'conversions': conversions
},
function(images){
$.each(images, function(i, image) {
$.ajax({
url: "<%= product_images_path(#product.id) %>",
type: 'POST',
data: {image: JSON.stringify(image)},
dataType: 'json',
success: function(data) {
if (data.success) {
$('.files').append('<tr><td><img src="'+image.data.conversions.thumb.url+'"</td></tr>')
}
}
});
});
});
});
You actually can POST a url to the filepicker url as well, for example
curl -X POST -d "url=https://www.filepicker.io/static/img/watermark.png"
https://www.filepicker.io/api/file/gNw4qZUbRaKIhpy-f-b9
or in javascript
$.post(fpurl, {url: aviary_url}, function(response){console.log(response);});

Feed Dialog not working on some browsers

Hi guys I have a weird problem with de feed dialog.
It works pefect on Firefox, but when I try to use it on IE or Chrome I got this error "An error occurred. Please try later"
I have tried to fix it but I can't. Can you help me please.
This is the code i'm using to call the dialog.
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_GB/all.js'></script>
<a href="#" onclick='postToFeed(); return false;'>Post Feed</a>
<script>
FB.init({appId: "xxxx", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'http://apps.facebook.com/xxxx',
picture: 'xxxx',
name: 'xxxx',
caption: 'xxxxx',
description: 'xxxxx',
properties: [{text: 'xx', href: 'xx'},],
actions: [{name: 'xx', link: 'xx'}],
};
function callback(response) {
document.getElementById('msg').innerHTML = "Well Done!!";
}
FB.ui(obj, callback);
}
</script>
</script>
A couple of things to try:
1: It could possibly be as simple as the rogue comma in your code here after actions:
actions: [{name: 'xx', link: 'xx'}],
Try removing that, however Chrome should better handle that, but that would have caused an issue with IE!
2: Use the Console to see if any errors are thrown.
3: Add oauth: true to your init statement like so:
FB.init({appId: "xxxx", status: true, cookie: true, oauth: true});
4: Remove the parameters in the call, and add them back in one by one after testing it works with each addition: start with:
var obj = {
method: 'feed',
link: 'http://apps.facebook.com/xxxx',
picture: 'xxxx',
name: 'xxxx',
caption: 'xxxxx',
description: 'xxxxx'
};