For reference: I'm using Wordpress and primarily Elementor page builder. My understanding of any kind of coding knowledge is extremely limited, so apologies in advance for any misunderstandings on my part. I also know this may not be a very efficient system, but I'm kind of learning 'as I go' and working with what I understand so far :
- I have a bunch of divs that I use jquery to change the content of to show my products
- Within one of the product categories, I have sub-categories in the form of labeled radio buttons which also change the displayed products in each div
- Because the content change is triggered whenever a subcategory radio button value is selected, no content is initially shown when the category is opened. I want it to automatically show the content of the first radio button option (which is checked via the appended html code, but I don't understand what jquery needs to also consider it checked upon load?). Right now, it will only show the content if the user clicks a different radio button, then re-clicks the first radio button.
Example of code:
`jQuery(document).ready(function($){
$('#searchdiv2').prepend('<div class="tabscat"><input id="product-cat-sub1" type="radio" name="tab_itemcat" value="1" checked="checked"/><label class="tab_itemcat" for="product-cat-sub1">sub cat 1</label></div><div class="tabscat"><input id="product-cat-sub2" type="radio" name="tab_itemcat" value="2"><label class="tab_itemcat" for="product-cat-sub2">sub cat 2</label></div>
// continues with more sub categories //');
$('input:radio[name=tab_itemcat]').change(function(){
// cat - sub cat 1
// **the following is what I want it to show by default, as well as when 'value 1' of the radio button selections are triggered** //
if ($(this).val() === '1'){
//sub cat 1
//product 1
$('#div-1').removeClass('hidden-1');
$('#div-1').addClass('content');
$('#div-1').append('<div class="tag">tag1,tag2,tag3</div>');
$('#buy-product1').html('<b>title</b><br></br>');
$('#buy-price1').html('$123');
$('#buy-addtocart1').html('<a href="?add-to-cart=123" rel="nofollow" data-quantity="1" data-product_id="123" class=" add_to_cart_button ajax_add_to_cart"><button class=addtocart2>ADD TO CART</button></a><div class="added_to_cart"></div>');
//sub cat 1 - product 1 - sub select
$('#buy-product1').append('<div class="tabscat1"><input id="product-cat1" type="radio" name="tab_itemcat1" value="1" checked="checked"/><label class="tab_itemcat1" for="product-cat1">abc</label></div><div class="tabscat1"><input id="product-cat2" type="radio" name="tab_itemcat1" value="2"><label class="tab_itemcat1" for="product-cat2">def</label></div><div class="tabscat1"><input id="product-cat3" type="radio" name="tab_itemcat1" value="3"><label class="tab_itemcat1" for="product-cat3">ghi</label></div><div class="tabscat1"><input id="product-cat4" type="radio" name="tab_itemcat1" value="4"><label class="tab_itemcat1" for="product-cat4">jkl</label></div>');
// subcat 1 - product 1 selections
$('input:radio[name=tab_itemcat1]').change(function(){
if ($(this).val() === '1'){
$('#buy-addtocart1').html('<a href="?add-to-cart=123" rel="nofollow" data-quantity="1" data-product_id="123" class=" add_to_cart_button ajax_add_to_cart"><button class=addtocart2>ADD TO CART</button></a><div class="added_to_cart"></div>')
$('#buy-price1').html('$123');}
if ($(this).val() === '2'){
$('#intbuy-addtocart1').html('<a href="?add-to-cart=123" rel="nofollow" data-quantity="1" data-product_id="123" class=" add_to_cart_button ajax_add_to_cart"><button class=addtocart2>ADD TO CART</button></a><div class="added_to_cart"></div>')
$('#buy-price1').html('$456');}
//selections continue//
// then continues with sub cat 1 - product 2, 3, 4, etc. When sub cat 2 is clicked, it replaces sub cat 1's products in the same divs, so on, so forth // . . . `
This works how I need, except for that the radio button that's listed as 'checked' is only visually checked, and jquery doesn't display it's content unless the user re-clicks that same option. How can I make it so that the value=1 content is both displayed when that option is clicked, and initially displayed as the default option?
I've tried the following additions to my code to attempt to make jquery recognize that first radiobutton as checked on load and display the if value=1 option:
$('intput:radio[name=tab_itemcat1]').attr('value','1');
$('input:radio[name=tab_itemcat1]').val('1');
$('intput:radio[name=tab_itemcat1][value=1]').attr('checked','checked');
$('input:radio[name=tab_itemcat1][value=1]').prop('checked');
$('input:radio[name=tab_itemcat1][value=1]').prop('checked', 'true');
$('input:radio[name=tab_itemcat1]').prop('value', '1');
$('input:radio[name=tab_itemcat1]:first').attr('checked', true);
$('#product-cat1').attr('checked', 'checked');
$('#product-cat1').attr('checked', true);
$('input[name="tab_itemcat1"][value="1"]').attr('checked', true);
$('input:radio[name="tab_itemcat1"][value="1"]').attr('checked', true);
None of them cause the value=1 content to show without the user re-clicking the checked button. I assume I am missing something very simple here, any clues?
edit: This has been driving me absolutely insane and I can't understand why none of these things (among a thousand others I've now tried) will work - my best guess (and based on other non-solved similar questions) is that there is some kind of conflict with wordpress, woocommerce or elementor.
My temporary solution has become as follows:
- define each subcategory as a variable
- change if value = to show/hide those variables
- leave first subcat's variable initially unhidden
It's probably far from ideal, but at this point even if it only works by a macgyvered together system of elastics, paperclips and rubberbands, I'll take it...
just use
.on()function instead of change function of jquery.this will treat DOM-readiness differently