I am currently working on a dynamic page setup on my site which involves radio buttons. There are 4 radio buttons with each one linking to a different dynamic page and I have added the below code to change the url to match the relevant selection
export function radioGroup1_change() {
const label = $w('#radioGroup1').value
let url = wixLocation.to(`/dynamic-page/${label}`);
}
(Nearly) everything works fine - the pages change according to the selection made in the radio buttons and the url follows suit. However, the page is set up to load onto 'Page 1' of the dynamic page and on loading the radio button for Page 1 is highlighted to indicate we are on that page. When i click on 'Page 2' (as an example) on the radio buttons, everything changes correctly but the radio button reverts to highlighting 'Page 1' instead of staying highlighted on 'Page 2'.
Is there something missing from this code which I need to add to correct this please as I have scoured this forum but not been able to find any answers unfortunately?
Thanks
You can use a if/else statement to change the selected value of the Radio Button Group using the selectedIndex function. Put the code under the page's onReady() function and use Wix Location's Path function to check which page you are on.
Related
I'm having an issue right now with getting the right element for a variable.
Here is what I want to accomplish
When a user click on a link from the sidebar, I want the following info :
Click text
Click URL
Click ID
Click Element
Click Classes
Page URl
At this moment I can have all but Click Classes which is empty ""
But I also want when I click the link or the button, I also want the title that is in the elementor container.
Image link : https://i.imgur.com/NoDv2wh.jpg
I already setup my TAG and Triggers
So I tried following some of the info I found one the forum, but clearly I have no idea how to accomplish that and I search a lot on Google without clear indications.
Here the code for my custom JS
function() {
return {{Click Element}}.closest(".elementor-widget-container").find('h4').text();}
Right now, I just want to be able to create a custom variable to get the header text when I click on a button or a link.
Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.
$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.
Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"
Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.
I am building a site for work.
It consists of four pages which are the exact same structure but different content.
The structure is three columns, the first is a vertical series of check boxes, the second is a logo, the third is another vertical series of check boxes.
The goal is to,
Be able to go to page one, click the check boxes needed, and keep those boxes checked upon refresh.
Then you should be able to click a link to the second page and have a fresh set of check boxes.
The content is there, the links are there, all of the check boxes are there and remain upon refresh.
The problem I'm having is that when I check a few boxes on page one and then click on the link to page two, the same check boxes are still checked, even though it's an entirely new page and new content.
I tried linking each of the four pages to their own JavaScript file and that didn't change anything. I am new to developing and am not sure what to try next.
Here is the JavaScript code I am using:
jQuery(function(){
if (localStorage.input) {
var checks = JSON.parse(localStorage.input);
jQuery(':checkbox').prop('checked', function(i) {
return checks[i];
});
}
});
jQuery(':checkbox').on('change', function() {
localStorage.input = JSON.stringify(jQuery(':checkbox').map(function() {
return this.checked;
}).get());
});
This works great if it's a one page site but again, when I visit one of the other pages, the check boxes don't refresh.
If anyone can, please help me with this.
You're storing the checkbox information in input on localStorage for every page. The data is just an array of true/false values indicating whether or not the checkboxes on a page are checked.
If you run this code on another page which has checkboxes then they'll be put into that state.
You need to store the information in a way that identifies which page it's on, e.g.
localStorage[window.location.href] = ...
Or
localStorage.setItem(window.location.href, ...)
You could also store the state of the checkboxes against their names/ids to avoid coupling the state to the order of the boxes on the page e.g.
let state = {
'choice0': true,
'choice1': false,
...
}
I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});
I am having an issue of hiding and displaying content on a separate page if a certain radio input has been checked. Currently I am trying to hide special content if the user hasn't checked one radio input. I have code that works for that page which switches the banner to allow them to go to the page after they complete this task, but when I go to the next page the content doesnt show up.
Here is my current script for the banner to hide and show based on the radio input being checked.
if ($('input[name=sexo-field]:checked').length > 0) {
$("#pdfFlipButton").show();
$("#pdfFlipButtonOff").hide();
} else {
$("#pdfFlipButton").hide();
$("#pdfFlipButtonOff").show();
}
But how would I go about showing or hiding a div on the next page based on these parameters?
This is not easy and you have 3 not good ways:
The page that must be affected, is a child page and send data from parent page to child page.
In both page create ajax functions, send direction from one and another must check the server in a few seconds:
setInterval(function(){
//if radio checked
}, 3000);
As mentioned in comments, submit radio button and refresh second page.
As #adeneo said, you can wrap the radio button in the form element and after submitting that form, catch values on the next page which the form points on. Or as #Michael Alexander Montero said, you can use sessionStorage which I would rather recommend.
Here is the documentation of how to use sessionStorage. In your case it would be for example:
sessionStorage.setItem('radiochecked', true);
And in the next page you will add following line:
if(sessionStorage.getItem('radiochecked') {
// display the panel
}