I have form in which I have data picker, and select2 (customize drop down to search) and many inputs, text area fields when I press tab button to move the next field its working fine but when next field is date picker or select2 then tab index is not working I want generically solution and in all browsers.
currently i am doing static solution like to get id of one div then Prop tab index with 1 value.
$scope.focusFunctionZipV = function(Id){
var div = '#' + Id;
$(div).prop('tabindex', '1');
$(div).select2('open');
//zipV is a div having zip code with select2
if(div == '#zipV'){
$('.datepicker-simple').prop('tabindex', '0');
}
}
You should get the id select2 ID then on close event refer focus to next field.
$('#currentDiv').select2().on("select2:close", function (e) {
$('#nextDiv').focus()
});
and for date picker
$('#ID').datepicker({
onSelect: function(dateText, inst) {
$('#nextIDdiv').focus();
}
});
and for simple input fields tab is working fine.
Related
I'm using a checkbox to create a toggle switch as shown in this tutorial
The switch lives in a form where questions can be added dynamically. On submission the form posts as array of each answer back to the page to be processed however as the off switch doesn't pass a value back to the form the answers get out of sync with the answers for the other text fields. Is there any way to set a value for the off switch, i.e. when a check box is left unchecked?
I've tried to use the following to set my off checkboxes to off however it just seems to animate all the switches to on on form submission, anyone any ideas as to what I'm doing wrong?
$('form').submit(function(e){
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).val(0); //Set whatever value you need for 'not checked'
$(this).attr("checked", true);
});
return true;
});
You probably want to use Javascript to set a value for each checkbox "switch" in one of two ways:
Option 1: in the html of the switch elements/checkboxes, set the value attribute to zero by default. Then add a javascript click handler for the toggle to check its current value and toggle to the opposite state/value.
Option 2: add Javascript to the form's submit handler (on submit) that checks for any switch elements which have no values and set them to zero before processing form.
Either way should pass a value at all times, and your form should be able to keep track of all input states.
This snippet did the trick, as Anson suggested this finds all the checkboxes and sets them to either on or off on form submission:
$('form').submit(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','1');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
checkbox.prop('disabled', true);
}
})
});
I saw this response on how to hide a column. I need a little more complicated behavior. I have a react table like this
var StockTable = React.createClass({
render: function () {
var items = [];
for (var symbol in this.props.stocks) {
var stock = this.props.stocks[symbol];
items.push(<OptionRow key={stock.symbol} stock={stock} bid={this.props.bid} ask = {this.props.ask} />);
}
return (
<table table-head id="stocktable">
...
I need to detect when a user clicks on the header of the table, get the column she clicked on, and hide that column. Then, if a user clicks a separate button on the page, I need all the columns that are hidden to display again.
It would also be nice if the cursor changed to something like a hand when in the table header to alert the user that an action is possible. Like it does when you hover over a button.
I would have a list of hidden table headers in state
this.state = {hidden: []}
and event handlers for each header
<th onClick={() => hideHeader('cost')}>
to avoid rendering them
hidden.indexOf('cost') !=== -1 ? <someheader/> : null
Rendering null is a valid way to avoid rendering something.
To change pointers: How can I make the cursor a hand when a user hovers over a list item?
The main problem is that I have a dropdown menu whose options should be updated dynamically.
The workflow is as follows:
I have an input element connected to an ng-model called toSubmit that when longer than 3 characters should fire an http.get call to fetch the list that should populate the dropdown menu.
So this list will change everytime the toSubmit variable changes. Let's call this list database (in the controller it is $scope.database.
What I am trying right now is a very simple solution that doesn't work most probably because the html DOM that contains the dropdown list is loaded at the very beginning and does not keep track of the changes in the options.
In my controller I have the following part which watches over toSubmit:
$scope.toSubmit = '';
$scope.$watch('toSubmit',function(query){
if (query.length >= 3){
getQueryDatabases.companyNameService({'field':'name','query':query,'numberOfHits':'10'},'CIK').prom.then(
function(dataObject){
$scope.database = dataObject;
// dataObject.forEach(function(item){
// $scope.databaseString.push(item.cik + ' ' + item.companyName);
});
});
}
});
And my html looks like the following:
<label for="nameCompany">Name:</label>
<input type="text" ng-model="toSubmit"></input>
<select ng-model="database" ng-options="line in database"></select>
Now my take was take by binding database with ng-Model I would get the result but I am most likely wrong. Can someone please help me?
I recommend you to use select2 that'll handle things like limiting input before server request and have great look and extendibility.
You need to add angular-ui-select2 to your project.
Here is code for you:
Html:
<input class='form-control' data-ng-model='position.company' data-ng-required data-placeholder='Company:' data-ui-select2='employerSelect2Options' id='company_name' type='hidden'>
JavaScript:
$scope.employerSelect2Options = {
minimumInputLength: 2,
query: function (query) {
var _query = query;
var companies = Restangular.all('companies').getList({query: query.term});
companies.then(function(data) {
var results = {results: []};
_.each(data, function(element, index, list) {
results.results.push({id: element.id, text: element.name});
})
if(!_.contains(_.map(data, function(element){ return element.name; }), _query.term)) {
results.results.push({id: _query.term , text: 'Create company "' + _query.term + '"'});
}
_query.callback(results);
})
}
};
My example also contains logic for add "create company" if zero results returned. In this case position.company will contain text of non found company name in id field and you can check it on server side and create one before assigning id.
This logic in
if(!_.contains
condition.
With the code:
<table>
<tr><td contenteditable>My_Name</td><td>Surname</td></tr>
<tr><td contenteditable>My_Name2</td><td>Surname2</td></tr>
</table>
You can edit a cell in an HTML table. My problem is when I edit the cell and press enter, it creates a new line in cell. What I really would like is, if I press enter I go to the cell just below that cell I just edited so that I can edit that cell.
Currently I have to use the mouse to go to the next cell, but if I can press enter and go to the cell, it will help me edit the cells a bit faster. Plus the updated data will be stored in my database, so I also don't want unnecessary space stored in the database.
But I am not sure what I can do. Is there any example I can look at?
I've built a fully editable table "Grid" in JS and HTML before.. and logic behind it simply is as following:
1- in your table after you layout all your cols, add an action col and add a "edit" link in each row that points to an Edit function, in this Edit link pass the row index so.. it will look like that:
<a href='javascript:void(0)' id='EditBtn' onclick='Edit("+ rowIndex +")'>Edit</a>"
2- your Edit function will simple loop on your columns using that rowIndex and replace the text values with a text box tag
"<input type='text' id='nominal' id='editableField' >" + tdTxt + "</input >"
Just avoid making the "Edit" column Editable
now, you should have a fully editable row..
on last thing, is to Add beside the "Edit" link a "Cancel" link that will loop again on the Row columns like the Edit link and Replace the Text tags with a Span or just pure html with the "" original values..
You may wonder how I will have the origianl td values, well in this case we added a hidden field that carrys the td value, so when the user click cancel after edit. we get the cell original value before edit,
hope that helps.
Disclaimer: This code requires JQuery.
Something like this? http://jsfiddle.net/v2Tdn/3/
$('td').keypress(function (evt) {
if (evt.which == 13) {
evt.preventDefault();
var cellindex = $(this).index()
// get next row, then select same cell index
var rowindex = $(this).parents('tr').index() + 1
$(this).parents('table').find('tr:eq(' + rowindex + ') td:eq(' + cellindex + ')').focus()
}
})
*** UPDATE ***
Note, I've updated the jsfiddle to also select the text when you press enter. For the previous example which only focused on the next TD, please use http://jsfiddle.net/v2Tdn/1/ .
Demo showing how to capture and preventDefault action on enter key press.
Here's the code that does the trick:
$('table').bind('keypress', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
console.log("Enter pressed");
e.preventDefault();
// focus 'td' in next column using jQuery '.focus()'
}
return false;
});
You have to understand that 'contenteditable' is making your markup behaving like a <textarea>. Normally, people press the tab key to skip from a form field to another.
Using jQuery javascript library, you can read the keyboard for enter key, javascript it to 'escape' the edition by setting focus somewhere else, perhaps the next td with contenteditable. :
$(document).ready(function () {
var $editableTd = $('td[contenteditable]');
$editableTd.bind('keypress', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
var ind = $editableTd.index(this); //check next td to target
$editableTd.eq(ind + 1).focus(); //set focus to it
e.preventDefault(); //do 'nothing'
}
});
});
jsFiddled here
I am new to coding and I would like to make a button that increment the count by 1 when a user clicks on it. I also would like to know how can I restrict it to be clicked only once. It is similar to the facebook like button but I want to create my custom button that would do the same thing but will just be shown in my website.
Here is the thing, using jQuery. The HTML part would be as under
<button>Click Me</button>
The jQuery code, that would be added to the <script> tag in <head> section.
var click = "1"; // set the variable
$('button').click(function () { // click on button
$(this).text('Clicked ' + click + ' times'); // write the variable value in it
click ++; // increment the variable
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/jRXBr/4/ (For testing; as per Pippin's suggestion)
To disable it, use
$('button').click(function () { // click on button
$(this).prop('disabled', true); // set its disabled property to true
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/jRXBr/1/ (For testing)
You can test the codes, using the fiddles that I have created, and you will understand how they work! :)