Unable to Loading jquery datepicker on google maps - javascript

I am unable to load the datepicker on google maps
Here is the code
JS
function CreateMapTopControl(controlDiv, controlElement, controlId, map, event, response) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement(controlElement);
controlUI.id = controlId;
controlDiv.appendChild(controlUI);
google.maps.event.addDomListener(controlUI, event, function() {
response();
return false;
});
return controlUI;
}
$(document).ready(function() {
maplct.initialize(document.getElementById('mapDiv'));
var dateDiv = document.createElement('div');
dateSel = new CreateMapTopControl(dateDiv, "input", "dateId", maplct.mapObject, "change", getMapRoute);
dateDiv.index = 2;
maplct.mapObject.controls[google.maps.ControlPosition.TOP].push(dateDiv);
$(dateSel).attr("type", "text")
$(dateSel).attr("style", "height:15px;width:100px;");
var curDate = new Date();
var d = curDate.getUTCDate();
var dd = (d < 10) ? "0" + d : d;
var m = curDate.getUTCMonth() + 1;
var mm = (m < 10) ? "0" + m : m;
var YYYY = curDate.getUTCFullYear();
var formattedDate = YYYY + "-" + mm + "-" + dd;
$(dateSel).val(formattedDate);
$(dateSel).datepicker({dateFormat: 'yy-mm-dd'});
$(dateSel).datepicker( "refresh" );
});
Map is getting loaded at the end of the file, it looks like css is not applied.

Related

Jquery Clone method increment name tag

Hello I am trying to add increment in my all form fields from zero to the number whenever I add new clone it assigns the next number to the name tag, I tried all the ways but no any methods works for me.
Here is my fiddle
https://jsfiddle.net/o5wam5r2/
and here is my JS code
var formItem;
$(document).ready(function() {
//Clone and remove your div instead of hiding it
formItem = $('.ScheduleextraPartTemplate').clone();
$('.ScheduleextraPartTemplate').remove();
formItem.addClass('clone clone-1');
$('#Schedulecontainer').append(formItem);
});
$(document).on('click', '#ScheduleaddRow', function() {
var cloneForm = $('.clone').last().clone();
var cloneNum = $('.clone').length;
cloneForm.removeClass('clone-'+cloneNum).addClass('clone-' + (cloneNum+1));
var date = cloneForm.find('[name="txtSchedule"]').val();
cloneForm.find('[name="txtSchedule"]').val(addOneMonth(date));
$('#Schedulecontainer').append(cloneForm);
})
function addOneMonth(date) {
var year = parseInt(date.split("-")[0]);
var month = parseInt(date.split("-")[1]) + 1;
var day = parseInt(date.split("-")[2]);
if(month > 12) {
month = month - 12;
year++
}
return year + "-" + month + "-" + day;
}
I fixed it by changing a little piece of code
var formItem;
var counter = 0;
$(document).ready(function() {
//Clone and remove your div instead of hiding it
formItem = $('.ScheduleextraPartTemplate').clone();
formItem.find('[name^=txtSchedule]')[0].name = "txtSchedule" + counter;
formItem.find('[name^=txtScheduleAmountPay]')[0].name = "txtScheduleAmountPay" + counter;
$('.ScheduleextraPartTemplate').remove();
formItem.addClass('clone clone-1');
$('#Schedulecontainer').append(formItem);
});
$(document).on('click', '#ScheduleaddRow', function() {
var lens = counter++;
var cloneForm = $('.clone').last().clone();
var cloneNum = $('.clone').length;
cloneForm.removeClass('clone-'+cloneNum).addClass('clone-' + (cloneNum+1));
var date = cloneForm.find('[name^="txtSchedule"]').val();
cloneForm.find('[name^="txtSchedule"]').val(addOneMonth(date));
cloneForm.find('[name^=txtSchedule]')[0].name = "txtSchedule" + (lens+1);
cloneForm.find('[name^=txtScheduleAmountPay]')[0].name = "txtScheduleAmountPay" + (lens+1);
$('#Schedulecontainer').append(cloneForm);
})
function addOneMonth(date) {
var d = new Date( date );
d.setMonth( d.getMonth( ) + 1 );
return d.getFullYear() + '-' + ("0" + ((d.getMonth() + 1))).slice(-2) + '-' + ("0" + (d.getDate())).slice(-2);
}

Adding Google Calendar event end time to script

