i am new to JQM.
I am trying to set up a switch control for home automation. There are switches for every room to be controlled by phone or computer.
THe issue I am having is that I have one toggle flip switch which should switch the whole group on or off. The problem is the updating of the other toggle flip switches on the side, eg. when selecting 'off' for the whole group all switches should be changed to 'off' or vice versa for the 'on' option. if any of the other switches is selected the 'Whole Group' switch should not be changed.
I have tried all kinds of refresh options but either the page hangs completely or I get the following error
Error: cannot call methods on slider prior to initialization; attempted to call method 'refresh'.
I have tried all different answers given in the forum, but none is working on Chrome, Firefox or iPhone Safari.
$(document).ready(function () {
$(".tswitch").bind("change", function (event, ui) {
var n = $(this).val();
console.log('Start value n: ' + n);
if (n == '0') {
$('.tswitch').val('1');
$('.tswitch').slider("refresh");
<!--$('.tswitch').val('1').trigger('create').slider("refresh")-->
console.log('0 toggle: ' + $(this).val() + ' value n: ' + n);
} else {
$('.tswitch').val('0');
$('.tswitch').slider("refresh");
<!--$('.tswitch').val('1').trigger('create').slider("refresh")-->
<!--var fts = $('.tswitch');-->
<!--fts.val('0');-->
<!--fts.trigger('create');-->
<!--fts.slider('refresh');-->
console.log('1 toggle: ' + $(this).val() + ' value n: ' + n);
}
});
});
the code is on http://jsfiddle.net/PdkQ5/98/
also tried JQM 1.8 and 2.0
Related
I'm currently developping a WebApp with KendoMobile.
I have use a scrollView to display an informations bar like you can see on the picture below :
The problem comes when I click on a marker.
I wrote a function that change the page of the scrollview to match the marker I clicked.
Here is the code of the method :
google.maps.event.addListener(markerObj, 'click', function() {
var page = fournisseursArrayIndexOf(markerObj.data["ID"]);
console.log("marker title : " + markerObj.title + " / footer page : " + page);
var footer = $("#footer").data("kendoMobileScrollView");
var curpage = footer.page;
markers[curpage].setIcon(normalImg);
markerObj.setIcon(selectedImg);
footer.scrollTo(page);
//map.panTo(markerObj.position);
});
I read here that if I use the scrollTo method with a single parameter (the page index that I want to show), there will be a transition animation by default.
But nothing happens, I mean the page do change, but there no animation.
I searched on Kendo forum but the only topic I found is this one but it's the exact opposite of what I want : He want to delete the animation when I want to have it.
But that helps me kind of because it mean that having an animation is possible.
Does someone know the solution to this problem ?
Problem solved ! Sort of...
I tested many things by modifying the code of the KendoMobileScrollView and I found that the animation that is supposed to be displayed when you call the scrollTo method doesn't work with scrollview filled with a template.
So if someone encounter the same problem : you'll have to write a loop that will create the pages of your scrollview and insert it in the DOM.
Looks like this :
var htmlToAppen = "<div data-role=\"page\>"";
for(var i = 0 ; i < yourObjectsArray.length ; i++) {
var curObj = yourObjectsArray[i];
htmlToAppen += "<div> objName : " + curObj.name + "</div>";
htmlToAppen += "</div>";
}
$("#yourScrollDiv").append(htmlToAppend);
$("#yourScrollDiv").kendoMobileScrollView({
enablePager : false
});
Is there a way to access the jqGrid's columnChooser's multiselect API objects? I need to call those objects to update the data on ColumnChooser pop-up dialog.
In the snapshot below, is the customized ColumnChooser pop-up dialog. The HTML combo when selected/changes would then change the $ui.multiselect sections (avaiable & unavailable columns).
In the 2nd snapshot below is the view souce using Firefox's firebug and it doesn't have me the option to toggle the 2 columns.
Is there a way to access ColumnChooser's API instead, to manually toggle the columns on the ColumnChooser but not touch the jqGrid's columns? How can I accomplish this?
Thanks...
[Snapshot #1]...
[Snapshot #2]...
After a few days of Google surfing, piecing together sample script from lots of example api and coming up with JQuery to find the html path to a clickable anchor link.
Updated Solution
The "parmSavedBuildDataFormValueColumnModelSetting" value is the colModel's name you passed on to it, whether it be the values you saved from the database or cookie, or anything for populating the MultiSelect "selected" box-windows.
function JqgridColumnChooserSavedBuildsRecordsMultiselectDialogToggler(parmSavedBuildDataFormValueColumnModelSetting) {
//Re-order the $.ui.multiselect's columns in 2 boxed-windows (available & unavailable)...
//http://stackoverflow.com/questions/10439072/add-remove-column-handler-on-jqgrid-columnchooser
//http://stackoverflow.com/questions/11526893/jqgrid-columnchooser-unselected-columns-on-the-right-in-alphabetical-order
var $jqgridColumModelSetting = $('#' + jqgridSpreadsheetId).jqGrid('getGridParam', 'colModel');
var $jqgridColumNameSetting = $('#' + jqgridSpreadsheetId).jqGrid('getGridParam', 'colNames');
//Remove all of the "selected" columns having "-" icon...
//09/11/2013 - This "selected" columns with hyperlink click event does not work too well as it cause 1/3 of all columns not to be visible, so let' use the "Remove All" hyperlink instead...
//#$('#colchooser_' + jqgridSpreadsheetId + ' ul.selected a.action').click();
$('#colchooser_' + jqgridSpreadsheetId + ' div.ui-multiselect div.selected a.remove-all').click();
//Add back the "available" columns having "+" icon, only the one that match the SavedBuilds data...
$.each(parmSavedBuildDataFormValueColumnModelSetting.split('|'), function (i1, o1) { //##parmSavedBuildDataFormValueColumnModelSetting.forEach(function (i, o) {
$.each($jqgridColumModelSetting, function (i2, o2) {
if (o2.name == o1) {
$('#colchooser_' + jqgridSpreadsheetId + ' ul.available li[title="' + $jqgridColumNameSetting[i2] + '"] a.action').click();
return false; //This only break the foreach loop [while "return true" resume the loop] (This have nothing to do with function's returned value)...
}
});
});
}
I'm using SlickGrid with the pager plugin. My intent is to display line items in SlickGrid and allow the user to double click on a row to get more detail. I have code that seems to work fine but it feels as though I'm doing this the hard way:
grid.onDblClick.subscribe(function(e, args) {
var selectedIndex = parseInt(grid.getSelectedRows());
var pageInfo = dataView.getPagingInfo();
var pageSize = pageInfo.pageSize;
var pageNum = pageInfo.pageNum;
var idx = pageSize*pageNum + selectedIndex;
var asset = rows[idx].assetName;
alert("Selected Asset is " + asset);
});
I've seen other questions posted where people did a grid.getData()[selectedIndex] or a dataView.getItemById(selectedIndex), but since selectedIndex is always a 0 to something number, I always got data from the first page in my list regardless of which page I was on. Is there a direct way to map a selected index on a page to the actual row in the data array? Again, the code above seems to work fine - just feels like I'm missing an obvious method somewhere.
grid.onDblClick.subscribe(function(e, args) {
alert("Selected asset is " + args.item);
alert("Or " + grid.getData().getItem(args.row));
alert("Or " + grid.getDataItem(args.row));
});
I am attempting to develop a Firefox extension.
I have a simple need. At this time in testing, I simply wish to define an array. When the button is pushed, the Current Window goes to the first URL in the array. When the button is pushed again, it goes to the next URL in the array.
I am of the impression that I need to store the present sequence in the array using simple-storage (ss.storage) yet I cannot make it work. I thought perhaps I could store the sequence information using a Cookie but the Add-on SDK appears to be very stringent. Perhaps there is a far simpler method but I cannot seem to identify what that would be.
Current Status - when the button is pushed, the code opens three separate windows for each URL in the array. If you could please help me to modify this code so that opens one URL from the array each time the button is pushed - as described above.
require("widget").Widget({
id: "view-source-widget",
label: "View Source",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function() {
var arr = new Array("one.com","two.com","three.com");
for(var i=0; i<arr.length; i++) {
var value = arr[i];
var ss = require("simple-storage");
ss.storage.myURL= value;
var windows = require("windows").browserWindows;
windows.open(ss.storage.myURL);
}
}
});
If I understand correctly what you are trying to do - you don't need persistent storage, a normal global variable will do. The global variable indicates the array index at which you are right now. Something like this:
var urls = ["one.com","two.com","three.com"];
var urlIndex = 0;
...
onClick: function() {
var windows = require("windows").browserWindows;
windows.open(urls[urlIndex]);
// Increase index for the next click
urlIndex++;
if (urlIndex >= urls.length)
urlIndex = 0;
}
...
I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.
I was working on a very simple feature:
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.
Firefox ... not so much. It acts as if I had a "text" type.
Is that a known issue? Workaround?
Thanks
First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.
This page has details on HTML5 forms and the current bugs
https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.
Is that a known issue?
Yes. Unknown types are treated as text. (And types which only appear in draft specifications tend to be unknown by many browsers)
Workaround?
JavaScript
input type="number" is not implemented in Firefox yet as of version 25 (November 2013).
Bug 344616 is the relevant ticket in Bugzilla#Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616
Update 10 March 2014 - Good news! Looks like the ticket was fixed in Firefox 29, scheduled for release on 29 April 2014.
Update 30 April 2014 - Confirmed, I just gave it a try, and Firefox 29 has support for input type="number".
No browser gets this yet. Mileage may vary, but there is definitely work to be done in all browsers.
Opera will show you an UI letting you click arrows up and down to increase or decrease the number.
You can however submit the form even if anything but a number has been entered. Accessibility is not perfect yet, but at least you can also use the arrows of the keyboard to increase and decrease the number.
Chrome has no UI for the number yet, thus there is no help or no visual hint that a number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough as a default and it is totally inaccessible. Chrome basically is the worst offender of all browsers when it comes to accessibility, e.g. zero support for ARIA.
You are using the :invalid pseudo-class to make the entire input widget red. Please recognize that this may be clearer than the default styling in Chrome, but it is still not an accessible solution. Since Chrome does not support ARIA, the bad news is that even if you'd provide a text error message through JavaScript, a blind user, or anyone else using a screen reader, might not hear it at all.
Firefox may be late to this game, but please recognize the fact that Mozilla have very strict shipping criteria for its features, while Chrome plays around with no thought about consequences.
i am using firefox, i had the same issue developing my input type number typing caracters and spaces etc...
anyway i m using angular 2 in this examples, its almost similar to javascript, so you can use this code in every case :
here is the html :
<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher"
(keypress)="FilterInput($event)" />
here is the function FilterInput :
FilterInput(event: any) {
let numberEntered = false;
if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
//console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
numberEntered = true;
}
else {
//input command entered of delete, backspace or one of the 4 directtion up, down, left and right
if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
//console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
}
else {
//console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
event.preventDefault();
}
}
// input is not impty
if (this.validForm) {
// a number was typed
if (numberEntered) {
let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
console.log('new number : ' + newNumber);
// checking the condition of max value
if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
console.log('valid number : ' + newNumber);
}
else {
console.log('max value will not be valid');
event.preventDefault();
}
}
// command of delete or backspace was types
if (event.keyCode == 46 || event.which == 8) {
if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
console.log('min value will not be valid');
this.numberVoucher = 1;
//event.preventDefault();
this.validForm = true;
}
}
}
// input is empty
else {
console.log('this.validForm = true');
this.validForm = false;
}
};
in this function i had to just let the keypress of numbers, direction, deletes enter, so this function is just for the positive integer not doubles.
Firefox has supported patterns since 4.0
<input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>
(For help, see http://html5pattern.com/)