When the user click on the Reset button, it clears the input box but it does NOT reset to today's date. Instead it disable the date range, which I do not want. How do do I get it so that all the dates show up again? Just like in the beginning.
I tried doing this. Clear the data and then refresh it but it still doesn't work.
$( "#to").datepicker('setDate', null);
$( "#to" ).datepicker( "refresh" );
Here's my code:
http://plnkr.co/edit/seX4mgOGAeKDZRGTJCWx?p=preview
OR
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
numberOfMonths: 2,
minDate: 0,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
function clearData(){
$( "#to").datepicker('setDate', null);
$( "#from").datepicker('setDate', null);
$( "#to" ).datepicker( "refresh" );
$( "#from" ).datepicker( "refresh" );
}
</script>
</head>
<body>
Departure <input type="text" id="from" name="from">
Arrival <input type="text" id="to" name="to"><br><br>
<button type="button" onclick="clearData()">Reset</button>
</body>
</html>
call jQuery change method on form and to date Id attributes.
$( "#to" ).change();
$( "#from" ).change();
Related
Nothing handled the action error occurs for the following code. How to resolve this?
I have created a view, an object for my sample app using ember. But the action part is not working.
How to bind an action to a view?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<ul class="mod-choosable-list">
{{view Ember.CollectionView
contentBinding="App.teachersController"
itemViewClass="App.TeacherView"
tagName="div"
}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="teacher-view">
<div {{action 'refresh'}}><b>{{view.content.name}}</b></div>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
App = Ember.Application.create({});
App.Teacher = Ember.ObjectController.extend({
id: null,
name: null,
students: null,
actions: {
refresh: function(){
alert("refresh");
}
}
});
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view'
});
App.set('teachersController', Ember.ArrayController.create({
content: [
App.Teacher.create({id:1, name: "mr.katz", students: [2, 3]}),
App.Teacher.create({id:2, name: "mr.dale", students: [1]})
]
}));
When you trigger the action refresh, ember will look for the action in the controller. Since you have not specified a controller for the view, the controller for the application template will be used which is App.ApplicationController.
You can use the following code and your action will trigger.
App.ApplicationController = Em.Controller.extend({
actions: {
refresh: function(){
alert("refresh");
}
}
});
You can specify the actions in the view too. In that case you will need to specify the target for the action. This will tell ember where to look for the action handler.
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view',
actions: {
refresh: function(){
alert("refresh");
}
}
});
<div {{action 'refresh' target="view"}}><b>{{view.content.name}}</b></div>
You can specify a controller for view on its init event.
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view',
setup:function() {
this.set('controller', App.Teacher.create());
}.on('init')
});
I am new in Ember and trying to create a simple application based on the tutorial provided by Ember website and videos.
In the sample below I would like to display two tabs Tab1 and Tab2; when switching to Tab1 it should have "Jan" and "Feb"; when switching to Tab2 it should have "Mar" and "Apr". I can switch between tabs but there is no content in any of them, there are no errors in the console.
Please help me understand why the tab content is empty.
Thanks!
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember test</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no- icons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>{{#link-to 'tab1'}}Tab1{{/link-to}}</li>
<li>{{#link-to 'tab2'}}Tab2{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="tab1">
<p>{{field1}}</p>
<p>{{field2}}</p>
</script>
<script type="text/x-handlebars" id="tab2">
<p>{{field3}}</p>
<p>{{field4}}</p>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is app.js
App = Ember.Application.create();
var tab1 = {
field1: "Jan",
field2: "Feb"
};
var tab2 = {
field3: "Mar",
field4: "Apr"
};
App.Router.map(function() {
this.resource('tab1');
this.resource('tab2');
});
App.tab1Route = Ember.Route.extend({
model: function() {
return tab1;
}
});
App.tab2Route = Ember.Route.extend({
model: function() {
return tab2;
}
});
Ember conventions mandate the name of the classes for your routes. Your Route classes must be named App.Tab1Route and App.Tab2Route, not App.tab1Route and App.tab2Route. The case of the class names is important.
The rest of your code seems fine!
app.js
App = Em.Application.create();
App.IndexRoute = Em.Route.extend({
model: function(){
return {
newTasks: Em.A([
{id: 1, name: "Task 1"},
{id: 2, name: "Task 2"},
{id: 3, name: "Task 3"}
]),
inProgressTasks: Em.A([
{id: 4, name: "Task 4"},
{id: 5, name: "Task 5"}
]),
doneTasks: Em.A([
{id: 6, name: "Task 6"}
])
};
}
});
App.IndexController = Em.Controller.extend({
actions: {
moveTask: function(taskID, from, to){
var model = this.get('model');
var task = model[from].findProperty('id', parseInt(taskID, 10));
model[to].pushObject(task);
model[from].removeObject(task);
}
}
});
App.TaskContainerComponent = Em.Component.extend({
classNames: ['col-xs-4', 'taskContainer'],
isOverdrop: false,
classNameBindings: ['isOverdrop:isOverdrop'],
setOverdropIfNotOriginator: function(event, valueToSet){
var data = JSON.parse(event.dataTransfer.getData('text/data'));
if(data.stage !== this.get('stage')) {
this.set('isOverdrop', valueToSet);
}
},
dragEnter: function(event) {
this.setOverdropIfNotOriginator(event, true);
},
dragLeave: function(event){
this.setOverdropIfNotOriginator(event, false);
},
dragOver: function(event){
this.setOverdropIfNotOriginator(event, true);
event.preventDefault();
},
drop: function(event) {
var data = JSON.parse(event.dataTransfer.getData('text/data'));
if(data.stage === this.get('stage')) return;
// from: data.stage, to: this.get('stage')
this.sendAction('action', data.id, data.stage, this.get('stage'));
this.set('isOverdrop', false);
}
});
App.DragTaskComponent = Em.Component.extend({
dragStart: function(event) {
var data = { id: this.get('task.id'), stage: this.get('stage')};
event.dataTransfer.setData('text/data', JSON.stringify(data));
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mini Scrumboard</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<div class="contents">
<div class="row">
{{ task-container containerTitle="New" stage="newTasks" tasks=model.newTasks
action="moveTask" on="drop"}}
{{ task-container containerTitle="In Progress" stage="inProgressTasks"
tasks=model.inProgressTasks action="moveTask" on="drop" }}
{{ task-container containerTitle="Done" stage="doneTasks" tasks=model.doneTasks
action="moveTask" on="drop" }}
</div>
<br>
<br>
</div>
</script>
<!-- Properties: task, stage -->
<script type="text/x-handlebars" id="components/drag-task">
<div class="task" draggable="true">
{{task.name}}
</div>
</script>
<!-- Properties: containerTitle, stage, tasks -->
<script type="text/x-handlebars" id="components/task-container">
<h3>{{containerTitle}}</h3>
{{#each task in tasks}}
{{drag-task task=task stage=stage}}
{{/each}}
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
I have this working perfectly fine on my local box, but it is errorring out on jsbin.
http://emberjs.jsbin.com/movex/4/edit?html,css,js,output
I am guessing that the issue has to do with parsing the output from the drag and drop, but have no clue where to go with this.
Any help would be greatly appreciated...
UPDATE: The JSBin version even works fine on the FF on the Mac, but not on Safari or Chrome... :(
The reason it was not working is because of the very unexpected way that the drag and drop specifications work. The problem is that in the drag, dragEnter, dragLeave, dragOver and dragEnd events the dragTransfer data is in protected mode. Which again according to the spec means.
the data itself is unavailable and no new data can be added.
It seems as though Mozilla exercised some common sense and didn't implement drag and drop in compliance with the spec. Which explains why it was working in Firefox for you, but nowhere else.
To get your jsbin working I added a theData element to your index controller and did the setting and getting of the JSON values against that.
Here is the working version. http://emberjs.jsbin.com/dasonona/1/edit
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>list</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>var split="Grand Hotel,Promenade,Southend,Postcode".split(',');
var hotel=split[0];
var street=split[1];
var town=split[2];
var postcode=split[3]
</script>
</script>
<script>var split="Imperial Hotel,Main St,Dundee,Postcode".split(',');
var hotel=split[0];
var street=split[1];
var town=split[2];
var postcode=split[3]
</script>
<script>
$(document).ready(function () {
$('li').click(function () {
console.log($(this).text());
$('#hotel').val($(this).text());
});
}
);
</script>
<style>
.ui-menu { width: 250px; }
</style>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 250px; }
</style>
</head>
</body>
<body>
<div id="locationselect">
<ul>
<li>Grand Hotel,Promenade,Southend,Postcode</li>
<p>
<li>Imperial Hotel,Main St,Dundee,Postcode</li>
<p>
</ul>
</div>
<input type="text" id="split[0]"/>
<p>
<input type="text" id="split[1]"/>
<p>
<input type="text" id="split[2]"/>
<p>
<input type="text" id="split[3]"/>
<p>
</body>
</html>
I knew nothing about coding until I joined a coarse two weeks ago and have got a bit ahead of myself lol but i'm really enjoying the problem solving in working things out, i've got far too much time on my hands. I'm trying to work out a way of selecting and splitting a static list and then passing this into seperate textboxes. Any help would be very much appreciated, I have looked and as far as I can tell i'm the first to ask this specific question, woo hoo!!
<script>
$(document).ready(function () {
$('.selectableItem').click(function () {
//alert('txt=' + $(this).text());
var selected = $(this).text().split(",");
console.log(selected);
$('#location').val(selected[0]);
$('#location2').val(selected[1]);
$('#location3').val(selected[2]);
$('#location4').val(selected[3]);
});
}
);
</script>
I have jQuery Datepicker on my page. When I am selecting value its not working at the same time its added # on URL. I am not understanding this problem. I have done it as follow,
$("#AsOfDate").datepicker({
minDate: new Date(1900, 01, 01),
maxDate: new Date(),
changeMonth: true,
changeYear: true,
});
Anyone having idea about it.
Try this
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#AsOfDate").datepicker({
dateFormat: 'yy-mm-dd',
yearRange: '1900:2012',
monthRange: '01:12',
minDate: new Date('1900/01/01'),
maxDate: '+30Y,
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="AsOfDate" /></p>
</body>
</html>
make sure jQuery and Jquery Ui are loading correctly, try loading it from the CDN.