I have a couple of HTML elements on a page. Whenever the page context is invalidated and it re-renders the elements are re-rendered with no visual cue of the selected option.
If I check for the selection using $('.select1 option:selected') the selected option is returned. However, it is not rendered as selected. If it's a drop-down, then the first element shows up. If it's a multi-line select, the first (firefox) or last (chrome) element shows up with a greyed out select line on it.
If I then click the selected element a second time, it shows up as selected.
Anyone know how to fix this?
I implemented the solution here: Meteor form state not being saved
Store the selected value in a session variable on click:
Template.packageViewer.events({
'change .tagselect': function(){
Session.set('tag', $('.tagselect :selected').html());}
,
'change .groupselect': function(){
Session.set('group', $('.groupselect :selected').html());}
,
'change .packageselect': function(){
Session.set('package', $('.packageselect :selected').val());}
});
Then set the select selected value in the post-render function:
Template.packageViewer.rendered = function(){
$('.groupselect').val(Session.get('group'));
$('.tagselect').val(Session.get('tag'));
}
Hacky, but works.
Maybe you can use $('.select1').trigger("change"); function.
Related
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
I think it has to do with how select2 creates the actual dropdown outside of the element it is based on.
Is there a way to suspend the cells "blur" activity until the user has made a selection, or in general just make the select2 more usable inside the kendo grid?
I hastily made this jsfiddle. I put the select2 inside the first column.
function testEditor(container, options) {
var customInput = $('<select name="' + options.field + '" data-text-field="text" data-value-field="id" />');
var scheduleContactSelect =
customInput
.appendTo(container)
.select2(
{
data: ["test1", "test2"]
});
}
http://jsfiddle.net/zaq3a3o5/
As you can see, the moment you start interacting with the select2, the cell closes edit mode but leaves the select2 hanging.
So it turned out the solution was three parts.
Use the "dropdownParent" select2 config option to make sure it appends the disconnected dropdown part inside the same element.
Make sure you are using Select2 4.03 or higher. (I had to upgrade to 4.03)
Define the "focusout" event while inside the "select2:open" event for the select2 search box so we can preventDefault() and stopPropagation() to prevent "focusout" from bubbling up.
I am getting a problem to reflect the value in the view, I don't want to load the complete page because its very costly to load the page,
I have two controllers(controller1 and controller2), one service(service1) and two views(modalwindow.html and product.html).
The scenario is:
1.User is on product.html(contains multiple accordions) and user explicitly close all the accordions.
2.User clicked on icon which opened modal window, since it's opened the modal window it's not going to change the URL on the address bar.
3.Modal window(Modalwindow.html ) has the link of show product, since the product page is the active page(show product is the accordion which closed by user explicitly) on the browser.
on the click of link, appropriate accordion should be open on the product.html
I am communicating between modal window controller (controller2.js) and product page(controller1.js) through service (service.js), I am calling controller2
how to fix this issue without loading a complete page
Assuming the modal closes when a product is selected, it can return the value to the calling controller. Then it opens the specified accordion.
I fiddled around in your fiddle. You are mixing two ways of showing your categories in the fiddle: an accordion value, and two boolean values (categoryAccordion, productAccordion). I moved to using one way and it seems to work with the eventCallback. Also, you checked wrongly for your 'args' in the eventCallback. You're passing it back as an array, so get the value out of the array first.
Also, you checked wrongly for your 'args' in the eventCallback.`
if (args[0] == 'Product') {
$scope.productAccordion = true;
$scope.categoryAccordion = false;
} else {
$scope.productAccordion = false;
$scope.categoryAccordion = true;
}
See fiddle.
Should it not be working in your real code, it might have something to do with the following SO question.
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
I read several threads that talk about how the Address Bar in IE is basically the first one to get focus when using TAB (MSDN's own docs talk about this).
Yet, I have seen situations where this doesn't always have to be the case....
I have a master page and inside my content area is a formView.
It defaults to INSERT view and can never leave it (they can only insert not edit and reading is handled elsewhere)
So on my page load for the page I have:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then
'Set the default field to position the cursor there...hopefully
Dim FCtxtHrEmployeeId As TextBox
FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox)
Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString)
End If
Now that works, when the page loads it sets the cursor to the employeeID text box inside the formview's INSERT template.
HOWEVER, when I hit TAB it takes me to the address bar and THEN if I hit tab again it takes me through the rest of the items on the page.
I set the tab index of the first item to 11 and then incrimented from there (I had read that IE's toolbars have tab indexes too so I thought perhaps using a higher number would bypass those, but again that doesn't REALLY make sense since it would still start at the lowest number, but I gave it a shot thinking it would move forward from where the focus was set.) If I click on the textbox and then hit TAB it DOES move through the page like I would expect.
It is just when the page loads and gets the focus set to the employeeID textbox that hitting tab moves it to the address bar.
I also tried setting the other controls to -1 (those I didn't want it to tab to), still no luck there.
So... what can I do to get around this?
There MUST be a simple way to set the focus to the employeeID textbox and ensure that pressing TAB after that moves to the next control in the formview's insert template and does NOT jump up to the address bar?
The following jquery code seems to be working fine for me..
$(window).load(function () {
$('.myClass :visible:input:enabled:first').focus();
});
$('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) {
if ((e.which == 9) || (e.keyCode == 9)) {
$('.myClass :visible:input:enabled:first').focus();
}
});
I found another better option which is fastest as of what I tried.
Here's the code for that
function handleTabOrder() {
$('.myClass :visible:input:enabled').each(function (index) {
$(this).attr('tabindex', index + 10);
});
$('.myClass :visible:input:enabled:first').keydown(function (e) {
if (e.keyCode == 9 || e.which == 9) {
$("[tabindex=10]").focus();
}
});
}
What I have done here is to assign Tab order to all the visible controls on the page, then I have handled the key down event of only first control(that shifts the control to address bar) and now it shifts the control to next visible input item on the screen..
Its just a work around but works faster than any of the other things mentioned in the thread.
Just write the above function and all it in on-load event of page.
I was having this issue as well. For me, it was being caused by the use of the .select() method in order to bring focus automatically on a text field as soon as the page loaded. I changed my code to instead use JQuery's .focus() method and that resolved the issue.
I faced similar problem in IE. After some analysis I found that, this problem occurs if there is any HTML content outside form.
for example:
<html>
<div id="1">
</div>
<form>
//other code
</form>
</html>
It worked for me, after I moved all HTML inside form tag.
<html>
<form>
<div id="1">
</div>
//other code
</form>
</html>
Have a look at: http://www.w3schools.com/tags/att_global_tabindex.asp
Your txtHrEmployeeId element should have tabindex 1 and all other elements should have higher values.
-1 is not valid
Also verify that the tabindex are correct in the html that gets rendered (right-click in page and "view source").
I realize this is an old post, but an even simpler method is to add a "tab-stop" attribute to the form element with the last tabindex. Then bind a keydown listener and force focus to the first tabindex when the tab-stop is encountered.
Here's a simple example:
<input type="text" tab-stop />
$document.bind("keydown", function(event) {
var attrs = event.currentTarget.activeElement.attributes;
if (attrs['tab-stop']) {
angular.element.find('select')[0].focus();
event.preventDefault();
}
});
};
The answer mentioned in my other post works fine but it made the page take a huge performance hit because with every key press on the page the whole DOM was being searched for the elements.
So I found a new more optimized solution
var myNameSpace = function(){
this.selector = '.myClass :visible:input:enabled:first';
this.myElement = $(selector);
this._body = $('body');
var _self= this;
this._body.on('keydown',_self.selector,function(e){
if ((e.which == 9) || (e.keyCode == 9)) {
_self.myElement.focus();
}
});
};
The general idea being to 'cache' the node to be accessed. No need to traverse the DOM again and again for just selecting.
I had this same problem. It turns out mine was related to the ajax modal popup extenders. a modal popup was being shown, even though technically i could not see it because it was wrapped inside a parent div that was hidden. if you are using modal popup extenders, this could be causing an issue like this.
If you are using JSF or Primefaces, you can make use of:
<p:focus for"formname"></p:focus>