I have the below code with which I am basically syncing textbox value changes across various fields sharing the same class name. The issue is that this is not working in IE but working in Chrome. Can some please have a look and let me know what I am missing here.
My scenario : I have two tabs where I have textboxes..Initially the second tab is hidden and when user saves the page the without postback the second tab becomes available. So the second tab has textbox which when becomes visible is not being bound to the change event. If I refresh the whole page then the sync is working fine.
$(document).ready(function () {
$(".txtDateFrom").keyup(function () {
$(".txtDateFrom").val($(this).val());
});
});
Thanks
Related
Using Cognos Analtyics 11.1.7IF9.
I have a user who, oddly enough, wants Cognos to make his workflow more efficient. (The nerve!) He thinks that if he can use the TAB button to navigate a prompt page, he'll be faster because he never needs to reach for the mouse.
To test this I created a simple report with a very simple prompt page using only textbox prompts. As I tab I notice it tabs to everything in the browser: browser tabs, the address bar, other objects in Cognos, ...even the labels (text items) I created for the prompts. Oh... and yes, at some point focus lands on a prompt control.
Within Cognos, I see that the tab order generally appears to be from the top down. (I haven't tried multiple columns of prompts in a table yet.) I must tab through the visual elements between the prompts. Also, while value prompts get focus, there is no visible indication of this.
Is there a way to set the tab order for the prompts on a prompt page?
Can I force it to skip the non-prompt elements?
Can the prompts be made to indicate that they have focus?
I tagged this question with javascript because I figure the answer will likely involve a Custom Control or a Page Module.
Of course, then I'll need to figure out how all this will work with cascading prompts and conditional blocks.
I found a similar post complaining about this being a problem in Cognos 8. The answer contains no detail. It just says to go to a non-existent web page.
I had the same frustration as your user and I made a solution a while back that could work for you. It's not the most elegant javascript and I get a weird error in the console but functionally it works so I haven't needed to fix it.
I created a custom control script that does 2 things on a prompt page.
First, it removes the ability to "select" text item elements on the page. If you only have text items and prompts on the page it sets it's "Tabindex" to "-1". This allows you to tab from one prompt field to the next without it selecting invisible elements or text elements between prompts.
Secondly, if you press "Enter" on the keyboard it automatically submits the form. I am pasting the code below which you can save as a .js and call it in a custom control on a prompt page. Set the UI Type to "None"
define( function() {
"use strict";
function AdvancedControl()
{
};
AdvancedControl.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
function enterSubmit (e)
{
if(e.keyCode === 13)
{
try {oControlHost.finish();} catch {}
}
};
function setTab () {
let nL = [...document.querySelectorAll("[specname=textItem]")]
//console.log(nL)
nL.forEach((node) =>{
node.setAttribute('tabindex','-1')
})
};
setTab();
let exec_submit = document.addEventListener("keydown", enterSubmit, false);
try {exec_submit;} catch {}
fnDoneInitializing();
};
return AdvancedControl;
});
I am updating my question because I have figured a way to make this work in Chrome, Firefox, Edge, etc. The last remaining browser is IE11.
I am using the autoComplete.js javascript library. Everything is hooked up and working.
I want to make a small accessibility improvement.
I notice when I type in the my search and the results list displays, I can press the TAB key to tab through the results list items.
However, when I press "ENTER" it does not trigger the query. This is strange behavior because when I press the down arrow after typing a search, I see the results list items highlighted (same as it did when I pressed the TAB button) and when I press ENTER the query fires.
I have tried adding tabSelect: true in the resultsLists config section, but I don't see any difference.
What I ended up doing was in my "resultItem" section, I added an eventlistener on the source to look for keyup events. I took the logic we had used for the "onSelection" section and applied it to the "resultItem" section.
What I see in IE11 is when I TAB through the list, I do not see the "selected" class getting added to the autocomplete suggestions. I can tab to them, but when I press ENTER it is only getting what I have typed in the input field.
Basically, the code I have looks like this, but i think this is an issue within autoComplete.js. This is totally understandable since the world is leaving IE11 behind. Our team may determine is not worth spending the time to fix.
A short code example:
resultItem: {
content: function content(data, source) {
source.tabIndex = 0;
source.innerHTML = data.match;
source.addEventListener('keyup', function (event) {
if (event.keyCode == 13) {
// do something
}
});
document.querySelector("#div-autoComplete").style.display = "block";
input.classList.add("div-expanded");
},
element: "li"
},
On this page
https://www.s1biose.com/produit/savon-artisanal-bio-la-cannelle
I want to disable the "Add to Cart" button. So I added the following code in a JS file of my theme :
(function ($) {
$('.commerce-order-item-add-to-cart-form .btn').prop("disabled", true);
})(window.jQuery);
It works, but there is a problem.
When I change the variation of the product, the button activates. Why ?
I want him to be disabled.
In this screenshot, the button is disabled
In this screenshot, the button should remain disabled. But it does not work
Changing the dropdown fires a network event. Your DOM is updated on the success of this event. I suggest you trace the functions which are responsible for re-rendering this component within your template and make the appropriate changes.
const disableBtn = () =>
$('.commerce-order-item-add-to-cart-form .btn').prop("disabled", true);
$(document).ajaxSuccess(disableBtn);
The above code snippet is a simple and very naive solution. It works, but I don't recommend you use it, but learn from it. I.e. I would NEVER do this in production.
Without access to your source, I can't help you further.
I am using JQM for mobile web application development. I am trying to hide/show a part of the form depending on a checkbox status. This is working fine with iphone but behaving weirdly on android phone like when the user selects the check box it displays that block of form but immediately hides back and gets unchecked automatically. I am new to JQM, please let me know if I missed some thing to mention here.
$('form #addsp').click(function () {
if ($('form #addsp').is(':checked')) {
$('#addDetail').show()
} else {
$('#addDetail').hide()
}
});
$("input[type='checkbox']")[0].attr("checked",true).checkboxradio("refresh");
You need to refresh the checkbox to have it checked.
You can read more here:
http://jquerymobile.com/test/docs/forms/checkboxes/methods.html
I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.