JQuery UI Datepicker not functioning - javascript

I am running into an issue where I feel as though I have everything set up correctly; but, no matter what, the JQuery UI Datepicker will not show up.
I have the following set up in my header (Angular project, header is always loaded no matter the route):
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
As well as this
<script type="text/javascript">
$(function() {
var nativeDateInputIsSupported = Modernizr.inputtypes.date;
if (!nativeDateInputIsSupported) {
$("input[type='date']").datepicker();
}
});
</script>
However when I am in Firefox and click on the following, nothing happens
<tr ng-repeat="revenue in runway.revenues">
<!-- Other table elements go here -->
<td>
<input type="date" id="date" max="{{maxDate}}" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" required/> </td>
<td>
It also does not show up here
<input type="date" class="form-control" ng-model="user.startofbusiness" name="startofbusiness" id="startofbusiness" required>
I've checked many different StackOverflow threads but even when I follow the methodologies put forth by them, I can't get it to cooperate.
Any tips would be greatly appreciated!

As it turns out, this was implemented correctly, and is actually working. The issue was with regards to having used ng-repeat to generate the table's information dynamically. I am addressing this by writing a custom directive to handle the datepicker.

Related

Why JSColor is not initializing on input?

I'm trying to integrate jscolor in a page but it's not working
Input:
<input type="text" id="background_color" name="background_color" class="jscolor" placeholder="Background Color" data-bind="value: background_color">
JSColor CDN Link:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/color-js/1.0.1/color.min.js"></script>
I'm not getting any errors in console! When I click the input field it doesn't show the color picker!
Snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-js/1.0.1/color.min.js"></script>
<input type="text" id="background_color" name="background_color" class="jscolor" placeholder="Background Color" data-bind="value: background_color">
UPDATE:
The problem was in the src url I was using for js-color library. From the answer below I got the correct URL!
After some searching, I found a different URL that makes it work:
src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"
I assume this is fine, unless you really want to specifically use that version/library, though I'm not sure if your URL is JSColor or some different library.

Trouble understanding DatePicker for Phonegap

Need help implementing this DatePicker plugin for Phonegap. Maybe I'm missing something here, but I am totally lost as to what to do after adding the plugin to my project via CLI. The documented "usage" is not helping me out whatsoever.
With the following example html, what should be added for its hook?
<form>
<label for="user_name">Name</label>
<input name="user_name" type="text" id="user_name" placeholder="Name" />
<!-- what here?? -->
<input type="submit" value="Register" />
</form>
And using jQuery, how would I initialize it?
Repository: https://github.com/nicholasareed/cordova-plugin-datepicker/tree/007feae6393d7022af51d9a60055f7de4dd89e54
Thank you in advance for any information helping me resolve this.
All modern phones (Android / iPhone) have support for the HTML5 input types. This will trigger the native date-selection. No need for complex datepicker-jquery-javascript magic anymore. Just try this:
<input type="date" name="mydate" />
And click the textfield on your phone.
You probably have to add servicing of your input. Usually you do it in separate *.js file.
Create test.js file in your project's www catalog and add it to youd index.html head section:
<html>
<head>
...
<script type="text/javascript" src="path-to-test/test.js">
</head>
<body>
...
</body>
In your test.js file add datePicker configuration:
var options = {
date: new Date(),
mode: 'date'
};
and onClick event handler (jQuerMobile example):
$('#idButton').on('click',function(){
// show picker
datePicker.show(options, function(date){
//get result
alert("date result " + date);
});
});

bad javascript? hello bar solo only working on homepage - no other pages

