I have a datapicker of jqueryUI:
<div class="span4">
<label>Start Date; </label>
<input type="text" name="sDate" id="datepicker1" ng-model="item.date.sDate" class="ng-pristine ng-valid hasDatepicker">
<label>End Date; </label>
<input type="text" name="eDate" id="datepicker2" ng-model="item.date.eDate" class="ng-pristine ng-valid hasDatepicker">
<br> <br>
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>
The datepicker is working fine, but when i click Next button which trigger the add function, I cannot get item.date.eDate value...
I've just been trying the same thing, and found that I didn't actually need to use a directive, just this code...
$.datepicker.setDefaults({
// When a date is selected from the picker
onSelect: function(newValue) {
if (window.angular && angular.element)
// Update the angular model
angular.element(this).controller("ngModel").$setViewValue(newValue);
}
});
Just place it prior to your .datepicker() initialisation code.
AngularJS and jQuery don't work too well together. You need to use a directive. Here's a quick sample app version I created for you:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function putObject(path, object, value) {
var modelPath = path.split(".");
function fill(object, elements, depth, value) {
var hasNext = ((depth + 1) < elements.length);
if(depth < elements.length && hasNext) {
if(!object.hasOwnProperty(modelPath[depth])) {
object[modelPath[depth]] = {};
}
fill(object[modelPath[depth]], elements, ++depth, value);
} else {
object[modelPath[depth]] = value;
}
}
fill(object, modelPath, 0, value);
}
var directives = angular.module('myApp', []);
directives.directive('datepicker', function() {
return function(scope, element, attrs) {
element.datepicker({
inline: true,
dateFormat: 'dd.mm.yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
putObject(modelPath, scope, dateText);
scope.$apply();
}
});
}
});
function myCtrl($scope) {
$scope.item = ""
$scope.add = function() {
$scope.$apply()
alert($scope.item)
}
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{item}}
<p>Date: <input type="text" datepicker id="datepicker" ng-model="item" /></p>
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>
<br />
</div>
</body>
</html>
Check out http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html for a a more thorough explanation.
just need to replace this element.datepicker({ to $(element).datepicker({
directives.directive('datepicker', function() {
return function(scope, element, attrs) {
$(element).datepicker({
inline: true,
dateFormat: 'dd.mm.yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
putObject(modelPath, scope, dateText);
scope.$apply();
}
});
}
});
Actually turns out you don't have to make any inline directive or play around with the $.datepicker.
Only helpful i came up with was to get the value of datepicker element not by the ng-model directive.
suppose you have 3 inputs, first name, last name and date of birth. the date of birth input contains the jquery ui datepicker.
get the value of first name and last name input by ng-model directive< BUT to get the value of date of birth, just use jquery .val() function.
Related
I am using jquerymobile 1.4.2.This the code which i am using in my page
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
</head>
<body>
<script>
function myFunction()
{
document.getElementById("myText").disabled=true;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText">
</body>
</html>
The above program works fine But if i change that to this code
<script>
function myFunction()
{
document.getElementById("myText").disabled=false;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText" disabled="disabled">
Then its not working please help me how to make text field enable using onchange() function
jQM enhances the input and creates a Textinput widget which has its own enable/disable methods (http://api.jquerymobile.com/textinput/#method-disable)
In your example, to enable the input:
function myFunction() {
$("#myText").textinput("enable");
}
Also, you should use unobtrusive javascript and the jQM page functions. e.g. remove the onclick from the markup:
<select id="theSelect" >
<option>1</option>
<option>2</option>
</select>First Name:
<input type="text" id="myText" disabled="disabled" />
Add the handler in the pagecreate jQM event:
function myFunction(selVal) {
if (selVal == '2'){
$("#myText").textinput("enable");
} else {
$("#myText").textinput("disable");
}
}
$(document).on("pagecreate", "#page1", function () {
$("#theSelect").on("change", function(){
var v = $(this).val();
myFunction(v);
});
});
Here is a DEMO
i have started to work on ember.js just day before.
i don't know how to get text box value while submitting. i have tried like this
this is html
<script type="text/x-handlebars" data-template-name="index">
<div >
<p>{{view Ember.TextField valueBinding="fname"}}</p>
</div>
<div>
<p>{{view Ember.TextField valueBinding="lname"}}</p>
</div>
<button {{action save}}>submit</button>
</script>
this is my ember.js file
App = Ember.Application.create();
App.IndexController = Ember.ObjectController.extend({
save:function()
{
var fname=this.get('fname');
var lname=this.get('lname');
alert(fname+','+lname);
}
});
whenever i am clicking on submit button, i am getting undefined in alert.so how to get value? i hope anyone will help me for to continue in ember.js
in js like this
App.WebFormController = Ember.Controller.extend({
fname: null,
lname: null,
save: function () {
var fname = this.get('fname');
var lname = this.get('lname');
alert(fname + ',' + lname);
}
});
without need a model
in template like this
<script type="text/x-handlebars" data-template-name="web_form">
<form {{action save on="submit"}}>
<div >
<p>{{input type="text" valueBinding="fname"}}</p>
</div>
<div>
<p>{{input type="text" valueBinding="lname"}}</p>
</div>
<button>submit</button>
</form>
</script>
Your problem is that your form doesn't have a model. You can provide it using model or setupController hook.
App.IndexRoute = Ember.Route.extend({
model: function() {
return {};
},
// or
setupController: function(controller) {
controller.set('model', {});
}
});
In addition some tips:
Use the action name on="submit" in the form, instead of action name in submit button. So you can execute the action when the user press enter key, in input.
And the input type="text" helper is a shortcut for view Ember.TextField
<script type="text/x-handlebars" data-template-name="index">
<form {{action save on="submit"}}>
<div >
<p>{{input type="text" valueBinding="fname"}}</p>
</div>
<div>
<p>{{input type="text" valueBinding="lname"}}</p>
</div>
<button>submit</button>
<form>
</script>
Here a live demo
That is really nice tutorial by mavilein.
We can do it at controller level also.
App.IndexController = Ember.ObjectController.extend({
content:function(){
return {fname:null,lname:null}
}.property(),
save:function()
{
var fname=this.get('fname');
var lname=this.get('lname');
alert(fname+','+lname);
}
});
Or we can do it
App.IndexController = Ember.ObjectController.extend({
fname:null,
lname:null,
save:function()
{
var fname=this.get('fname');
var lname=this.get('lname');
alert(fname+','+lname);
}
});
Below code is working for me:
cshtml: In script on tag specify data-template-name="text"
<script type="text/x-handlebars" data-template-name="text">
{{view Ember.TextField value=view.message}}
{{view Ember.TextField value=view.specy}}
{{textarea value=view.desc id="catdesc" valueBinding="categor" cols="20" rows="6"}}
<button type="submit" {{action "submit" target=view}}>Done</button>
</script>
app.js:
App.TextView = Ember.View.extend({
templateName: 'text',
message:'',
specy: '',
desc:'',
actions: {
submit: function (event) {
var value = this.get('specy');
var spc = this.get('message');
var de = this.get('desc');
}
}
});
I was trying to load Datepicker so that I can later add the value to json request. But it seems that I can't even load the calender in textbox. Idea is to get input date and request it in json.
Well I could mention that without datepicker function it was working fine.
// Portlet JSP in Liferay
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<portlet:resourceURL var="resourceURL">
</portlet:resourceURL>
<portlet:defineObjects />
// jQuery UI sources
<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>
// Jquery and Ajax Source
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
// JS Function
<script>
$(document).ready(function() {
// Load Date Picker in input box But not working
$( "#datepicker" ).datepicker();
$("#btn").click(function() {
$.ajax({
// Reso
url : '${resourceURL}',
data : {
"PersonID" : $('#PersonID').val(),
"AnotherD" : 2
},//person id to sent, In place of Anotherd I want to add Datevalue
type : 'POST',
dataType : "json",
success : function(data) {
console.log(data);
//Getting Data in return
var x = data.PersonList[1].PersonWeight;
$("#Results").text(x);
$("#Res").text(data.PersonList[1].PersonTemp);
}
});
});
});
</script>
<body>
// Out Put Data
PersonID:
<input type="text" name="PersonID" id="PersonID">
<br>
// Date Picker Textbox
<br>
<p>
Date: <input type="text" id="datepicker" />
</p>
// Refresh Button
<button id="btn">Refresh</button>
<br>Height :
<p id="Results"></p>
<br> Weight:
<p id="Res"></p>
</body>
But its not working, any suggestions?
Remove this line. I think jQuery conflicts is occurring in your case
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
HTH
I'm trying to update an array from a textArea, each line of which would be a new item.
Here is what I tried to do, but the textArea doesn't update the array:
Handlebars:
<script type="text/x-handlebars">
{{view Ember.TextArea valueBinding="App.listController.formattedContent"}}
</br>
{{#each App.listController}}
{{this}}
{{/each}}
</script>
JavaScript:
App = Ember.Application.create({});
App.listController = Ember.ArrayController.create({
content: ['some', 'items', 'in', 'an', 'array'],
formattedContent: function() {
return this.get('content').join('\n');
}.property('content')
});
and the jsFiddle
I know it can't be that simple, but I have no idea where to start.
Any idea?
Here you go:
Fiddle: http://jsfiddle.net/Sd3zp
Ember Controller:
App.listController = Ember.ArrayController.create({
content: ['some', 'items', 'in', 'an', 'array'],
init: function() {
var content = this.get('content');
if(content.length > 0){
this.set('rawContent', content.join('\n'));
}
this._super();
},
rawContentDidChange: function(){
var rawContent = this.get('rawContent');
var content = rawContent.split('\n');
this.set('content',content);
}.observes('rawContent'),
});
Handlebars template:
<script type="text/x-handlebars">
{{view Ember.TextArea valueBinding="App.listController.rawContent" rows="5"}}
<br />
<br />
<strong>Output listController content items:</strong>
{{#each App.listController.content}}
{{this}} <br />
{{/each}}
</script>
The accepted answer doesn't work with ember-1.0.0-rc3.
Computed properties can have setters now so the example in the question would be changed to
JS Bin: http://jsbin.com/iworub/2/
Handlebars:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{view Ember.TextArea valueBinding="formattedContent" rows="7"}}
</br>
{{#each content}}
{{this}}</br>
{{/each}}
</script>
JavaScript:
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['some', 'items', 'in', 'an', 'array']);
}
});
App.IndexController = Ember.ArrayController.extend({
formattedContent: function(key, value) {
//getter
if (arguments.length === 1) {
return this.get('content').join('\n');
//setter
} else {
this.set('content', value.split('\n'));
}
}.property('content')
});
I want to allow editing list items in a selectable / sortable list.
Here is a list example:
http://jsbin.com/aweyo5
credits to rdworth
So I would we go about allowing the user to edit items? I know how to update/change their text but how I do I got about allowing the user to input text directly into the list item?
Here is a working answer :
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function makeEditable()
{
$('.editable').editable(function(value, settings)
{
/* Debug
console.log(this);
console.log(value);
console.log(settings);
*/
return(value);
});
}
function makeDeletable()
{
$('a.delete').click(function(e)
{
e.preventDefault();
$(this).parent().remove();
});
}
function addTopic(topicName)
{
$("ul.#topics").append('<li><span class="editable">' + topicName +'</span><a class="delete" href="">delete</a></li>');
makeEditable();
makeDeletable();
}
makeEditable();
makeDeletable();
$( "#topics" ).sortable();
$("form").submit(function() {
addTopic($('input[name=topic]').val());
return false;
});
$('a#add').click(function(e)
{
e.preventDefault();
addTopic($('input[name=topic]').val());
});
});
</script>
<ul id="topics">
<li><span class="editable">topic 1</span><a class="delete" href="">delete</a></li>
<li><span class="editable">topic 2</span><a class="delete" href="">delete</a></li>
<li><span class="editable">topic 3</span><a class="delete" href="">delete</a></li>
</ul>
<form>
New topic: <input type="text" name="topic" /><br />
</form>
<a id="add" href="">add</a>
Hope it helps :)
You can get jeditable here:
http://www.appelsiini.net/projects/jeditable