My Wordpress theme interacts with WooCommerce so that when a user selects a specific product variable from a drop-down a particular price is shown for their region.
This works fine when a user manually selects the drop-down, however, I'm trying to speed up the process by pre-selecting the appropriate option for the user based on a browser cookie (or lack of one).
For instance, if the user hasn't entered their region their browser will not have a cookie I've named "pc-entered" and the following jQuery script will run:
$(function() {
$('ul li.product').each( function() {
/*If no region set by cookie*/
if( document.cookie.indexOf("pc-entered=") < 0) {
/*Set downdown to generic*/
$(this).find("#pa_region").val('generic');
}
});
});
This works, successfully pre-selecting the correct 'generic' dropdown option automatically.
Unfortunately, and this is where I'm stuck - although the dropdown is correct the price isn't auto-populating like it does when a user manually selects their region.
E.g.
1) When auto-populated using my script:
2) When user selected:
I've tried replacing this in my script:
$(this).find("#pa_region").val('generic');
With the options listed on this thread, however, they don't seem to work in this case. I've also tried firing the script after all other scripts on the page and even delaying the script running with a timeout function but nothing seems to be working.
My test site is here.
TLDR - Why is my jQuery script not populating the price?
With $(this).find("#pa_region").val('generic'); you are only changing the HTML value (text) of dropdown.
You need to attach the event handler which will trigger the change to the function where you change the value.
function changeValue(){
$("#pa_region").val('generic');
$("#pa_region").trigger('change');
}
$( "#pa_region" ).change(function() {
console.log( "Handler for .change() called." );
});
This is the way on how to solve it.
I also made a JSFiddle so you can test it.
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 have a multi-page form created with gravity forms. It's form I use for lead generation, with the last step asking for the user's name, email, and phone number.
In the second last step before asking for user's personal info, there is a page with a "loading" gif spinner and the animated text "searching for a quote".
I need help to set up a javascript code for the second last page for when the user is on that page with the loading gif after 6.5 seconds it will automatically click the hidden page next button to take the user to the last page asking for their personal info.
I'm using the code below, which works only when the user manually clicks using the mouse or mousepad and click on the third last page. If the user enters details in the third last page and hits the enter or return key on the keyboard the code doesn't fire.
I'm not too familiar with Javascript. Just getting started learning.
I understand there's a gravity forms javascript gform_page_loaded, but that seems to fire the code on every single page rather than just when the second last page is in the user's viewport. Please help.
SEE CODE BELOW
<script type="text/javascript">
const btnSearchMortgage = document.getElementById("gform_next_button_13_16");
btnSearchMortgage.addEventListener("click", function () {
setTimeout(function () {
document.getElementById("gform_next_button_13_9").click();
}, 6500);
});
</script>
The gform_page_loaded is the way to go. You can use the currentPage parameter it passes to only trigger code on a given form page.
jQuery( document ).on( 'gform_page_loaded', function( event, formId, currentPage ) {
if ( currentPage == 2 ) {
// bind your custom event
}
} );
PRE EDIT: It turned out that it was not about the disability of the button, but making some other actions after save. I debugged the page and found out that after making changes on a saved form, then page loses the javascript functionality in the (document).ready part. I've added the solution as an answer.
I have an entry page which has two buttons save and approve. The mechanism is something like, you can fill the form and save, then approve. You can also reach a saved page by refreshing the page or from the list of your saved pages.
The approve button is disabled if the form is not saved. I enable it from code behind after saving. Approve button also has a confirm button extender which takes its confirm text from javascript. I load it in (document).ready and its code is:
$(document).ready(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
});
,where GetConfirmTextForApproval() makes some calculations and returns the confirm text.
Now, my problem is, as the button is disabled when you open the form, the code above is not rendered at the first page load. This leads to the problem that, when I start to fill a form and save it, then approve it, I don't get any confirm text, because it does not run the function. But after refreshing the page or after I go to a saved form's page from another page, I get the proper confirm text.
So, how can I solve this problem? How can I get the proper confirm text even though the button is disabled at the first page load?
Note: I have to add that after saving, the url of the page is changed. The query string is added. That might also cause the problem.
You can use
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
But not when document ready, you need enable button when you want. Then you need create a event listener
$("#button").click(function(){
//Your code
if(GetConfirmTextForApproval()){
//You active the button and the text that you want show.
}
});
Solved my own problem:
As it was said in the pre edit of the question, the problem was caused because of making changes after the save. I've changed my function as:
$(document).ready(function () {
SetConfirmMessageForApproval();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
SetConfirmMessageForApproval();
}
function SetConfirmMessageForApproval() {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
}
This helps, if anyone else needs it.
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.
I'm trying to build a web page with a number of drop-down select boxes that load their options asynchronously when the box is first opened. This works very well under Firefox, but not under Internet Explorer.
Below is a small example of what I'm trying to achieve. Basically, there is a select box (with the id "selectBox"), which contains just one option ("Any"). Then there is an onmousedown handler that loads the other options when the box is clicked.
<html>
<head>
<script type="text/javascript">
function appendOption(select,option) {
try {
selectBox.add(option,null); // Standards compliant.
} catch (e) {
selectBox.add(option); // IE only version.
}
}
function loadOptions() {
// Simulate an AJAX request that will call the
// loadOptionsCallback function after 500ms.
setTimeout(loadOptionsCallback,500);
}
function loadOptionsCallback() {
var selectBox = document.getElementById('selectBox');
var option = document.createElement('option');
option.text = 'new option';
appendOption(selectBox,option);
}
</script>
</head>
<body>
<select id="selectBox" onmousedown="loadOptions();">
<option>Any</option>
</select>
</body>
</html>
The desired behavior (which Firefox does) is:
the user see's a closed select box containing "Any".
the user clicks on the select box.
the select box opens to reveal the one and only option ("Any").
500ms later (or when the AJAX call has returned) the dropped-down list expands to include the new options (hard coded to 'new option' in this example).
So that's exactly what Firefox does, which is great. However, in Internet Explorer, as soon as the new option is added in "4" the browser closes the select box. The select box does contain the correct options, but the box is closed, requiring the user to click to re-open it.
So, does anyone have any suggestions for how I can load the select control's options asynchronously without IE closing the drop-down box?
I know that I can load the list before the box is even clicked, but the real form I'm developing contains many such select boxes, which are all interrelated, so it will be much better for both the client and server if I can load each set of options only when needed.
Also, if the results are loaded synchronously, before the select box's onmousedown handler completes, then IE will show the full list as expected - however, synchronous loading is a bad idea here, since it will completely "lock" the browser while the network requests are taking place.
Finally, I've also tried using IE's click() method to open the select box once the new options have been added, but that does not re-open the select box.
Any ideas or suggestions would be really appreciated!! :)
Thanks!
Paul.
Have you considered calling the loadOptions method in the onblur event of one of the other interrelated fields on the form? This would load the list into the drop down box before it is clicked, but the behavior should still be similar.
I think you are going to have explore slightly different options to obtain what you want as you are probably stuck with Internet Explorer closing that drop down list if you use the onmousedown or onclick events. Another downside to using those events is if the user uses the keyboard to select the fields, your method may never get called.
I would suggest to load the contents of the selects that don't depend on any other select boxes on page load. Then in the onchange event of those selects load the contents of the rest of the selects that depend on them.
Your idea is sound from a programming point of view, but you will get that lag between clicking on the select and it being populated with all the options which from the user's point of view looks kind of sloppy.
I found a solution to this, the problem seems to lie in IE's implementation of onclick, hover, mouseover etc. After the items are added to the dropdown, the dropdown closes. If you instead of providing the method in the select attribute, let jquery add the function at runtime it works.
$(function() {
jQuery(".selectBox").live("focus", function() {
loadOptions();
});
});
The whole page:
<html>
<head>
<script src="jquery-latest.js" type="text/javascript"/>
</head>
<body>
<select id="selectBox" onmousedown="loadOptions();">
<option>Any</option>
</select>
<script type="text/javascript">
$(function() {
jQuery(".selectBox").live("focus", function() {
loadOptions();
});
});
function appendOption(select, option) {
try {
selectBox.add(option, null); // Standards compliant.
} catch (e) {
selectBox.add(option); // IE only version.
}
}
function loadOptions() {
// Simulate an AJAX request that will call the
// loadOptionsCallback function after 500ms.
setTimeout(loadOptionsCallback, 500);
}
function loadOptionsCallback() {
var selectBox = document.getElementById('selectBox');
var option = document.createElement('option');
option.text = 'new option';
appendOption(selectBox, option);
}
</script>
</body>