JavaScript

Accordion not working properly with dynamic content

18-Jun-20 5:43

Same answer(s) as you received on webdeveloper.com.

mhutch2617-Jun-20 5:09

mhutch26

17-Jun-20 5:09

a newbie here...

I have an accordion that's content is being brought in through includes. The accordion is showing up but with all the tabs in the open position and they won't toggle open/close. I'm completely stuck on how to get these to work with the accordion content being brought in dynamically.

This is the code that works on the normal content accordions:

JavaScript

(function($, window, document, undefined) {
'use strict';

$(document).ready(function() {

    /**
     * Accordions ===========================
     * Save DOM selectors.
     */
    var $container_class = $('.accordions');
    var $default_class = $('.beefup');
    var $toggle_buttons_class = $('.toggle-buttons');

    /**
     * default options.
     */
    var $default_options = {
        openSingle: true,
        openSpeed: 300,
        closeSpeed: 300
    };

    /**
     * default settings.
     */

    // we have accordions selector?
    if ($container_class.length) {

        // loop throw main containers
        $container_class.each(function() {

            // we have beefup selector?
            if ($default_class.length) {
                $(this).find($default_class).beefup($default_options);
            }

        });

    }

    // we have toggle buttons selector?
    if ($toggle_buttons_class.length) {

        $toggle_buttons_class.each(function() {

            var $this = $(this);
            var $beefup = $this.find($default_class).beefup($default_options);

            // open all
            $this.find('.toggle-open-all').on('click', function() {
                $beefup.open();
            });

            // close all
            $this.find('.toggle-close-all').on('click', function() {
                $beefup.close();
            });

            // open accordion using button
            $this.find('.buttons-group').find('.button').each(function(index) {
                $(this).on('click', function() {

                    if (!$(this).hasClass('toggle-open-all') && !$(this).hasClass('toggle-close-all')) {

                        $this.find($container_class).find($default_class).each(function(item) {

                            if (index === item) {
                                $beefup.click($(this));
                            }

                        });

                    }

                });
            });

        });

    }

The classes are different for the dynamic accordion, I tried to change them in a duplicated section of this JS, but no luck.

The page if wish to view is here: http://clear-talk.oiw11.com/motorola/bpr40.htm It's the section towards the bottom of the page under the "accessories" tab.

I'm wondering if there's a better/easier way to go about this.

Any and all help would be greatly appreciated.

Thank you in advance!

Data from one page to another with a twist.

and180y14-Jun-20 11:33

14-Jun-20 11:33

I have a page where values (monetary) are entered into boxes and the aim is to have them appear in a drop down list on the next page. I have searched and found this Transferring page values to another page[^] But wondered if there was a more upto date way of doing it?
I have the code below and whilst I can send the data to the URL the script doesn't put it in the drop down. I've read about doing it with cookies, is that a more reliable method?

<script>
//get the value of each field 
from the url as a query string
var query = location.search; 
var splitQuery = []; var value 
= [];

function parseQuery(query){

/*check if there are 
mutiple value (querystring in 
url are seperated with &), and 
store them to an associative 
array*/

if(query.search(/[&]/)){
splitQuery = query.split('&');

/*split again and target drop 
down*/ 

for (var x = 0; x < 
splitQuery.length; x++){
var splitEach = 
splitQuery[x].split('=');

document.getElementsByClassName
('dropdown')[x].textContent = 
splitEach[1];       
}   
} 
} 
parseQuery(query); 
</script>

Richard Deeming15-Jun-20 1:41

15-Jun-20 1:41

So long as you don't need to support Internet Explorer, the modern way to parse the querystring is to use the URLSearchParams class:
URLSearchParams - Web APIs | MDN[^]

JavaScript

const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
    console.log(key, "=", value);
}

It's not clear what the connection is between the querystring parameters and the form parameters, but the code you've shown requires that they're in exactly the same order. It would probably be better if you could match based on the name of the element.

You'll also need to use the value property, not the textContent property, to set the value for a form element.

JavaScript

const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
    let element = document.getElementsByName(key)[0];
    if (element && element.classList.contains("dropdown") && (/^INPUT|SELECT$/i).test(element.tagName)) {
        element.value = value;
    }
    else {
        console.warn("Unknown element:", key, element);
    }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

and180y15-Jun-20 2:00

15-Jun-20 2:00

Hi Richard, thanks for replying.

When I input the data and press the submit button it correctly forwards me to this page;
overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6=
so the data is in the url but I can't get it from there into the dropdown to use in calculations.

Basically the idea is that other data in the destination page has the value in the drop down added to it. Would it help to show you the actual pages?

Richard Deeming15-Jun-20 2:15

15-Jun-20 2:15

If you really want to match based on the index of the parameter, then you could try:

JavaScript

const searchParams = new URLSearchParams(location.search);
let index = 0;

for (const [key, value] of searchParams) {
    let element = document.getElementsByClassName("dropdown")[index];
    element.value = value;
    index++;
}

This assumes that the value already exists in the list. If you want to add a new option instead:

JavaScript

let element = document.getElementsByClassName("dropdown")[index];
let option = document.createElement("option");
option.value = value;
option.text = value;
element.add(option, null);
element.value = value;

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

and180y15-Jun-20 2:24

15-Jun-20 2:24

Thanks Richard, this is how the inputs and the dropdown are laid out but can be changed if it makes it easier to get to the result I need. Smile | :)

I have tried the code you have given me but still nothing in the dropdown. (All I get is level 1, level 2 etc)

 <div class='payroll-container row p-5'>	
<form action ="overheads5.html"  method 
= "get" name = "payrate" id = 
"payrate"> Payrate
<br/>

Level 1

<input type = "text" name = 
"level-1" id = "level-1" />
<br/>

Level 2
<input type = "text" name = 
"level-2" id = "level-2" />
<br/>

Level 3
<input type = "text" name = 
"level-3" id = "level-3" />
<br/>

Level 4
<input type = "text" name = 
"level-4" id = "level-4" />
<br/>

Level 5
<input type = "text" name = 
"level-5" id = "level-5" />
<br/>

Level 6
<input type = "text" name = 
"level-6" id = "level-6" />
<br/>
<input type = "submit"/>

JavaScript

<div class='dropdown-container row p-4'>	  
<select>
<option class = 'dropdown'>level-1</option>
<option class = 'dropdown'>level-2</option>
<option class = 'dropdown'>level-3</option>
<option class = 'dropdown'>level-4</option>
<option class = 'dropdown'>level-5</option>
<option class = 'dropdown'>level-6</option>
	  </select></div>

Richard Deeming15-Jun-20 2:27

15-Jun-20 2:27

Based on that markup and the querystring from your previous message, this should work:

JavaScript

const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
    let element = document.getElementById(key);
    if (element) {
        element.value = value;
    }
    else {
        console.warn("Unknown element:", key, element);
    }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

and180y15-Jun-20 2:46

15-Jun-20 2:46

Thanks Richard,
I'm thinking it's probably me as the code below still gives me nothing. Assuming it should post to the dropdown I already have?

<script>
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
    let element = document.getElementById(key);
    if (element) {
        element.value = value;
    }
    else {
        console.warn("Unknown element:", key, element);
    }
}
</script>

Richard Deeming15-Jun-20 5:59

15-Jun-20 5:59

Ah, no, sorry. I thought you were trying to put the values into the text inputs.

Given a select list:

HTML

<div class='dropdown-container row p-4'>
    <select>
        <option class='dropdown'>level-1</option>
        <option class='dropdown'>level-2</option>
        <option class='dropdown'>level-3</option>
        <option class='dropdown'>level-4</option>
        <option class='dropdown'>level-5</option>
        <option class='dropdown'>level-6</option>
    </select>
</div>

and the URL: overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6=

then something like this should work:

JavaScript

const searchParams = new URLSearchParams(location.search);
const elements = document.getElementsByClassName("dropdown");
let index = 0;

for (const [key, value] of searchParams) {
    let element = elements[index];
    element.text = value;
    index++;
}

Demo[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

and180y15-Jun-20 9:56

15-Jun-20 9:56

Richard, thankyou so much it, works. It shows as per the example 10,20,30 in the drop down.
I assume it would be difficult to show the level and value or just the level and the value somewhere else(hidden) so that the values can get used in the calculations?

I know I could do that in Excel but I'm still at the start of the learning curve here. Smile | :)

Richard Deeming15-Jun-20 9:58

15-Jun-20 9:58

If you change element.text to element.value, the value won't be shown, but it will be what's used when the form is submitted.

Updated demo[^]
<option> - HTML: Hypertext Markup Language | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

modified 15-Jun-20 15:13pm.

and180y15-Jun-20 10:07

15-Jun-20 10:07

Thanks Richard, I think I confused you there. Sorry.

So once the inputs are pulled from the 1st page to the 2nd and put into the dropdown I either need to call them somehow so as to use them in a calculation or just have them somewhere else so that when eg level 1 is selected (and showing) all the figures in my form would have £10 added to them (the maths part of that is what you have given me knowledge on before so I should get that once I get the numbers) Thanks again. Smile | :)

Richard Deeming15-Jun-20 10:16

Javascript function error.

15-Jun-20 10:16

I messed up the updated demo link. If you set the value rather than the text, the value won't be shown, but you can access it for your calculations.

If you add an event listener for the "changed" event, you can update your calculations with the selected value:
Updated updated demo[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

and180y9-Jun-20 14:55

9-Jun-20 14:55

Can anyone point me in the right direction with this please?

I have these inputs and below a function to give me the hours open, except it doesn't. I've tried putting the function in online checkers and all is okay according to them but it doesn't calculate.
Thanks in advance.

<div class='col-sm-2 mb-2'>
<input type='text' id='opening-time' class='form-control' data-calc='openingTime' value='00.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='closing-time' class='form-control' data-calc='closingTime' value='00.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='hoursOpen' class='form-control form-output' data-calc='hoursOpen' value='00.00'readonly tabindex='-1'>
</div>
</div>

$(function(){ 
$("#closingTime").keyup(function(){
	var openingTime = $("#openingTime").val();
	var closingTime = $("#closingTime").val();
     $("hoursOpen").html(closingTime-openingTime);
 })
})

Richard MacCutchan9-Jun-20 22:03

9-Jun-20 22:03

Your keyup call is not using the id of the HTML element. It should be:

JavaScript

$("#closing-time").keyup(function(){

and180y10-Jun-20 0:27

10-Jun-20 0:27

Thanks for replying Richard. Smile | :)

I have made the change you gave me but still not getting it to return a value. I'm still searching for my "lightbulb moment" with these functions.

Richard MacCutchan10-Jun-20 0:36

10-Jun-20 0:36

Try adding a return statement (with an associated value) at the end of the function.

and180y10-Jun-20 1:21

10-Jun-20 1:21

Thanks Richard,
not sure what I have done wrong here as still not giving a value for hours open.

$(function(){ 
$("#closing-time").keyup(function(){
	var openingTime = $("#openingTime").val();
	var closingTime = $("#closingTime").val();
     $("hoursOpen").html(closingTime-openingTime);
	return hoursOpen.html;

Estys10-Jun-20 1:31

Estys

10-Jun-20 1:31

$("hoursOpen")

should probably be

$("#hoursOpen")

_{If you can read this, you don't have WingDings installed}

and180y10-Jun-20 1:59

10-Jun-20 1:59

Estys Thanks,
I think from other replies I am on the wrong track. Frown | :(

Richard MacCutchan10-Jun-20 1:37

10-Jun-20 1:37

You have not declared hoursOpen anywhere. And what about the previous statement, does that not set the value in the html? If so why are you trying to return a value?

and180y10-Jun-20 1:58