I'm wanting to set the tab order on my forms to go left to right. I've seen the following code around the web
for (var i = 0; i < crmForm.all.length; i++)
{
var element = crmForm.all[i];
if (element.tabIndex && element.tabIndex != "0") {
if (element.className == 'ms-crm-Hidden-NoBehavior')
continue;
if (element.tagName == 'A') {
if (element.className != 'ms-crm-InlineTabHeaderText')
continue;
}
element.tabIndex = 10000 + (i * 10);
}
}
which sets the tab order as i want it. However there is a problem when it comes to currency fields as when you first tab into it the currency symbol is selected, and you can't type anything, and you have to tab again to be able to type anything into the field.
Is there a way for the code to ignore these symbols and go straight into the field itself?
Thanks
Your approach constitutes an unsupported customisation, but with a little manual work you can achieve the same outcome in a fully supported way. All you need to do is add a new "Section" (without showing the header or divider) to your form, for every row of fields.
The result is no unsupported JScript and predictable behaviour that is entirely consistent with the rest of the application.
In my example below I show an example of how I must lay out my form so that native tabbing behaviour "makes sense". However if I wish to use horizontal tabbing, I can rearrange my form, introduce some new sections and then have it work as I want without code.
The beauty of this approach is that it only affects the parts of the form that you want it to.
While technically it's unsupported still, I seem to have fixed the currency problem here:
function TabOrderLefttoRight() {
for (var i = 0; i < crmForm.all.length; i++) {
var element = crmForm.all[i];
if (element.tabIndex && element.tabIndex > "0") { //less than zero instead of !=
if (element.className == 'ms-crm-Hidden-NoBehavior')
continue;
if (element.tagName == 'A') {
if (element.className != 'ms-crm-InlineTabHeaderText')
continue;
}
element.tabIndex = 10000 + (i);
}
}
}
This way it does not affect items that are below 0 in tabindex (currency fields).
Related
Firstly please excuse my phrasing here, quite new to JS.
I have the below JS code running and it works perfectly with the parameters set to colour the 'Assigned Mins' column in my table.
What I am looking to do is add a 2nd parameter where the same colouring and parmeters but adding a column called 'Pending'
for(var i=0; i<columns.length; ++i) {
if(columns[i].text == 'Assigned Mins') {
columns[i].renderer = function (value, meta, rec) {
if(value > '0:19') {
meta.style = "background-color:red;font-weight:bold;color:white;";
}
else if(value > '0:09') {
meta.style = "background-color:orange;font-weight:bold;color:white;";
}
else {
meta.style = "background-color:green;font-weight:bold;color:white;";
}
return value;
I've tried:
if(columns[i].text == 'Assigned Mins','Pending') {
and
if(columns[i].text == 'Assigned Mins'||'Pending') {
and a few other variations using the || and && operators but either nothing happens or it colours all columns in the table.
As suggested I have also just tried the duplicate post (Check variable equality against a list of values) using:
if (['Assigned Mins','Pending'].indexOf(columns[i]) > -1)
and
if (~['Assigned Mins','Pending'].indexOf(columns[i]))
However in both cases the result is that none of the colouring works at all
Please can someone advise?
Thank you
this should work. It's the solution you provided but you just forgot the .text
if (['Assigned Mins','Pending'].indexOf(columns[i].text) > -1)
I currently have a table with a function that checks certain columns that have checkboxes, whenever they are "clicked off", to see if they're all completely empty.
The function does a loop from the first of the checked columns up until the last one that has to be checked. They go from 1 to 8, and their ids go from "f01_check" up until "f08_check". If all are empty, it adds a css class to its description column that changes background color.
The function looks like this:
function unChecked(rowNumber) {
alert(rowNumber);
var i = 1;
var check = false;
// Column loop
while (i < 9 && check == false) {
if (rowNumber.getElementById("f0" + i + "_check").checked == false) {
i++;
} else {
check = true;
}
// If all checkboxes are empty, add class
if (i == 9 && check == false) {
$s(description.addClass(emptyRecords));
}
}
}
The Dynamic Action leading to this function and its parameter is this:
var row = this.triggeringElement.closest('tr');
unChecked(row);
I realize that the rowNumber.getElementById doesn't work, but I can't figure out how to link or connect them. The way I'm looping through the columns might be a rough attempt, but it works. I've tested it on a set column and it it does stop whenever the loop reaches a checked checkbox. The problem is I just can't dynamically set the row to match the one that I've clicked.
I've tried getting the property .rowIndex as well, but I can't figure out where to use it, even if I do get the correct value.
I found a different solution, that also somewhat solves a different problem in the future.
Rather than use rownum to set a dynamic id for the columns, I changed it to it's primary key:
apex_item.checkbox (1, '1_' || pk, decode(data1,null,null,'CHECKED'), null, null, 'f01_' || pk) as lpb1
This basically helped me on knowing which row was being clicked, because the id also held it's primary key. This allowed me to use it's primary key value to improve the function. The item_pkis an item that gets its value from the corresponding table column:
function unChecked(row) { // var row = this.triggeringElement.closest('tr').rowIndex;
// unChecked(row);
var i = 1;
var check = false;
while (i < 9 && check == false) {
if (document.getElementById("f0" + i + "_" + item_pk.value).checked == false) {
i++;
} else {
check = true;
}
if (i == 9 && check == false) {
//addClass Segment
}
}
}
So if the report were to be filtered, the row number wouldn't match what the filter actually showed on the report table.
The previous solution was also fixed by removing the case clause from the select, as follows:
apex_item.checkbox (1, '1_' || a.pk, case when max(decode(data1,1,1,null)) is null then '' else 'CHECKED' end, null, null, 'f01_chk') as lpb1,
But again, the first solution showed actually foresees and handles a filtered report, so I believe it's a superior and more accurate solution.
Now I just need to complete the addClass segment. For some reason Apex is setting the field "static id" as the column header, which is slightly problematic since I meant to use the document.getElementById. But at least the main problem has been fixed. Thanks for the responses.
I wrote a simple html file with a textbox and submit button, and it generates and document.write's a response dependant on what you submit. I want to have it generate a response saying to enter content if the box is empty. The textbox's id is chatinput, so I have the following the code in the beginning
var chatinput_box=document.getElementById('chatinput');
var chatinput=chatinput_box.value;
Then a have a conditional, although I can't get it to work correctly; I've tried
if(chatinput==""){}
if(chatinput.length=0){}
if(chatinput=null){}
and others but none have worked correctly. Does anyone have another idea?
It should be this:
var chatinput = document.getElementById("chatinput").value;
if (chatinput == "" || chatinput.length == 0 || chatinput == null)
{
// Invalid... Box is empty
}
Or shorthanded:
if (!document.getElementById("chatinput").value)
{
// Invalid... Box is empty
}
The = assigns a value whereas == checks whether the values are equal.
Just offering an alternative, not trying to steal thunder ...
Create an isEmpty function to reuse on a variety of items.
function isEmpty(val){
return ((val !== '') && (val !== undefined) && (val.length > 0) && (val !== null));
}
Then you can apply it to whatever element you want:
if(!isEmpty(chatinput)){
// hooray its got a value!
}
Not exactly original, its the concept stolen from PHP, but it comes in handy a lot.
So I've written some code to sort all my site's select menus, and it works perfectly in every browser we support... except Firefox.
http://jsfiddle.net/vkjAC/6/
My code takes in the options for a select element, sorts them, and returns them. Somewhere in there, the selectedIndex on the select element changes to the last item.
I check what values are selected/defaultSelected:
for(k=0; k<options.length; k++)
{
if(options[k].defaultSelected == true)
{
sel = k;
break;
}
}
if(sel === null)
{
for(k=0; k<options.length; k++)
{
if(options[k].selected == true)
{
sel = k;
break;
}
}
}
if(sel === null)
{ options[0].selected = true; }
else
{ options[sel].selected = true; }
But I can't set the selectedIndex from this function because I'm not passing in the entire select object, just the option list.
I tried looking up similar problems, but every other thread I saw said it was a caching problem, or that I needed to add autocomplete="off", but those didn't work. I assume it has something to do with my code, but I haven't modified the selectedIndex property anywhere.
Any suggestions? I'm losing my mind (and running out of time!)
I've had this before. It has something to do with the fact that the options are removed then added again. You have to re-select the value after sorting. For example:
var ops = $('#mass').find('option');
$('#mass').prepend(sortDropDown(ops)).val($("#mass > option[selected]").val());
Im working on a simple html/javascript multiplication game, in which I have a multiplication table with some inputs that represet the results of the products. in that game, you need to answer as fast as you can on as many questions as you can. to make it easy on the players, ive assign an event to the enter key to move to the next input when it is pressed.
Here is the javascript code for highlighting the rows and the enter key event:
for (var i=0; i<boardInputArray.length; i++) {
boardInputArray[i].onkeydown = (function(nextBox) {
return function(e) {
if(e.keyCode == 13) {
if(nextBox==boardInputArray.length) {boardInputArray[0].focus();boardInputArray[0].select();}
else {boardInputArray[nextBox].focus();boardInputArray[nextBox].select();}
var gameCompleted = true;
for(var c=0;c<boardInputArray.length;c++) {
if(boardInputArray[c].value == '') {gameCompleted = false;}
}
if(gameCompleted) validateGame();
}
}
})(i+1);
}
I dont want to post the entire code here, because it is very long. If you would like to see the game in action, go to:
http://www.webdesk.co.il/articles/javascript/multiplication-table-game.php
Here's the problem: I would like that each time the Enter key is pressed, it will check if the following input is empty or not. in case its not empty - skip to the next one and so on until it finds an empty input. That way, the player can go back to the question he didnt answer and not go through all the ones he did answer. makes sense?
You can probably improve this code, but it does take care of moving to the next empty box.
for (var i=0; i<boardInputArray.length; i++) {
boardInputArray[i].onkeydown = (function(currentBox) {
return function(e) {
if(e.keyCode == 13) {
var gameCompleted = true;
if(boardInputArray[currentBox].value == '')
gameCompleted = false;
for (
var c = (currentBox + 1) % boardInputArray.length;
c != currentBox;
c = (c + 1) % boardInputArray.length
)
{
if(boardInputArray[c].value == '')
{
gameCompleted = false;
boardInputArray[c].focus();
boardInputArray[c].select();
break;
}
}
if(gameCompleted) validateGame();
}
}
})(i);
}
Notes:
I've made the anonymous function a function of currentBox instead of nextBox (i instead of i + 1).
The loop goes through all the boxes except the current box, by starting at the next box, wrapping around and ending at the previous box or when it encounters a blank box.