Develop Reference

Get current position with jquery ui map (gmap)

I'm upgrading an old hybrid application. Now I have the latest versions of jQuery (1.7 -> 2.2.4) and jQuery Mobile (1.1 -> 1.4.5), and I use too Jquery Migrate (1.4.1).
This app contains a page with a map created with jquery-ui-map and I'm testing the app with PhoneGap.
In this page, I have a button and I would like to get current position of user.
I use this code:
$('#button-getcurrentposition').click(function(){
$('#map-canvas').gmap('getCurrentPosition', function(position, status) {
alert("I'm here");
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map-canvas').gmap('option','center', clientPosition);
}
});
});
but the alert "I'm here" never displays and I don't know why, so I can not have the current position of the user.
I have included jquery.ui.map.extensions.js, jquery.ui.map.overlays.js and jquery.ui.map.services.js. I have the same problem with the web app version and the apk or ipa.Is there someone with the same problem? Does anyone know why the alert "I'm here" doesn't display? Is the function "getCurrentPosition" deprecated with the latest version of jquery or cordova? Thank you so much

$('#button-getcurrentposition').click(function(){
$('#map-canvas').gmap('getCurrentPosition', function(status, position) {
alert("I'm here");
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map-canvas').gmap('option','center', clientPosition);
}
}, { timeout: 4000, enableHighAccuracy: true });
});
I believe these after parts are required and you have the variables in the function the wrong way around according to the docs.

JQuery FullCalendar rendering events on wrong day in month view

EDIT TL;DR:figured out what was causing the problem temporarily, IE compatibility mode breaks this plugin (v2.5) in IE10 10.0.34
EDIT: I'm a noob it's IE10. Even considering I'd turned off drag and drop and editing IE10 is building it wrong somehow. I do almost all my testing in IE10 as it is the mandated browser for in house web apps, fullcalendar shows IE8+ compatibility on their page so I hadn't tested it across browsers until just now out of desperation/rage. Has anyone had issues with this? Any ideas how I can fix it or how to go about maybe tracing the problem? It's a bit out of my wheelhouse but I want this thing to work and by the Gods I will make it work or die trying.
I was attempting to use fullcalendar as part of a front end for a simple display. The web application is served with Oracle Portal which may have some bearing.
Here is the calendar initialization script, it binds to a div so nothing fancy:
<script>
$(document).ready(function() {
var events = [];
var e = {}
<%FOR event_rec in month_events LOOP%>
e = {
id: "<%=event_rec.event_id%>",
title: "<%=event_rec.event_name%>",
start: "<%=event_rec.event_day%>T<%=to_char(event_rec.start_hr,'FM00')%>:<%=to_char(event_rec.start_min,'FM00')%>:00",
end: "<%=event_rec.event_day%>T<%=to_char(event_rec.end_hr,'FM00')%>:<%=to_char(event_rec.end_min,'FM00')%>:00",
description: "<%=event_rec.notes%>"
};
events.push(e);
<%end LOOP;%>
$("#calendar").fullCalendar({
header: {
left: "prev,next",
center: "title",
right: "month,basicWeek,basicDay"
},
titleFormat: 'MMMM D, YYYY',
buttonText: {
prev: 'Previous',
next: 'Next'
},
defaultDate: "<%=v_default_date%>",
editable:false,
allDayDefault:false,
eventStartEditable:false,
eventDurationEditable:false,
eventLimit:true,
eventOrder:"start",
dayClick: function(date, jsEvent, view) {
//Open day by clicking on tile
$('#calendar').fullCalendar( 'gotoDate', date );
$('#calendar').fullCalendar( 'changeView', "basicDay" );
},
timezone : 'local'
});
$('#calendar').fullCalendar('addEventSource',events);
});
Those <%= %> tags denote where it's calling the faux code behind that is oracle portal, it is looping through a small cursor which yes, is less than an ideal way to do this but it is all I can do.
It looks like this on page load/render:
e = {
id: "1",
title: "Test Event 1",
start: "2015-12-10T11:00:00",
end: "2015-12-10T14:00:00",
description: "Testing Notes"
};
Now for the fun part:
Image
See those days circled in red? Those days have no events, all the events are on the 10th and 12th. I cannot for the life of me figure out why these events are displaying in the wrong days. First thought was a data issue with that array I'm filling, like something was typed wrong or formatted wrong but all the dates have identical start/end times as I didn't changed those values at first when making test cases.
Any ideas? I'm completely out of them. Usually in these situations it's something small I overlooked, and as soon as I ask for help I spot it. I'm banking on this, or someone smarter than I to spot the screw up.

Compatibility mode in IE10 (10.0.34) breaks the fullcalendar app (or JQuery) from version 2.5, making events render on the wrong date cells in month view but remain correct in date or week views.
Turning it off solved my issue at least for the time being (if you are running legacy apps that require compatibility mode for some cases in a hodgepodge of outdated spaghetti code from hell like I am, this may not be a viable long term fix)

Autocompletion for Ace Editor

OK, so here's the deal:
I'm using Ace Editor
The app the editor is integrated in, is written Objective-C/Cocoa
I need AutoCompletion (for a given set of keywords)
Now, here's the catch :
I know AutoCompletion is not yet natively supported
I know of some attempts by others (e.g. Codiad IDE, Gherkin, Alloy-UI), some making use of Jquery UI Autocomplete - but I still cannot figure out how this could be adapted to an existing Ace setup
I'm still not sure if I should go for a JS-oriented solution or just use Objective-C/Cocoa for that
Any help would be more than appreciated.

