I want to refresh my page when I finish choosing the selects in jquerymobile.Now Im using the onchange attribute in tag.here's my code.
<div data-role="fieldcontain" style = "background-color:white;border-bottom:1px solid #ccc">
<label for="select-choice-1" class="select">select specity:</label>
<select name="select-choice-1" id="select-choice-1" data-native-menu = false multiple=true onchange = "selectChange()"></select>
</div>
$("#select-choice-1").empty();
for (var i = 0; i < item.tagClassList.length; i++) {
if (item.tagClassList[i].isSelected) {
$("#select-choice-1").append("<option value="+item.tagClassList[i].id+"checked = true>"+item.tagClassList[i].className+"</option>");
} else {
$("#select-choice-1").append("<option value="+item.tagClassList[i].id+">"+item.tagClassList[i].className+"</option>");
}
if (i == item.tagClassList.length-1) {
$("#select-choice-1").selectmenu("refresh");
};
};
But the selectmenu() event fires whenever select is selected or selected is cancelled.How can I get the event fires when the selectmenu is closed
try binding to blur() like so
$('document').on('blur', '#select-choice-1', function(){
//run your check here
});
this also takes care of older versions of ios which seem to not fire change events on multiple selects.
Related
I just started using knockout js. I am creating group of images using foreach binding of knockout js. Initially all the images have same css class "imageUnvisited" and I am trying to change and set the class(permanently) of the particular image that I click to show the visited state. I am successful in changing the class on click event but as soon as I click on another image, the new added class of the previously clicked image gets remove. I am new it the IT filed so pardon me if you find anything wrong, please help.
Below is the code that I am using:
var vm = {
item: jsonData.items,
clickedImageIndex: ko.observable('')
}
ko.applyBindings(vm);
function getVisitedClass(data, index) {
if (index() == vm.clickedImageIndex()) {
return "imageVisited"
}
}
function imageClicked(data, e) {
var itemTarget = e.target || e.srcElement;
index = ko.contextFor(itemTarget).$index();
vm.clickedImageIndex(index);
}
.imageUnvisited {
border: solid 1px green;
}
.imageVisited {
border: solid 1px black;
}
<div data-bind="foreach: item" id="image_gallery">
<div id="image_wrapper">
<image data-bind="attr: { id: 'image' + $index(), src: $data.Src, class: getVisitedClass($data, $index)},click: imageClicked" class="imageUnvisited" role="button"></image>
</div>
</div>
Why your current code doesn't work:
You're storing one index in clickedImageIndex which is updated on every click. Therefore, the expression index() == vm.clickedImageIndex() can only be true for one image at a time.
A "quick fix":
Instead of storing an index in clickedImageIndex, you can store multiple inside an object.
In your vm:
clickedImageIndex: ko.observable({})
In your handler:
var clicked = vm.clickedImageIndex();
clicked[index] = true;
vm.clickedImageIndex(clicked);
In your getVisitedClass:
if (vm.clickedImageIndex()[index()]) {
return "imageVisited"
}
A better fix:
It's probably a good idea to follow knockouts MVVM architecture a bit stricter... This means:
Map your images to ImageViewModel instances
Add a clicked observable property to ImageViewModel
Add a ImageViewModel.prototype.onClick method that sets this.clicked(true)
Use the data-bind="click: onClick, css: { 'imageVisited': clicked }" data-bind to update state.
I want to check my angular form validity with a little tweak,
I have a form builded dynamically with directives involved, Now the form has more than one page to it, so i play with ng-hide/ng-show when i move from page to page...
All i want to do is to check the validity of the first chunk of form inputs, for example:
I have 3 pages, 3 questions in every 'page', before the user can go to the next page, it should check for validation on the three inputs, and only than! he can move to the next one...
on my form tag i have 'novalidate' so i must do all the validations myself...
What you're after is ng-form
You can't nest HTML <form></form> tags but you can with ng-form to split your form into sections.
i.e.
<form name="myForm">
<ng-form name="subForm1">
<input name="txtField1" type="text" ng-model="Field1" ng-maxlength="50" required>
</ng-form>
<ng-form name="subForm2">
<input name="txtField2" type="text" ng-model="Field2" ng-maxlength="10" required>
</ng-form>
<button type="button1" ng-disabled="subForm1.$invalid" ng-click="doSomething() ">Button 1</button>
<button type="button1" ng-disabled="subForm2.$invalid" ng-click="doSomething()" >Button 2</button>
<button type="button3" ng-disabled="myForm.$invalid" ng-click="doSomething()" >Button 3</button>
</form>
In this instance button1 and button2 are disabled on parts of the form where as button3 is disabled based on the whole forms input
Source: https://docs.angularjs.org/api/ng/directive/ngForm
You can use the Angular's form element property $dirty, or you could check if the element you want to validate has the class ng-dirty.
If you'd like, read more here, it explains how to use and check this.
Angular JS has some pretty features which you can take advantage of especially the class .ng-valid and .ng-invalid. As the user fills your form, angular dose a real time update on the state of form fields by changing the classList to correspond to the current state of the form.
Any for field that is has been altered and does not pass the Angular validation will have a class .ng-invalid well all classes that passed the validation will have .ng-valid. While ng-pristine indicates that the form have not been modified ng-dirty tells you that the form has been modified. Not that ng-pristine and ng-dirty cannot be used to ascertain the validity of the field.
Meanwhile for your case I have created a CodePen
angular.module("paged", [])
.controller("FormCtrl", function($scope) {
$scope.form = {page: 1};
$scope.canShow = function(i) {
return (i === $scope.form.page);
};
$scope.submit = function(form) {
alert("Form Submitted", form);
};
$scope.gotoPage = function(pageTo) {
var show = false;
var els = document.getElementsByTagName("input"); //Just with input only to keep it simple
for (var i = 0; i < els.length; i++) {
if (els[i].hasAttribute("data-page") && els[i].getAttribute("data-page") == pageTo - 1) {
if (els[i].classList.contains("ng-invalid")) {
show = false;
break;
}
}
show = true;
}
if (show) {
$scope.form.page = pageTo;
if (pageTo == 4) {
$scope.submit($scope.form);
}
}
}
});
to show you how this can done. As someone will rightfully say, there may ways to kill a rat. I think this is one of them
I have a select box
<select>
<option value="0">0 mins</option>
<option value="1">1 mins</option>
<option value="2">2 mins</option>
</select>
and I want to fire an event when the visitor either clicks on a value or clicks anywhere else on the page -i.e loss of focus on the select box
I've fiddled about for four hours now with no joy. I'm now down to this:
var c = 0;
$("selectTime").addEvent('click', function() {
if (c++ % 2 == 1) {
console.log(c);
//$(this).blur();
}
});
$('selectTime').click(function() {
if ($('select').is(':blur')) {
c = 1;
} else {
c = 0;
}
});
any ideas?
thanks
The mootools syntax for adding multiple events to same element is:
$('myElementID').addEvents({
blur: function(){
alert('blur');
},
click: function(){
alert('click');
}
});
Example with you code
You could though use just the change event, which fires when the element is changed. Like:
$('myElement').addEvent('change', function(){
alert('Select changed');
});
Example
Note that part of your code is using jQuery syntax, part is using MooTools syntax.
I have an array in my View Model. Items of this array are objects of Person that has two properties. when I bind this to a template it's okay. but when I change the state of one of the properties it does not reflect in UI.
what did I do wrong ?
<script type="text/html" id="person-template">
<p>Name: <span data-bind="text: name"></span></p>
<p>
Is On Facebook ?
<input type="checkbox" data-bind="checked: IsOnFacebook" />
</p>
</script>
<script type="text/javascript">
var ppl = [
{ name: 'Pouyan', IsOnFacebook: ko.observable(true) },
{ name: 'Reza', IsOnFacebook: ko.observable(false) }
];
function MyViewModel() {
this.people = ko.observableArray(ppl),
this.toggle = function () {
for (var i = 0; i < ppl.length; i++) {
ppl[i].IsOnFacebook = false;
}
}
}
ko.applyBindings(new MyViewModel());
</script>
when I press the button I want to make changes in People.IsOnFacebook property. the changes will be made successfully but the UI does not show.
You should call it like a function. Like:
ppl[i].IsOnFacebook(false);
This because the ko.observable() returns a function. It's not a property you call anymore but a function call. So in the background they will update your UI. To retreive a property that is observable. You should also use the function call.
Please see this tutorial: http://learn.knockoutjs.com/#/?tutorial=intro
I don't want to use an <input type=submit /> button to submit a form and I am instead using an <a> element. This is due to styling requirements. So I have this code:
myButton.addEvent('click', function() {
document.id('myForm').submit();
});
However, I have also written a class that improves and implements the placeholder attribute on inputs and textareas:
var FDPlaceholderText = new Class({
Implements: Events,
initialize: function() {
var _self = this;
var forms = document.getElements('form');
forms.each(function(form) { // All forms
var performInit = false;
var i = 0;
var ph = [];
form.getElements('input, textarea').each(function(el) { // Get form inputs and textareas
if (el.getProperty('placeholder') != null) { // Check for placeholder attribute
performInit = true;
ph[i] = _self.initPlaceholder(el); // Assign the placeholder replacement to the elements
}
i ++;
});
if (performInit) {
_self.clearOnSubmit(form, ph);
}
});
},
clearOnSubmit: function(form, ph) {
form.addEvent('submit', function(e) {
ph.each(function(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
});
});
},
initPlaceholder: function(el) {
el.defaultValue = el.getProperty('placeholder');
el.value = el.getProperty('placeholder');
el.addEvents({
'focus': function() {
if (el.value == el.defaultValue) el.value = '';
},
'blur': function() {
if(el.value.clean() == ''){
el.value = el.defaultValue;
}
}
});
return el;
}
});
window.addEvent('domready', function() {
new FDPlaceholderText();
});
The above class works great if a form is submitted using an actual <input type=submit /> button: it listens for a submit and clears the inputs values if they are still the default ones therefore validating that they are essentially empty.
However, it seems that because I am submitting one of my forms by listening to a click event on an <a> tag the form.addEvent('submit', function(e) { isn't getting fired.
Any help is appreciated.
well you can change the click handler to fireEvent() instead of call the .submit() directly:
myButton.addEvent('click', function() {
document.id('myForm').fireEvent('submit');
});
keep in mind a couple of things (or more).
placeholder values to elements that lack placeholder= attribute is pointless
if you detect placeholder support, do so once and not on every element, it won't change suddenly midway through the loop. you can go something like var supportsPlaceholder = !!('placeholder' in document.createElement('input')); - remember, there is no need to do anything if the browser supports it and currently, near enough 60% do.
you can otherwise do !supportsPlaceholder && el.get('placeholder') && self.initPlaceholder(el); - which avoids checking attributes when no need
when the form is being submitted you really need to clear placeholder= values in older browser or validation for 'required' etc will fail. if validation still fails, you have to reinstate the placeholder, so you need a more flexible event pattern
avoid using direct references to object properties like el.value - use the accessors like el.get('value') instead (for 1.12 it's getProperty)
for more complex examples of how to deal with this in mootools, see my repo here: https://github.com/DimitarChristoff/mooPlaceholder
This is because the submit() method is not from MooTools but a native one.
Maybe you can use a <button type="submit"> for your styling requirements instead.