I have to incorporate a Healcode widget (through Mind Body) into the site I'm working on. My goal is to have a button on that page change the dropdown selection of the Healcode widget and reload the widget to reflect the dropdown change.
So far I've been able to create a button that changes the dropdown selection to the desired value when clicked. However it does not reload the widget to reflect the change. I still have to manually click the dropdown to make that happen.
Any help is appreciated!! Here's what I have so far:
HTML FOR THE HEALCODE DROPDOWN FILTERS:
<div class="filters">
<select name="mbo_class" id="mbo_class">
<option value="">All Classes</option><option value="58">200 hour Teacher Training</option>
<option value="3">Basics</option>
<option value="59">Basics/Power</option>
<option value="85">Basics/Restore + Meditation</option>
<option value="156">Cozy Winter YIN & Restore</option>
<option value="23">Deep Stretch/YIN</option>
<option value="154">Express Power</option>
<option value="140">HIIT Power Yoga</option>
<option value="12">Music & Power Yoga</option>
<option value="5">Power Yoga </option>
<option value="46">Power Yoga/Restore </option>
<option value="138">Simply Stretch</option>
<option value="30">Tween Yoga</option>
<option value="139">YOD (Yoga + HIIT)</option></select>
</div>
HTML & JS FOR BUTTON TO CHANGE THE SELECTION:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("#mbo_class").val("3");
});
});
</script>
<button id="btn3">Set Value</button>
I'm thinking a working solution might be somehow capturing what the dropdown is changed to and then reloading the page, but my attempts have not worked thus far. Here's my latest attempt:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("#mbo_class").val("3");
});
var selectedProduct = sessionStorage.getItem("product");
if(selectedProduct != undefined || selectedProduct != null){
$("mbo_class").first().find(":selected").removeAttr("selected");
$("mbo_class").find("option").each(function () {
if ($(this).val() == selectedProduct) {
$(this).attr("selected", true);
}
});
}
$('mbo_class').change(function () {
sessionStorage.setItem("product", $("mbo_class").first().val());
location.reload();
});
</script>
<button id="btn3">Set Value</button>
So I found a solution! It isn't quite the direction I was planning to go, but it works! Since I can't actually change the HTML of the widget–the research I was doing led me to a lot of dead ends.
In the HealCode widget app, I created a version of the schedule widget for each class type (the filter options mentioned above).
Then I set the button to change the entire div id to display the correlated schedule widget. (Rather than just filtering the current schedule widget.)
We'll use the example of filtering for the "Basics Class".
Here's my HTML code:
<div id="widget-container">
<healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c106917a43" data-widget-version="0">
</healcode-widget>
<a id="schedule-basics" class="button">Basics schedule</a>
Here's the script–which changes the schedule displayed to the "Basics Class" schedule (much like the filter selection would):
$(document).ready(function() {
var scheduleWidgetMarkup = '<healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c1218147a43" data-widget-version="1" ></healcode-widget>';
$('body').on('click', '#schedule-basics', function(e) {
e.preventDefault();
$('#widget-container').html(scheduleWidgetMarkup);
});
});
Related
Hi I have HTML bootstrap code:
$(document).ready(function() {
$("#us-state").find('select').change(function() {
var $val = $(this).val();
if ($val === 'US') {
$('.us-state-select').show();
} else {
$('.us-state-select').hide();
}
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col-sm mb-5 us-state-select">
<label>USA STATE</label>
<select name="order_from_address_state" class="form-select">
<option>Choose country</option>
<option value="AL" name="<AL>" selected>Alabama</option>
<option value="AK" name="AK">Arkansas</option>
</select>
</div>
<div class="col-sm mb-5" id="us-state"><label>Send from country</label>
<select name="order_from_address_country" class="form-select">
<option>Send from</option>
<option value="US" name="US">USA</option>
<option value="CA" name="CA" selected>Canada</option>
</select>
</div>
(Also available on JSFiddle)
My problem is simple.
I am using foreach to show all countries and statesm but...
check the jsfiddle.
if country is selected different to the US and its load with this different country, it shows div us-state-select and if u click on different countries, it dissapears and works as expected.
But I dont want to show div with states in the case that page is loaded and its selected different country than US. How to do that?
its obvious on fiddle, I selected canada and on page load there is div with states and when click on different value for example: Send from at country box, states dissapear and it works as expected then.
Please, can you give me some advice?
I am newbie at jquery, thx.
Change your JS to be like this:
I am basically checking this logic once the page is ready and I also added some refactor in your code to help readability
$(document).ready(function() {
const checkValues = () => {
var value = $("#us-state").find('select').val();
console.log(value)
if(value === 'US'){
$('.us-state-select').show();
}else{
$('.us-state-select').hide();
}
}
$("#us-state").ready(checkValues);
$("#us-state").find('select').change(checkValues);
});
I have a search and filter form (see top of page over the posts grid) here:
https://ba2018.wpengine.com/sf-test-side
The second field of the form named "Boligtype" is a dropdown allowing multiple choices.
I want to create a button elsewhere on the same page (outside of the search and filter form) - which on click activates the "Villa" option in the above-mentioned dropdown.
I am new to js so have tried some different options myself, but pretty sure they have been pretty long shots. All I know is I need an "onClick" event, from researching articles here and on Google. But I am still new to js, so don't know where to take it from here really:
<button onclick="myFunction()">Villas</button>
<script>
function myFunction() {
}
</script>
You can find the element and trigger the click event (or whatever event you are listening to).
function myFunction() {
const select = document.querySelector('#mySelect'); // Find element
select.click(); // Click element
// If you are not listening to click or need a different event
const event = new Event('customEvent');
select.dispatchEvent(event);
}
With your particular page it seems you are listening on the label
document.querySelector('.sf-field-post-meta-filter_boligtype > label').dispatchEvent(new Event('click'))
Here is a simple example that shows how you can make first option in the drop down selected with button click:
<!Doctype html>
<html>
<head>
<script>
function buttonClick(){
document.getElementById("first").selected = true;
}
</script>
</head>
<body>
<select id="stateSelect" name="stateSelect">
<option value="none" id="first">first option</option>
<option value="AL">second option</option>
<option value="AK">third option</option>
</select>
<button type="button" onclick="buttonClick();" id="button"> click me!</button>
</body>
</html>
we add an event listener to the button using onclick="" attribute so the function buttonClick(); will be called and activate the first select option therefor you can make this for whatever option you need.
If this solves your problem I will explain this.
function myfunction(value) {
console.log(value);
switch (value) {
case "hotel": alert("hotel");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
case "villa":
alert("villa");
// $('#mybutton').removeClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').removeAttr('hidden');
break;
case "test": alert("test");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
default: alert("nulll");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" onchange="myfunction(this.value)">
<option value="hotel">hotel</option>
<option value="villa">villa</option>
<option value="test">test</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<button id="mybutton" class="btn btn-primary" hidden>Click the Villa option</button>
When I open a new site with the selectbox for example site x then the option x is selected like it should but when I return by clicking the arrow in the left corner above I return to site y but option x is still selected.
Can anyone help me?
<nav id="navigation" class="navigation">
Home
<select id="Menu">
<option disabled selected hidden> # </option>
<option href="#">#1</option>
<option href="#">#2</option>
<option href="#">#3</option>
<option href="#">#4</option>
</select>
<script>
document.getElementById('Menu').onchange = function() {
window.location.href =
this.children[this.selectedIndex].getAttribute('href');
}
</script>
What should I add to the script to avoid that problem_
Thank you
Have an hidden input on your pages to identify refresh
<input type="hidden" id="refresh" value="no">
Now use JQuery to check its value & correspondingly refresh the site explicitly,
$(document).ready(function(e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
So basically first time the value would be no when page loads & then changed to yes, later if visited again yes would trigger a refresh.
Courtesy of this SO
This is my code. It is in a php file. It doesn't quite do what I want. It hides one option and displays the other, but what I need to do is not just the option to be hidden visually, but not to display at all in the html. Now if you click view source it shows all the divs. I need it when I click one option, the others to disappear from the html and view page source, just the selected to be in there. Any ideas on that?
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="have" style="display:block;">1</div>
<div id="look" style="display:none;">2</div>
<div id="code" style="display:none;">3</div>
<script>
function showstuff(element){
document.getElementById("have").style.display = element=="have"?"block":"none";
document.getElementById("look").style.display = element=="look"?"block":"none";
document.getElementById("code").style.display = element=="code"?"block":"none";
}
</script>
You can create a div to put the active option on it.
Something like this
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="optionContainer">
</div>
<script>
//Object with the options. you can access for example have with options['have'] or options.have
var options = {'have':'<div id="have"><b>1</b></div>',
'look':'<div id="have"><b>2</b></div>',
'code':'<div id="have"><b>3</b></div>'};
function showstuff(element){
//Replace the inner HTML of the div optionContainer with the string in the option
document.getElementById("optionContainer").innerHTML = options[element];
}
</script>
I created this jsfiddle to see it in action
Using jquery methods- show(), hide() and remove(). One can use $("#id").remove() to remove the html from the rendered page.
https://api.jquery.com/remove/
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.