AutoCompletion can be achieved in ace editor..
Code :
var editor = ace.edit('editor');
editor.setTheme("ace/theme/eclipse");
editor.getSession().setMode("ace/mode/java");
editor.setShowInvisibles(true);
editor.setDisplayIndentGuides(true);
editor.getSession().setUseWrapMode(true);
var jsonUrl = "JSON/Components/proce.json";
//the url where the json file with the suggestions is present
var langTools = ace.require("ace/ext/language_tools");
editor.setOptions({enableBasicAutocompletion: true});
var rhymeCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
if (prefix.length === 0) { callback(null, []); return }
$.getJSON(jsonUrl, function(wordList) {
callback(null, wordList.map(function(ea) {
return {name: ea.word, value: ea.word, meta: "optional text"}
}));
})
}
}
langTools.addCompleter(rhymeCompleter);
Json file format :
[ {"word":"hello"},
{"word":"good morning"},
{"word":"suggestions"},
{"word":"auto suggest"},
{"word":"try this"}]
Reference/Demo :
http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview

To add Live Auto Completion in Ace nowadays:
In your HTML include the ace/ext-language_tools.js.
The . call does not work well yet, so you may have to enter ctrl-space or alt-space for that, but standard syntax stuff such as writting function, will now show.
Then:
var editor = ace.edit("editor");
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});

The hard part of autocompletion is figuring out the keywords the rest is easy to do.
you need a popup, and listView to display completions, it might
be better to use Cocoa based popup.
some filtering function, simple startsWith check will do, but you can use nicer flex match
like sublime
trivial call to editor.session.replace to insert
selected completion
For 2-3 you should comment at https://github.com/ajaxorg/ace/issues/110 about your specific usecase since there is a work to get native support for AutoCompletion.

ReferenceError: "document" is not defined

Im new to JavaScript and even more new to Google Apps Script. Im trying a simple function that shows the current date (only day, month e and full year), but the Google Script show the error ReferenceError: "document" is not defined.
My goal is to use this function in a Google Site. Here is the code:
function Data()
{
var d=new Date();
var dia=d.getDate();
var mes=d.getMonth();
var ano=d.getFullYear();
var DataCompleta=dia + "/" + mes + "/" + ano
document.write(DataCompleta);
}

Code running as a Google Apps Script does not run in the browser, so you cannot use web browser APIs with it. If you want to output content to a Google Site, then you need to use the API for Sites.
Presumably you would want something like createWebPage and then use the methods on the resulting object to add the content to it.

As said in the former answer you can't execute a function directly in the Browser, you'll have to choose a so called 'container' to run your function from it. I would recommand you read the documentation and maybe try a few simple tutorials to see how GAS can be executed.
EDIT : following your comments, feel free to have a look at this script built with UiApp, the result is viewable here and shows what you wanted to : "Hello, today is 25/10/2012"

Inserting HTML DOM elements loaded from an XML file w/ jQuery

If there's an easier/better way to do this, please say so (I'm just starting to learn JS, first language), but here's what I am trying to accomplish:
I have an XML file containing a set of markers for google maps, ie:
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker name="Our Venue" lat="32.735873" lng="-117.255323" icon="wedding">
<div id="info"> <h2>Title</h2> <a href="http://site.com/link.html">Official web site</a> <p>Blah blah blah!</p> </div>
</marker>
...
I can get jQuery to load all the info and parse it into google.maps.Marker(s):
jQuery.get("map_data.xml", {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
var title = marker.attr("name");
var icon = marker.attr("icon");
var markerContent = marker.contents();
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: crIconRegistry[icon],
title: title
});
Now, I'd like when I click on the map marker for it to insert the HTML content from the XML file into a DIV on the page, something like this:
jQuery.jcps.insertFromMap = function (speed, target, markerContent) {
if (speed == 0) {
$(target).html(markerContent);
}
else {
$(target).fadeToggle(speed, function(){$(this).html(markerContent);}).fadeToggle(speed);
}
}
google.maps.event.addListener(marker, "click", function() {
jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
});
However, when I try this (in safari, haven't tested others yet) I get the following error: "WRONG_DOCUMENT_ERR: DOM Exception 4: A Node was used in a different document than the one that created it"
TIA for any help!

Could it be that you use markerContent more than once? It may lead to wonderous things: example. A way around that is to use .clone: example

For full details, please see the excellent explanation at Cross-Browser Scripting with importNode()
You have to check if importNode is supported before adding markerContent in target.
If you are using jQuery 1.5 then see parseXML(), which seems to have taken care of this issue (though I haven't tested it myself).

Solved, although I'm not sure why this made a difference. My previous code used the variable name "marker" twice: first to hold the XML jQuery object, then re-defined to hold the google.maps.Marker object. There must have been a conflict I was unaware of, because changing the variable name solved the issue. Revised code:
jQuery.get("map_data.xml", {}, function(data) {
jQuery(data).find("marker").each(function() {
var node = jQuery(this);
var latlng = new google.maps.LatLng(parseFloat(node.attr("lat")), parseFloat(node.attr("lng")));
var title = node.attr("name");
var icon = node.attr("icon");
var markerContent = node.contents().text();
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: crIconRegistry[icon],
title: title
});
google.maps.event.addListener(marker, "click", function() {
jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
});
});
});
Thanks though for the assistance!

your original code failed because you tried to merge dom nodes from one document into another - safari balks on that (firefox 7, chrome 15 don't though they probably should). as ritesh pointed out, you can call the dom function importNode.
however, to avoid a deep copy of the dom node to be imported, use adoptNode.
it is supported by all major browsers including ie 9 (personally tested on safari 5, chrome 15, firefox 7).
hopefully this is helpful additional info,
best regards, carsten