I have a script which lists Google Calendar events with the start time, name and description but I would like to have the end time too so it reads;
5:00pm - 6:00pm - Event title - event description
Rather than just what it has at the moment which is just the start time and not the end time.
This is the script I have:
$(document).ready(GCalEvents());
function GCalEvents() {
var datenow = new Date();
var curyear = datenow.getFullYear();
var curmonth = datenow.getMonth() + 1;
var curdate = datenow.getDate();
var curhour = datenow.getHours();
var curmin = datenow.getMinutes();
var curtz = datenow.getTimezoneOffset();
//curtz = -480;
var plusmin = "-";
if (curtz <= 0) {
plusmin = "%2B";
}
curtz = Math.abs(curtz);
var curtzmin = curtz % 60;
curtz = parseInt(curtz / 60);
if (curtzmin < 10) { curtzmin = "0" + curtzmin; }
if (curtz < 10) { curtz = "0" + curtz; }
datenow = curyear + "-" + curmonth + "-" + curdate + "T" + curhour + "%3A" + curmin + "%3A00" + plusmin + curtz + "%3A" + curtzmin;
var url = "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
// var url = "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
$.getJSON(url, function(data) {
var event_start_date_new = new Date();
event_start_date_new.setDate(event_start_date_new.getDate() - 1);
for(i in data['items']) {
item = data['items'][i];
// event title
var event_title = item.summary;
var event_description = item.description;
// event start date/time
var event_start_date = new Date(item.start.dateTime);
// format the date and time
var month = event_start_date.getMonth();
var day = event_start_date.getDay();
var date = event_start_date.getDate();
var daysArr = new Array();
daysArr[0] = "Sunday";
daysArr[1] = "Monday";
daysArr[2] = "Tuesday";
daysArr[3] = "Wednesday";
daysArr[4] = "Thursday";
daysArr[5] = "Friday";
daysArr[6] = "Saturday";
var monthsArr = new Array();
monthsArr[0] = "January";
monthsArr[1] = "February";
monthsArr[2] = "March";
monthsArr[3] = "April";
monthsArr[4] = "May";
monthsArr[5] = "June";
monthsArr[6] = "July";
monthsArr[7] = "August";
monthsArr[8] = "September";
monthsArr[9] = "October";
monthsArr[10] = "November";
monthsArr[11] = "December";
var hour = event_start_date.getHours();
var min = event_start_date.getMinutes();
if (min < 10) { min = "0" + min; }
if (hour < 11) {
var ampm = "am";
if (hour == 0) { hour = 12; }
} else {
var ampm = "pm";
if (hour > 12) { hour = hour - 12; }
}
if (hour < 10) { hour = " " + hour; }
var event_start_str = daysArr[day] + ", " + monthsArr[month] + " " + date;
var event_time_str = hour + ":" + min + " " + ampm;
if (event_start_date.getDate() != event_start_date_new.getDate()) {
event_start_str = "<div class=\"calendar_date\"><strong>" + event_start_str + "</strong></div>";
event_start_date_new = event_start_date;
} else {
event_start_str = "";
};
// Render the event
$("#gcal-events").last().before("<div class=\"calendar_item\"><li>" + event_time_str + " - " + event_title + "<p><small>" + event_description + "</small></p></ul>" + "</li></div>");
}
});
};
If anyone is able to help with that to reversion the current script, that would be great.
The Events resource returns start and end dates as well (JSON format that has date, dateTime, timeZone attributes).
Based on your code, you're not using the end attribute which is why you're not having any values for the end date displayed. Your code for the start date is alright, so you can just re-implement it for the end attribute.
Hope this helps!

Firefox addon could not convert to bootstrap

