DHTMLXScheduler export and import to and from ics doesn't work - icalendar

I am currently developing a calendar system and I want some events/dates send directly to and ics file from the web calender.
Dhtmlxscheduler is exactly what I need. Writing the data to mysql works and it is reading the data too, but not to ics and from ics.
Here is the code I have so far:
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_serialize.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_multisource.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"location", height:43, type:"textarea", map_to:"details" },
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.config.first_hour=4;
scheduler.locale.labels.section_location="Location";
//scheduler.config.details_on_create=true;
//scheduler.config.details_on_dblclick=true;
scheduler.init('scheduler',new Date(2009,10,1),"month");
scheduler.setLoadMode("month");
scheduler.load(["php/events.php","/ics/schedule.ics"]);
var dp = new dataProcessor("php/events.php");
dp.init(scheduler);
}
function show(){
alert(scheduler.toICal());
}
function save(){
var form = document.forms[0];
form.elements.data.value = scheduler.toICal();
form.submit();
}
function get(){
var form = document.forms[1];
form.elements.data.value = scheduler.toICal();
form.submit();
}
</script>
</head>
<body onload="init();">
<form action="../04_export/php/ical_writer.php" method="post" target="hidden_frame" accept-charset="utf-8">
<input type="hidden" name="data" value="" id="data">
</form>
It would be nice if you could help me. Thanks. Sorry that the post looks a bit strange. It is my first post with code....

Above code loads data from 2 sources in same time, which causes issue as one source is xml based and other is ical data.
scheduler.load(["php/events.php","/ics/schedule.ics"]);
need to be replaced with separate data loading
scheduler.load("php/events.php", "xml")
scheduler.load("ics/schedule.ics", "ical")

Related

Leaflet freezes on zoom when it's in an XSLTForms XML file

I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.
The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.
This is the simple xforms example:
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/>
<link type="text/css" rel="stylesheet" href="res/style.css"/>
<script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>
<script type="text/javascript">
function showOutdoorMap(id){
var map = L.map(id);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-i875mjb7'
}).addTo(map);
map.locate({setView: true});
}
</script>
</head>
<body onload="showOutdoorMap('map')">
<fieldset>
<label class="header">Demo:</label>
<div id="map" style='width:100%; height:250px;'/>
</fieldset>
</body>
</html>
The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:
if (animated) {
clearTimeout(this._sizeTimer);
/*return this;*/
}
I also had to comment this line in order to drag and drop with no problems:
/*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/

Backbone: el: $ is not defined

So i have this code, (i'm learning Backbone, but the console tells me: "Uncaught ReferenceError: $ is not defined", and i don't have any idea why, i have the exact code of the video tutorial, the error is in this line: el : $('#container')
Here is my code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backbone Project</title>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/template" id="task_template">
<label>Task: </label>
<input type="text" id="task_desc"/>
<input type="button" value="Add Task" id="btn"/>
</script>
<div id="container"></div>
<script type="text/javascript">
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
</script>
</body>
</html>
The example is using jQuery to select DOM elements, add the library to your head...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- load other libraries that depend on jquery *after* jquery -->
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!-- ... time passes ... -->
<script type="text/javascript">
// use jQuery onReady wrapper to ensure DOM has loaded before
// executing JS that might depend on DOM elements, and scripts to exist
$(function(){
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
});
</script>

jQuery mobile redirects after page loads

I want to make a redirection with jQuery mobile right just after the page loads.
Something like this
<?php
... some php stuff here
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<script>
$.mobile.changePage("index.php");
</script>
But nothing happens...
Thanks!
Nothing happens because jQueryMobile hasn't done it's magic yet.
Try:
$(document).bind('pageinit', function() {
$.mobile.changePage("index.php");
});
You could also try some of the events listed at http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Edited following comment:
The following works as expected for me:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).bind('pageinit', function() {
$.mobile.changePage("#pageTwo");
});
</script>
</head>
<body>
<div id="firstPageId" data-role="page">
Page One
</div>
<div id="pageTwo" data-role="page">
Page Two
</div>
</body>
</html>
You can use plain ol' JavaScript for this, you don't need jQuery:
window.location = "index.php";
To do it after the page loads, add a $(document).ready() handler:
$(document).ready(function () {
window.location = "index.php";
});
Try, adding your page-id in the script with .live, something like this:
$('#mainpage').live('pageinit', function (event) {
alert("hi");
//$.mobile.changePage("index.php");
});
Here is the full example: http://jsfiddle.net/KyKFE/
On the other hand, you can also use just plain javascript function or php (if .php page) to do the redirection. They are many different ways to do this.
Please try this to end of your page and before </body> tag,
<script>
$(window).load("index.php", function() {
// stuff or not
});
</script>
I hope help you. :)

Incorrectly Linking Javascript File?

I'm working on installing a PhoneGap plugin on an iPhone. The page for the plugin I am attempting to install can be seen here: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MessageBox.
I believe I have narrowed down my problem to incorrectly working with the JavaScript file. I am including it on my HTML page like so:
<script language="javascript" type="text/javascript" src="MessageBox.js"></script>
The rest of my HTML page is this:
<script type="text/javascript">
alert("test1");
var messageBox = window.plugins.messageBox;
alert("test2");
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
</script>
I see an alert saying test1, but not the second alert. This makes me think that the error is on the line:
var messageBox = window.plugins.messageBox;
However, I'm not quite sure what I should be doing differently. From what I can tell, I've done all the necessary steps as described on the plugin's documentation page, seen here:
https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MessageBox/README.md
(As expected, I also do not see the output of the messageBox.alert... line when viewing this through the iOS simulator.)
I would appreciate any help with this issue, thanks!
NOTE: my initial thread regarding this topic can be seen here: Trouble Installing PhoneGap Plugin
EDIT: I should also add that I have the exact same problem when trying to install a different (but similar) plugin, known as "Prompt"
EDIT2: Here's my index.html:
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="MessageBox.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.alert("PhoneGap is working");
window.location.href="otherpage.html";
}
</script>
The problem is that when you try to create your MessageBox, PhoneGap is not ready yet.
You just need to wait for PhoneGap to be ready before you execute your code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location="otherpage.html";
}
</script>
</head>
<body>
</body>
</html>
Then, on otherpage.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="MessageBox.js"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
console.log("onLoad");
var messageBox = window.plugins.messageBox;
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
}
</script>
</body>
</html>
I tested it on PhoneGap 1.4.1

jquery mobile appending/prepending text

I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">