I am using knockoutjs and in my Template i have a foreach loop that will display the data it grabs from the JSON data i want to set the focus to the first input on the screen it works perfectly when there is just on input on the screen but when it gets to the second screen there are two in puts it only sets focus to the last input on the screen
here is my HTML:
<div id="section">
<span data-bind="template: { name: 'screenTemplate', foreach: screens, as: 'screen'}"></span>
<script type="text/html" id="screenTemplate">
<!-- ko if: showFlds -->
<!-- ko if: showNote -->
<span data-bind="template: { name: 'fldTemplate', foreach: flds}"></span>
<!--/ko-->
<!--/ko-->
</script>
<script type="text/html" id="fldTemplate">
<form>
<span class="text" data-bind="text: fieldName"></span>
<br/>
<input type="text" class="inputVal" data-bind="valueUpdate: 'afterkeydown', value: inputValue, disable: (inputValue() == expectedValue()), visible:(inBool() != false)" />
<br/>
</form>
</script>
<div data-bind="visible:screens()[cScreen()].rdtNote() === true">
<h2 style="color: red"><span data-bind="text: rdtNotification()[0].description()"></span></h2>
<button data-bind="click: makeHidden">Acknowledged</button>
</div>
As shown the hasFocus is on the input in the field Template
I want to know if there is a way I can make it set focus on the first input and then move to the next input once that input is correct
If any more information is needed please ask I will do my best to provide
P.s
Any answer to this must also work in IE6 as it will eventually be running on a IE6 scanning gun
Current Progress:
I have used jQuery
$(document).ready(function(){
$('form').find('input[type=text],textarea,select').filter(':input:enabled:visible:first').focus();
})
But when using this it does not automatically select the next input when the screen changes is there a way to get that to work ?
SOLVED MY PROBLEM :
$(document).ready(function() {
$('form').find('input[type=text],textarea,select').filter(':input:enabled:visible:first').focus();
});
$(document).keyup(function(e){
$('form').find('input[type=text],textarea,select').filter(':input:enabled:visible:first').focus();
});
var e = $.Event("keyup", { keyCode: 13}); //"keydown" if that's what you're doing
$("body").trigger(e);
Using this I am able to set the focus to the first visible enabled input and then using jQuery to trigger the Enter Key key up I was able to make sure that the next input was always focused
Thanks #neps for the push in the right direction
Working Plunker
Related
I am using angular material for checkbox.
in component.ts
dataList: any[] = [
{ name: 'EmployeeName', flag: true, 'label': 'Employee Name'},
{ name: 'EmployeeDepartment', flag: false, 'label': 'Employee Department'},
{ name: 'EmployeeExperience', flag: false, , 'label': 'Employee Experience'}
]; // will have 30+ element in array
html (this opens as modal)
<div *ngFor="let data of dataList">
<section>
<mat-checkbox [checked]="data.flag" (change)="onChange($event, data)">{{data.label}}</mat-checkbox>
</section>
</div>
<div>
<button (click)="onClose()">
Close
</button>
<button(click)="onApply()">Apply</button>
</div>
some of the checkbox will be pre-checked, if checked than behind modal there we will be filter dropdown for checked object.
problem is if I check the object(eg- Employee Department), than behind the modal that object(Employee Department) will be added instantly and the change in UI will be visible. what I want is add that filter object (user can select multiple object at a time) only after clicking apply button and changes in UI should be visible. if I click on close that nothing should be added.
html for behind modal page
//<ngx-select-dropdown> whole config is not listed
<div class="grid-container">
<ng-container *ngFor="let data of dataList">
<div class="grid-item" *ngIf="data.flag">
<div>
<p>{{data.name }}</p>
</div>
<ngx-select-dropdown [config]="config">
</ngx-select-dropdown>
</div>
</ng-container>
</div>
I tried keeping checkbox values in another object and set value only on click of apply but the problem persisted. what should I do in onChange($event, data) and onApply() so that I can achieve the behavior I want.
Thanks in Advance
You could simply save the checkbox values in another object and once the user hits the apply button then have your function for example
onApply() that will assign the new values from the checkbox to your data
I seem to be able to hide the resource container using
resource.parent().parent().hide();
but I don't understand why the input value is not clearing with
resource.parent().siblings('.resource-value').children('input').val('');
when I use
resource.parent().siblings('.resource-value') I get the parent of the input value but adding .children('input').val('') on top of that does nothing or if I add .children('input:text').val('')
I have very similar code for something else which works just fine, looked at other questions and not sure what I'm missing.
function removeResource(resource) {
'use strict';
//hide resource on screen
resource.parent().parent().hide();
//set resource text value to ''
resource.parent().siblings('.resource-value').children('input').val('');
}
(function($) {
'use strict';
$(function() {
$('#resources').on('click', '.remove-resource', function(evt) {
// Stop the anchor's default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
removeResource($(this));
});
});
})(jQuery);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="resources">
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="1" />
</div>
<p class="hide-if-no-js"><a title="remove resource" href="javascript:;" class="remove-resource">remove resource</a > </p>
<!-- .hide-if-no-js -->
</div>
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="2"/>
</div>
<p class="hide-if-no-js"><a title="remove resourcee" href="javascript:;" class="remove-resource">remove resource</a> </p>
<!-- .hide-if-no-js -->
</div>
</div>
</body>
<html/>
Tried your code and worked fine for me in terms of the actual value of the field clearing, though in inspector the HTML element still has the value attribute showing.
You can use
.attr('value','')
to clear that too http://jsfiddle.net/bvtg93dm
You just have to change the value witch jquery to set "" (so, empty).
input.attr('value','')
Try to log your sibling element with
Try to change your removeResource function to
function removeResource(resource) {
'use strict';
//hide resource on screen
var parent = resource.parent().parent();
parent.hide();
// log your element
console.log(parent.find('.resource-value input'));
// make sure you are getting an element you need
console.log(parent.siblings('.resource-value').childer('input').get(0);
//set resource text value to ''
parent.find('.resource-value input').val('');
}
I have a simple dropdown that opens up a search field when you click it. Even though I have the text field of this search set to autofocus, it's not working for all browsers.
What method of Javascript/jQuery would I use to check if the containing UL css display is set to block, so that I can force the focus to be on the field using .focus().
HTML:
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.
check the dom element in set intervals to see if its css has changed
trigger an event when the css of the dom element is changed by user interaction/your code.
the first way will look something like this:
var element = $(".dropdown-menu");
function checkForChanges()
{
if (element.css('display') == 'block')
{
// do your .focus() stuff here
}
setTimeout(checkForChanges, 500); // does this every half second.
}
or the second way:
$('.toggle').on('click', function() {
$('.dropdown-menu').toggle();
$('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
if($(this).css(.css('display') == 'block')
{
// do your .focus() stuff here
}
});
You can check the display value of the ul using pure JavaScript with this:
JS:
var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
//do what you want.
}
Or using jQuery:
if ($('.dropdown-menu').css('display') === 'block') {
//do what you want.
}
It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.
Html
<div class="quickSearchContainer">
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
</div>
Javascript
$('#quickSearchContainer').on('show.bs.dropdown', function () {
$('#inputSearch').focus();
});
I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!
how can I call a function in the viewModel from within a ko.binding?
I want clicking on an editorable area to also show the selected text in a select-box.
I have also run into some other problems:
Full-text doesn´t show at until user has chosen from "select".
Editing the text in the full-text inline editor cause the outline editor to collapse.
Editing the header cause the observable to include all HTML-code for edited header.
In the binding: "tinymceInstance.remove()" returns an error message. Commenting it out however causes the desired highlighting function, but inline editor cannot be accessed.
Highlighting does not occur as wanted.
Here´s the html:
<select size="2" style="width: 170px;" data-bind="options: Textbatches, optionsCaption: 'Choose...', optionsText: 'TextbatchTitle', value: SelectedText, click: $root.showIt2Me"></select>
<div>
<fieldset>
<legend>Textbatches:<img id="btnMetatoggle" class="ui-icon ui-icon-arrow-4-diag" style="display: inline-block" /></legend>
<div id="details" class="textbatchdetails" data-bind="with: SelectedText">
<div class="editor" data-bind="tinymce: TextbatchText, tinymceOptions: { selector: 'div.editor', inline: false }"></div>
</div>
</fieldset>
</div>
<div id="full-text">
<fieldset>
<legend >Full text:</legend>
<div>
<!-- ko with: $root.SelectedText -->
<!-- ko foreach: $root.Textbatches() -->
<div data-bind="attr: {'id': 'Text' + TextbatchId}, event:{ click: $root.clickedThis }, css: { 'inverted-text': TextbatchId === $root.SelectedText().TextbatchId}">
<h2 class="editableArea" data-bind="tinymce: TextbatchTitle, tinymceOptions: { selector: 'h2.editableArea', inline: true }"></h2>
<div class="editableArea" data-bind="tinymce: TextbatchText, tinymceOptions: { selector: 'div.editableArea', inline: true }"></div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</fieldset>
</div>
See Fiddle: http://jsfiddle.net/x8581f1y/23/
Any help highly appreciated.
Thanx in advance!
The parameters you have for your binding handlers are incorrect. You're misusing one of the parameters which is likely causing issues down the line. For both init() and update(), the parameters are:
element
valueAccessor
allBindings
viewModel
bindingContext
Since you ultimately want a reference to the view model, there's no need to use the binding context, you have a direct reference to the view model right in the fourth parameter.
function (element, valueAccessor, allBindings, viewModel, bindingContext) {
...
viewModel.someFunction(someArgs); // call directly on the view model
}
As for your other issues, I don't know much about tiny mce but you're making some assumptions that are invalid. There is no id on the elements so it will always be undefined in your handler. The id gets assigned after tiny mce is initialized on the element. But since you just need to access the reference to the instance, all you need use is the element itself, not the id.
ko.utils.domNodeDisposal.addDisposeCallback(element, function (element) {
var tinymceInstance = $(element).tinymce(); // get the instance
if (tinymceInstance) {
tinymceInstance.remove();
}
});
I have a div that looks like this:
<div class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="display: none; ">
<span class="Label">MSRP:</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em class="ProductPrice VariationProductPrice">$42.00</em>
</div>
</div>
</div>
I need a script that changes the color of the price value to red if it changes. I started by getting the value when the page loads and figured I could do something like, if < original value, style red, but I am still new to JavaScript and cant quite work it out.
Any input is appreciated! Thanks!
At first I would at an ID:
<em id="price" class="ProductPrice VariationProductPrice">$42.00</em>
then you can make something like
if ($("#price").text().substr(1) < original_value) {
$("#price").css("color","red");
}
And the if statement should be inside your change function
You need to have a input to be able to have a event on change.
So my suggestion is to add a input (you can remove the border to not look like a input), and add a class that applies the color red.
html
<input id="Input_id" class="ProductPrice VariationProductPrice" value="$42.00">
jQuery
$(document).ready(function () {
$('#Input_id').on('change', function () {
$(this).addClass('red');
});
})
Demo here