Below I have the code for xul addon which works expectedly.
i.e. shows username and password input at the browser startup and whenever the topic is http-on-examine-response it validates and write in specified file.
But when I try to convert it to a bootstrapped extension it won't even show the username password input at the browser startup and nothing is showing in the console when I compile and run.
I couldn't figure out the wrong thing after I changed the components... to Cu/Cc/etc.
I referred below links
https://developer.mozilla.org/en/Add-ons/Bootstrapped_extensions
What does paragraph about figuring out XUL elements mean in MDN document: "How to convert an overlay extension to restartless"
https://github.com/Noitidart/l10n/tree/xhtml-xul
Below is my code:
const {Cc, Ci, Cu, components} = require("chrome");
Cu.import('resource://gre/modules/XPCOMUtils.jsm');
function Tdatacounter() {
var Tdatacounter = {
observe: function(subject, topic, data) {
if (topic == "http-on-examine-response") {
var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
if (httpChannel.responseStatusText == "OK")
{
var buffer = httpChannel.URI.spec;
var pw = buffer.search("pub.tdata.com/releasepic");
if (pw > 0)
{
var date = new Date();
var TimeStamp = date.toLocaleString();
var pfum = buffer.search("flag=unmap");
if (pfum > 0 )
{
var flagname = "unmap";
var flagnum = 4;
}
if (flagnum > 0)
{
buffer += "^" + ThisUserName + "^" + ThisComputerName + "^" + TimeStamp + "^" + flagname + "\r\n";
fos.write(buffer, buffer.length);
}
}
}
}
}
};
var nsIEnvironment = Cc["#mozilla.org/process/environment;1"]
.getService(Ci.nsIEnvironment);
var prompts = Cc["#mozilla.org/embedcomp/prompt-service;1"]
.getService(Ci.nsIPromptService);
var usernamelist = ["user1","user2","user3"];
var passlist = ["e%cd1","kowgirl23","bhava1204"];
var ThisUserName = null;
var username = {value: "UserName"}; // default the username to user
var password = {value: "pass"}; // default the password to pass
var check = {value: false}; // default the checkbox to true
var GetUserName = prompts.promptUsernameAndPassword(null, "ProcName", "Enter username and password:", username, password, null, check);
while (GetUserName === true) {
var a = usernamelist.indexOf(username.value);
var b = passlist[a];
if (password.value == b) {
var ThisUserName = username.value;
break;
} else {
var GetUserName = prompts.promptUsernameAndPassword(null, "ProcName", "Enter username and password:", username, password, null, check);
}
}
if (ThisUserName !== null) {
var ThisComputerName = nsIEnvironment.get("ComputerName");
var FileUtils = Cu.import("resource://gre/modules/FileUtils.jsm").FileUtils;
var d = new Date();
var dd = d.getDate();
if (dd < 10)
dd = "0" + dd;
var mm = (d.getMonth()+1);
if (mm < 10)
mm = "0" + mm;
var yyyy = d.getFullYear();
var file = new FileUtils.File( "\\\\STJ\\Proc1\\-\\" + yyyy + "\\" + mm + "\\" + dd );
if (!file.exists()) {
file.create(file.DIRECTORY_TYPE, 0755);
}
var filename = "HM_" + ThisUserName + yyyy + "-" + mm + "-" + dd + ".txt";
file.append(filename);
var fos = Cc["#mozilla.org/network/file-output-stream;1"].createInstance(Ci.nsIFileOutputStream);
// PR_WRONLY | PR_CREATE_FILE | PR_APPEND
fos.init(file, 0x02 | 0x08 | 0x10, -1, 0);
var date = new Date();
var TimeStamp = date.toLocaleString();
var StartTime = "LoginTime=" + TimeStamp + " at " + ThisComputerName + "\r\n";
fos.write(StartTime, StartTime.length);
var observerService = Cc["#mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
observerService.addObserver(Tdatacounter, "http-on-examine-response", false);
}}
Tdatacounter.prototype.classID = components.ID('{d4a9bb50-b9b2-11e0-a4dd-0800200c9a66}');
Tdatacounter.prototype.classDescription = 'tdata Counter';
Tdatacounter.prototype.contractID = '#tdata/TdataCounter;1';
var NSGetFactory = XPCOMUtils.generateNSGetFactory([TdataCounter]);
I figured out what I've missed. As a beginner in firefox javascript, I missed to add 'register', 'unregister' functions. What a silly mistake I did? Phew. anyhow I hope this answer will be helpful for the novices like me.
Thank you.

FireFox Addon getElementById on http-on-examine-response didn't return any value

I am trying to get a value from an element in active page on http-on-examine-response. My below script works well as an addon without lines between
var tabs = require("sdk/tabs");
and
contentScript: contentScriptString
But when I add those lines it access the text file but doesn't write Anything. I can't see any error message in console because I don't use SDK because the new SDK uses complex things which I have to learn more on this. (For Now I just edit js file in components folder and update chrome.manifest and install.rdf if any and zip them then rename it as xpi and open it in firefox and it works well). I googled how to debug this script with which sdk and tried many scripts titled 'getelementbyid firefox addon' and had no luck. It would be helpful even if you say which sdk should use (a dumb question. But couldnt help myself).
Components.utils.import('resource://gre/modules/XPCOMUtils.jsm');
function GetCity() {
var GetCity = {
observe: function(subject, topic, data) {
if (topic == "http-on-examine-response") {
var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
if (httpChannel.responseStatusText == "OK")
{
var buffer = httpChannel.URI.spec;
var pw = buffer.search("mywebsite.com/release");
if (pw > 0)
{
var date = new Date();
var TimeStamp = date.toLocaleString();
var pfum = buffer.search("flag=release1");
if (pfum > 0 )
{
var flagname = "1";
var flagnum = 4;
}
var pfuk = buffer.search("flag=release2");
if (pfuk > 0 )
{
var flagname = "2";
var flagnum = "1";
}
var pfup = buffer.search("flag=release3");
if (pfup > 0 )
{
var flagname = "3";
var flagnum = 2;
}
var pfap = buffer.search("flag=release4");
if (pfap > 0 )
{
var flagname = "4";
var flagnum = 3;
}
if (flagnum > 0)
{
var tabs = require("sdk/tabs");
var contentScriptString = 'var cityname = document.getElementById("city").value ;'
tabs.activeTab.attach({
contentScript: contentScriptString
});
buffer += "^" + ThisUserName + "^" + ThisComputerName + "^" + TimeStamp + "^" + flagname + "\r\n";
fos.write(buffer, buffer.length);
}
}
}
}
}
};
var nsIEnvironment = Components.classes["#mozilla.org/process/environment;1"].getService(Components.interfaces.nsIEnvironment);
var ThisUserName = nsIEnvironment.get("UserName");
var ThisComputerName = nsIEnvironment.get("ComputerName");
var FileUtils = Components.utils.import("resource://gre/modules/FileUtils.jsm").FileUtils;
var d = new Date();
var dd = d.getDate();
if (dd < 10)
dd = "0" + dd;
var mm = (d.getMonth()+1);
if (mm < 10)
mm = "0" + mm;
var yyyy = d.getFullYear();
var file = new FileUtils.File( "T:\\-\\CityList\\" + yyyy + "\\" + mm + "\\" + dd );
if (!file.exists()) {
file.create(file.DIRECTORY_TYPE, 0755);
}
var filename = "HM_" + ThisUserName + yyyy + "-" + mm + "-" + dd + ".txt";
file.append(filename);
var fos = Components.classes["#mozilla.org/network/file-output-stream;1"]
.createInstance(Components.interfaces.nsIFileOutputStream);
// PR_WRONLY | PR_CREATE_FILE | PR_APPEND
fos.init(file, 0x02 | 0x08 | 0x10, -1, 0);
var observerService = Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.addObserver(HotelMappingCounter, "http-on-examine-response", false);
}
var NSGetFactory = XPCOMUtils.generateNSGetFactory([CityList]);

Unique ID that gets a date in specific format?

I have code that will generate a random unique id.. but is there a way I can edit this code so that it grabs a date in a specific way like yyyy-mm-dd-0001. the last 4 digits I want it to add 1 each time the generateid button is clicked. so it will change to 0002. Here is the current code I have. Is there a function that can grab the date automatically?
var counter = 0000;
function Counter() {
if((document.getElementById("generateid").clicked == true)
{
Counter++
return counter;
}
}
function Month() {
var m = new Date();
var mm = m.getMonth() + 1;
if (mm < 10) {
mm = '0' + mm;
return mm;
}
}
function Year() {
var y = new Date();
var yy = y.getFullYear();
return yy;
}
function Day() {
var d = new Date();
var dd = d.getDate();
return dd;
}
//generate id
function guidGenerator() {
var theID = (Year() + "-" + Month() + "-" + Day() + "-" + Counter);
return theID;
}
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + guidGenerator();
document.getElementById("generateid").disabled = true;
}
You can use the following object:
var idGenerator = {
seq: 0,
generateId: function () {
this.seq++;
return (new Date()).toISOString().substring(0, 10) + '-' + ('000' + this.seq).substr(-4)
}
}
after declaration like this, try
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + idGenerator.generateId();
document.getElementById("generateid").disabled=true;
}
If you are asking for a way to keep track of how many times an ID is generated by all your site visitors using javascript alone then, no it is not possible without tying in some back end to keep track. However, the following code will do what you ask per visitor.
jsfiddle
var ttlIds = 0;
function guidGenerator() {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + S4());
}
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + guidGenerator().toString().toUpperCase();
//document.getElementById("generateid").disabled=true;
ttlIds++;
if(ttlIds < 10){
ttlIds_formatted = '000'+ttlIds;
}else if(ttlIds < 100){
ttlIds_formatted = '00'+ttlIds;
}else if(ttlIds < 1000){
ttlIds_formatted = '0'+ttlIds;
}
d = new Date();
var funkydate = d.getFullYear() +'-' + (d.getMonth()+1) + '-' + d.getDate() + '-' + ttlIds_formatted;
document.getElementById("funkydate").value = funkydate;
}

Categories

Resources