I'm running a bigcommerce store and have the hello bar solo custom code installed in the site footer. I've also tried placement of the hellobar code in various spots (header template files, default template files, page specific template files). For some reason the hello-bar only works on my homepage, but never on any of the other pages.
Any ideas as to why? Seems like if i place this in the footer it should show up on every pages but that's not what i'm getting. please let me know if you need more details or code samples to help.
thanks
btw, bigcommerce support also thinks that the hellobar should show up on every page if i have this code in the footer, but its not working. my guess is that it's the javascript but I dont know my way around that.
Here's the code I'm using:
<div id="mailchimp_form" style="display:none;">
<form action="http://xxxxx.us5.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="xxxxxxxx">
<input type="hidden" name="id" value="xxxxx">
Get an instant coupon code by signing up to our newsletter. Email: <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" />
<input class="button" type="submit" value="Subscribe" />
</form>
</div>
<!-- Hello Bar configuration start -->
<script type="text/javascript">
var mailChimpForm = document.getElementById('mailchimp_form').innerHTML;
new HelloBar( mailChimpForm, {
showWait: 1000,
positioning: 'sticky',
fonts: 'Arial, Helvetica, sans-serif',
forgetful: true
}, 1.0 );
</script>
And here are the references that I've placed in the header:
<link type="text/css" rel="stylesheet" href="content/hellobar.css" />
<script type="text/javascript" src="content/hellobar.js"></script>
No idea what bigcommerce is, but judging from what you supplied I am guessing one of two reasons.
There is no 'mailchimp_form' div except on your homepage.
Javascript, for some weird reason, does get executed before 'mailchimp_form' div gets loaded on all other pages.

HTML5 localStorage populate form onload

I am following the example in the O'Reilly "Building iPhone Apps with HTML, CSS and Javascript," I want the values entered from a form to populate after the app closes and reloads, similar to a php 'sticky form.'
The only aspects I changed from the example is that saveSettings is called on submit, and here I have it called on unload (previously on input blur).
Load settings is called on document ready rather than submit.
pageInit is not working though I have jquery mobile installed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$(document).ready(function(){
$(window).unload(saveSettings);
loadSettings();
});
function loadSettings() {
$('#monthly-income').val(localStorage.income);
$('#saving-per-month').val(localStorage.saving);
$('#current-age').val(localStorage.age);
}
function saveSettings() {
localStorage.age = $('#current-age').val();
localStorage.saving = $('#saving-per-month').val();
localStorage.income = $('#monthly-income').val();
}
</script>
</head>
<body>
<div data-role="content">
<div data-type="horizontal" data-role="controlgroup">
Input
Output
</div>
<input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>
<input type="number" min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>
<input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>
</body>
</html>
1) You could place your page in internet, at best providing QR code to fast load on mobile (free QR generator here), so everyone could easily test
2) Did the browser settings require to grant the domain the rights to store values in local storage? If so, onunload there's no place to accept such request. Place in your ready function one storage instruction to test
3) unload is a bit unreliable (example - browser crash). Have you considered saving values on onblur on inputs? When in large textareas, saving the value in timer, even if user is still editing, is practicised.
4) This question considers also problems with unload function. Maybe future answer to this question will solve your problem?

Debugging Django

This is a newbie question. I am having difficulty adding a calandar widget into my form using the Dynarch calendar widget. My example is derived from the from the popup example at: http://www.dynarch.com/projects/calendar/doc/ .
When I click the button, the calendar doesn't show up. Instead the page refreshes. I can't tell what is happening here. I have no idea if this trigger is even getting called correctly.
My server is receiving a post command. No post should be getting called here. I don't want any data to be posted, just the calendar trigger to make the calendar visible. This should just load the button.
How can I get to the bottom of what is really happening here? Advice?
<!--- If I look at what's loaded in firebug, the scripts load correctly -->
<link rel="stylesheet" type="text/css" href="/site_media/css/gold/gold.css" />
<script type="text/javascript" src="/site_media/js/jscal2.js"></script>
<script type="text/javascript" src="/site_media/js/en.js"></script>
<form accept-charset="utf-8" method="post" action="" id="edit_activity_form">
<table>
<tr><th>Date:</th>
<td> <input type="text" id="id_activity_date" name="activity_date">
<!-- When I click this button. The calendar does not appear. Instead I get a page refresh. -->
<button id="calendar-trigger">...</button>
<script type="text/javascript">
Calendar.setup({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script></td>
</td>
</table>
<input type="submit" onclick="send_activity_form();return false;" value="save" id="activity_save">
</form>
I don't see the function send_activity_form() defined anywhere.
Your onclick may be calling a nonexistent function.

Categories