Maximum input number value in my form - forms

I am try to setup the max number to 10 in this form enter link description here
Please how it is possible to do that ?
Thank you

Please try to add a validation in your code:
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('name');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal) && currentVal < 10) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(1);
}
});

Related

Sort table column with custom comparator

I have a table column which displays customers full names (first name + last name). However, I want to sort this column first by first name and then by last name. Therefore I added some comparator function in my controller:
_customNameComparator: function(value1, value2) {
// Separate all words of the full name
var aWordsName1 = value1.split(" ");
var aWordsName2 = value2.split(" ");
// Get the last and first names of the two names
var sFirstName1 = value1.substring(0, value1.lastIndexOf(" "));
var sLastName1 = aWordsName1[aWordsName1.length - 1];
var sFirstName2 = value2.substring(0, value1.lastIndexOf(" "));
var sLastName2 = aWordsName2[aWordsName2.length - 1];
// 0 values are equal
// -1 value1 smaller than value2
// 1 value1 larger than value2
if (sLastName1 === sLastName2) {
if (sFirstName1 === sFirstName2) {
return 0;
} else if (sFirstName1 > sFirstName2) {
return 1;
} else {
return -1;
}
} else if (sLastName1 > sLastName2) {
return 1;
} else {
return -1;
}
}
When the column Header is clicked, I try to call
var aSorter = [];
aSorter.push(new sap.ui.model.Sorter("FullName", bDescending, false, this._customNameComparator));
var oBinding = this.byId("tableTargetGroupDetails").getBinding("items");
oBinding.sort(aSorter);
The comparator does not work like this. The sorting is just as usual (by the full name). What do I do wrong?
And btw: I know that this can lead to some wrong sorting (e.g. for last names containing out of two or more words), but since it's "only" the sorting this is fine for me at the moment.
Unless your binding's operationMode is Client, your comparator will probably not work. You can set the mode where you do your binding using { parameters: { operationMode: 'Client' } }.

Trying to work with down() method from ExtJS 4.2.1

