I have a table in which there is a button in one cell. Now when I am disabling that cell, the cell gets disabled but on clicking upon that cell, button click event is happening. So instead of disabling the cell, I disabled the button. Now everything working fine, but I wanted to know that why on disabling the cell, button click event was getting fired?
my code snippet is like below:
To disable cell-(previous approach) ---
grid.rows[i].cells[1].disabled=true;
To disable button:(new approach)--
grid.rows[i].cells[1].firstChild.disabled=true;
From the html4 spec:
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.
Looking at the html4 spec for td, there is nothing saying disabled is valid.
So that means setting disabled on the table's cell does nothing. You need to set individually on the form elements inside of the cell.
What you are doing now is randomly setting some property on the cell that means nothing to it. It is the same thing as setting grid.rows[i].cells[1].foobar=true;. It means nothing, but the cell has it attached to it.
I think it maybe happening because when u disable the cell then the button element does not get disabled. It still remains enabled, unlike the cell.
Related
In a table row I have the following inputs button, select, date.
The date field is initially disabled, selecting an option other than "selected" enables the date field using
onchange="functionName(id);"
Clicking the button adds a row. After adding a new row, if I use
element.addEventListener('onchange',function() { functionName(id); });
The onchange doesn't appear in the code, Developer Tools in Chrome. If I use
element.setAttribute("onchange", function(){functionName(id);});
it does appear in the code as
onchange="function (){ReqDate(id);}"
but doesn't execute.
In HTML, the onchange attribute represents what happens on the change event. So in the javascript, you should use addEventListener change, not onchange.
Credit to epascarello in the comments.
Passing the object id as the parameter like so
onchange="functionName(id);"
worked for the initial row, but not for a subsequent (added) row.
"this" works
onchange = function(){functionName(this.id);};
Thanks for the help.
I have a table that I'm creating rows/cells in the code behind, and adding various controls to each cell. There is also as submit button on the form.
One of the cells contains an SPLinkButton. I have a Javascript function that changes the innerText/textContent based on user action from the default value set in the code behind. Prior to clicking the Button to run code behind, the end user does see the updated text of the SPLinkButton.
When the submit button is clicked, this is the only control that reverts its value back to the default value during the button's postback. A Label/TextBox/DDL all preserve their values. If I wrap the control in IsPostBack, the cell the control is added to will be null (or if I wrap the entire table, there will be no rows). Note that I'm using the value of another item to uniquely append the SPLinkButton ID on a per-table row basis.
What is different about LinkButton/SPLinkButton and postback behavior?
EDIT: I converted the SPLinkButton to a TextBox, providing similar functionality. While I dislike the presentation compared to the textbox (look and feel, as well as the SPLinkButton would automatically expand the modal size when needed), it does function. I would love to get SPLinkButton working and go back to using it, if possible.
I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?
I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed
Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.
Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');
I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.
I'm building a 'tag input' plugin with jQuery at the moment and I've hit a small stumbling block.
I'm adding a button after a text input in a form, and using javascript to provide functionality for the button. When the button is clicked (or return is pressed in the input), the value of the input is added to a list of tags. The input is then cleared and refocused.
My problem occurs when I tab through the interface, the button after the input gains focus when you tab to it but I want to cancel this behaviour. I could just blur the button but I'd rather the button passes focus to the next focusable element.
e.g. I have three inputs in my form: text-input-1, button, text-input-2. When text-input-1 is focused and I press tab, I want focus to jump to text-input-2 rather than the button.
Can this be done? Thanks in advance.
This is easy enough in IE, which accepts a negative integer for the tabIndex property which will remove it from the tabbing order:
<input type="button" tabindex="-1" value="Can't tab to me!" />
This isn't part of the HTML 4.01 specification for tabindex, which only allows an integer between 0 and 32767. However, it is specified in the HTML 5 drafts and supported in most major browsers.
The easiest method I can think of in browsers that don't support it would be to wait for the input's onkeydown event and check for the tab key. If the tab key is pressed, disable the button and set a timeout with an interval length of 0 to enable the button again.
Change the tab index order, give text-input-1 tabindex to 100 and text-input-2 to 200 and for the button any number greater than 200. It should solve the problem.
Ah, I've answered my own question with help from Teja (+1).
All I needed to do was apply a negative tab index to the button!
I used jquery to attach a double click event handler to a table and display a modal popup when a cell is double clicked.
This works fine in Firefox however in IE8 double clicking the cell causes the text in the cell to be highlighted then displays the "Search Accelerator" button over top of everything.
Is there anyway to prevent IE from highlighting the text in a cell when its double clicked ?
Some approaches to prevent text selection in IE:
Use of the onselectstart event handler
http://bytes.com/groups/javascript/92148-ie-preventing-text-selection
Clearing the selection after the fact
Prevent text selection after double click
Maybe adding this on the TABLE element:
unselectable="on"
Though I don't really know when to add it. I'd have to try but I have no IE8 installed.