I am trying to find a specific element from my page using ExtJS 4 so I can do modifications on it.
I know its id so it should not be a problem BUT
-I tried Ext.getCmp('theId') and it just return me undefined
-I tried to use down('theId') method by passing through the view and I still get a nullresponse.
As I know the id of the element I tried again the two methods by setting manually the id and it didn't work neither.
Do these two methods not function?
How should I do?
Here is the concerned part of the code :
listeners: {
load: function(node, records, successful, eOpts) {
var ownertree = records.store.ownerTree;
var boundView = ownertree.dockedItems.items[1].view.id;
var generalId = boundView+'-record-';
// Add row stripping on leaf nodes when a node is expanded
//
// Adding the same feature to the whole tree instead of leaf nodes
// would not be much more complicated but it would require iterating
// the whole tree starting with the root node to build a list of
// all visible nodes. The same function would need to be called
// on expand, collapse, append, insert, remove and load events.
if (!node.tree.root.data.leaf) {
// Process each child node
node.tree.root.cascadeBy(function(currentChild) {
// Process only leaf
if (currentChild.data.leaf) {
var nodeId = ""+generalId+currentChild.internalId;
var index = currentChild.data.index;
if ((index % 2) == 0) {
// even node
currentChild.data.cls.replace('tree-odd-node', '')
currentChild.data.cls = 'tree-even-node';
} else {
// odd node
currentChild.data.cls.replace('tree-even-node', '')
currentChild.data.cls = 'tree-odd-node';
}
// Update CSS classes
currentChild.triggerUIUpdate();
console.log(nodeId);
console.log(ownertree.view.body);
console.log(Ext.getCmp(nodeId));
console.log(Ext.getCmp('treeview-1016-record-02001001'));
console.log(ownertree.view.body.down(nodeId));
console.log(ownertree.view.body.down('treeview-1016-record-02001001'));
}
});
}
}
You can see my console.log at the end.
Here is what they give me on the javascript console (in the right order):
treeview-1016-record-02001001
The precise id I am looking for. And I also try manually in case...
h {dom: table#treeview-1016-table.x-treeview-1016-table x-grid-table, el: h, id: "treeview-1016gridBody", $cache: Object, lastBox: Object…}
I checked every configs of this item and its dom and it is exactly the part of the dom I am looking for, which is the view containing my tree. The BIG parent
And then:
undefined
undefined
null
null
Here is the item I want to access:
<tr role="row" id="treeview-1016-record-02001001" ...>
And I checked there is no id duplication anywhere...
I asked someone else who told me these methods do not work. The problem is I need to access this item to modify its cls.
I would appreciate any idea.
You are looking for Ext.get(id). Ext.getCmp(id) is used for Ext.Components, and Ext.get(id) is used for Ext.dom.Elements. See the docs here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-get
Ok so finally I used the afteritemexpand listener. With the ids I get the elements I am looking for with your Ext.get(id) method kevhender :).
The reason is that the dom elements where not completely loaded when I used my load listener (it was just the store) so the Ext.get(id) method couldn't get the the element correctly. I first used afterlayout listener, that was correct but too often called and the access to the id was not so easy.
So, here is how I did finally :
listeners: {
load: function(node, records, successful, eOpts) {
var ownertree = records.store.ownerTree;
var boundView = ownertree.dockedItems.items[1].view.id;
var generalId = boundView+'-record-';
if (!node.tree.root.data.leaf) {
// Process each child node
node.tree.root.cascadeBy(function(currentChild) {
// Process only leaf
if (currentChild.data.leaf) {
var nodeId = ""+generalId+currentChild.internalId;
var index = currentChild.data.index;
if ( (index % 2) == 0 && ids.indexOf(nodeId) == -1 ) {
ids[indiceIds] = nodeId;
indiceIds++;
}
console.log(ids);
}
});
}
},
afteritemexpand: function( node, index, item, eOpts ){
/* This commented section below could replace the load but the load is done during store loading while afteritemexpand is done after expanding an item.
So, load listener makes saving time AND makes loading time constant. That is not the case if we just consider the commented section below because
the more you expand nodes, the more items it will have to get and so loading time is more and more important
*/
// var domLeaf = Ext.get(item.id).next();
// for ( var int = 0; int < node.childNodes.length; int++) {
// if (node.childNodes[int].data.leaf && (int % 2) == 0) {
// if (ids.indexOf(domLeaf.id) == -1) {
// ids[indiceIds] = domLeaf.id;
// indiceIds++;
// }
// }
// domLeaf = domLeaf.next();
// }
for ( var int = 0; int < ids.length; int++) {
domLeaf = Ext.get(ids[int]);
if (domLeaf != null) {
for ( var int2 = 0; int2 < domLeaf.dom.children.length; int2++) {
if (domLeaf.dom.children[int2].className.search('tree-even-node') == -1){
domLeaf.dom.children[int2].className += ' tree-even-node';
}
}
}
}
},
With ids an Array of the ids I need to set the class.
Thank you for the method.

Ext.form.Basic how to reset fields when trackResetOnLoad true?

I got a Ext.form.Basic with the trackResetOnLoad:true config.
When I call reset() on a field it gets its values from the form setValues() method.
How do I reset my fields now?
When I just do field.setValue('') the form marks it as invalid because the field is required.
Thanks in advance.
You have to manually reset all of the originValues of all fields (and some other)
This snipped will do this
var items = form.getForm().getFields().items,
i = 0,
len = items.length;
for(; i < len; i++) {
var c = items[i];
c.value = '';
if(c.mixins && c.mixins.field && typeof c.mixins.field['initValue'] == 'function'){
c.mixins.field.initValue.apply(c);
c.wasDirty = false;
}
}
working example
What works for me is to take a copy of the values just after the form is created using something like var originalValues = myForm.getFieldValues(); then I can later restore those values using myForm.setValues(originalValues); instead of calling myForm.reset(...);

How can I get an alert if a specific url substring is present and nothing if null

function getCode() {
if (window.location.href.indexOf("?discount=")) {
var url = (document.URL);
var id = url.substring(url.lastIndexOf('=') + 1);
window.alert(id);
return true;
} else {
return false;
}
}
Purpose: When people go to our "Service Request" page using a QR code that has a substring of ?discount=1234. I have been testing by creating an alert box with the discount code showing. Eventually I want to be able to populate that "1234" automatically into a "Discount Code:" text field on page load.
The above is a mixture of a few suggestions when I researched it.
Result: Going to example.com/serviceRequest.html?discount=1234 gives me the appropriate alert "1234", as I want... Going to example.com/serviceRequest.html gives me the alert http://example.com/serviceRequest.html, but I don't want anything to happen if "?discount=" is null.
Any suggestions?
indexOf returns -1 if the search pattern doesn't exist. In JavaScript, anything not a 0 or false or undefined is considered true.
So your line of:
if(window.location.href.indexOf("?discount=")) {
Would better search as:
if(window.location.href.indexOf("?discount=") > -1) {
Try changing your if-statement to:
if(window.location.href.indexOf("?discount=") != -1)
Look up the documentation for ".indexOf". It returns -1 for not found and >= 0 if it is found.
...indexOf("?discount=") >= 0
substring and indexOf return -1 if the text is not found, so you can test for this. E.g.
function getCode() {
if(window.location.href.indexOf("?discount=") != -1) {
var url = (document.URL);
var id = url.substring(url.lastIndexOf('=') + 1);
window.alert(id);
return true;
}
else {
return false;
}
}
You just need to test the indexOf value:
function getCode() {
if (window.location.href.indexOf("?discount=") !== -1) {
var url = (document.URL);
var id = url.substring(url.lastIndexOf('=') + 1);
window.alert(id);
return true;
}
else {
return false;
}
}
So the quick and dirty answer would be
var discount = window.location.search.split("?discount=")[1];
alert(discount);
But this doesn't take into account the occurence of other query string parameters.
You'll really want to parse all the query parameters into a hash map.
This article does a good job of showing you a native and jQuery version.
http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

Set Time Range of a Zend Dojo TextTimeBox

Hi is it possible to set the time range of a Dojo textTimeBox to 09:00 - 18:30.
I can't find anything in either the Zend or Dojo documentation that show how this can be done or if it can be done.
Many thanks in advance.
You can set max and min constraints for widget:
new dijit.form.TimeTextBox({
name: "prog_val",
value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00',
min:'T09:00:00',
max:'T18:30:00'
}
},
"prog_val");
It does not allow the user to enter data beyond the allowed values.
However this still allows user to scroll to the disabled times, user just cannot select them.
For hiding disabled times you should do some hack :)
You should override _getFilteredNodes method of dijit._TimePicker. For example :
dojo.declare("my._TimePicker", dijit._TimePicker, {
// extend the default show() method
_getFilteredNodes: function (/*number*/start, /*number*/maxNum, /*Boolean*/before) {
// summary:
// Returns an array of nodes with the filter applied. At most maxNum nodes
// will be returned - but fewer may be returned as well. If the
// before parameter is set to true, then it will return the elements
// before the given index
// tags:
// private
var nodes = [], n, i = start, max = this._maxIncrement + Math.abs(i),
chk = before ? -1 : 1, dec = before ? 1 : 0, inc = before ? 0 : 1;
do {
i = i - dec;
var date = new Date(this._refDate);
var incrementDate = this._clickableIncrementDate;
date.setHours(date.getHours() + incrementDate.getHours() * i,
date.getMinutes() + incrementDate.getMinutes() * i,
date.getSeconds() + incrementDate.getSeconds() * i);
if (!this.isDisabledDate(date)) {
n = this._createOption(i);
if (n) { nodes.push(n); }
}
i = i + inc;
} while (nodes.length < maxNum && (i * chk) < max);
if (before) { nodes.reverse(); }
return nodes;
}
});
And you need to set this new class ('my._TimePicker') as a popupClass property of your text time box:
dojo.addOnLoad(function () {
dijit.byId("prog_val").popupClass = "my._TimePicker";
});
And you can see : it works!