Multiple Expand/Collapse Bootstrap buttons in a PHP foreach loop - javascript

My code is almost working, with one issue that I'm having a hard time fixing. Here is some code that I have simplified.
<?php for($counter = 0; $counter < 5; $counter++)
{
?>
<button type="button" id="<?php echo 'change_button_label_' . $counter?>" data-toggle="collapse" data-target="<?php echo '#button_number_' . $counter?>" class="btn btn-warning"><span class="glyphicon glyphicon-chevron-down"></span>Expand</button>
<div id="<?php echo 'button_number_' . $counter?>" class="collapse">
This gets collapsed #<?php echo "$counter"; ?>
</div>
<script>
$('<?php echo "#change_button_label_" . $counter?>').click(function () {
if($('button span').hasClass('glyphicon-chevron-up'))
{
$('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-down"></span>Expand');
}
else
{
$('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-up"></span>Collapse');
}
});
</script>
<?php
}
?>
If I try to click 1 or more buttons, they work in the sense that each will expand/collapse and reveal/hide its relevant content as expected.
However, only the 1st button that is clicked (and it doesn't matter which one is clicked 1st) will have its text and glyphicon changed from "expand" to "collapse." All of the other buttons will continue to say "expand" regardless of if they are actually expanded or collapsed.
I'm hoping someone can help me figure out how to fix it so that the other buttons will toggle their text correctly when they are clicked. I don't mind gutting my attempted code above if needed.
Actual output:
Expected output:
The text on each button should look like the first one after they've been clicked. The expand/collapse feature is already working for each button.
Generated HTML/CSS output:
https://gist.github.com/bryanjamesmiller/c14e623152ab9b5f9246
Thank you in advance!

Take your script block out of the PHP for loop and bind to the button element itself, rather than the button ID:
<?php for($counter = 0; $counter < 5; $counter++)
{
?>
<button type="button" class="btn btn-danger" id="<?php echo 'change_button_label_' . $counter ?>">DISLIKES<span class="glyphicon glyphicon-thumbs-down"></span></button>
<?php
}
?>
<script>
$(document).ready(function(){
$('button').click(function() {
var $button = $(this),
test = $button.text() === 'DISLIKES';
if(test)
{
$button.text('LIKE');
test=false;
}
else
{
$button.text('DISLIKES');
test=true;
}
});
});
</script>
This is pretty basic and will just change the button text. To toggle the icon as well you'd just need to do something like:
$button.addClass('like-class');
or
$button.removeClass('dislike-class');
In the appropriate if block
Check out this fiddle to see it in action

change
if($('button span').hasClass('glyphicon-chevron-up'))
to
if($('button#<?php echo 'change_button_label_' . $counter?> span').hasClass('glyphicon-chevron-up'))
you are done !

Related

When clicked on button, go to the next question by ID

I'm building an online survey with statements in php. I retrieve my 2 statements per question via a database.
It should display question by question. So when you click at a statement, it saves the answer and inserts it into a table in the database with the value 0 or 1.
<?php
// I check if it's clicked, then it gets a '0' or a '1'.
if(isset($_GET['manipulate'])){
echo $_GET['manipulate'];
}
foreach($statements as $statement){ // "SELECT * FROM statement;" = $statements
$datas_key[] = ["order"=>$statement["order"], "statement1"=> $statement["statement1"], "statement2"=> $statement["statement2"], "questionnaire_id"=> $statement["questionnaire_id"]];
}
?>
Now I have the 2 options which each a statement that can be clicked like this:
<h1 id="newQ"> <?php $i = 0; ?></h1>
<form method="GET">
<h1>Question <?php echo $i + 1; ?> <br>
<button class="manipulate" name="manipulate" value="0"><?php echo $datas_key[$i]["statement1"]; ?></button>
<button class="manipulate" name="manipulate" value="1"><?php echo $datas_key[$i]["statement2"]; ?></button>
</form>
How do i write code in js or php to make sure that when I click, the id goes +1 AND see the next question with the next two statements ??

Wordpress Javascript Modal Display Doesnt Close

I have a function that opens modal, when I click on a div. It opens ,but when I press X it doesnt close the Modal. Display doesnt change the value to none, but I can change background color and everything else.
UPDATE -> So get the right clasName and correct modal Id, still I can change the whole modals background for etc , but i cant change the display: block value to none, I can change to none thru inspect, but it doesnt work through the selector.
I have it working through my own WordPress loop, where I need to get post ID and Modal Id (), to show the correct content.
FOUND THE PROBLEM.
So when I console log thisBtn Event and click Event I get this in console:
1.pressing click-to-open I get display Block
2. But when I press X (close) I get var model who is NONE, and after that immediately click to open fires and makes it block again. So my mistake is that the X button fires both in the same time, and Im trying to figure it out.
CONSOLE PICTURE FOR THE ERROR
<div id="click-to-open<?php echo get_the_ID(); ?>" data-modal="<?php echo get_the_ID(); ?>" class="qodef-event-list-item-holder <?php echo get_the_ID(); ?>">
<?php echo prowess_core_get_shortcode_module_template_part('templates/parts/image', 'event-list'); ?>
<div class="qodef-event-list-item-content">
<div class="qodef-event-list-item-content-holder">
<div class="qodef-event-list-item-content-inner">
<?php
echo prowess_core_get_shortcode_module_template_part('templates/parts/category', 'event-list', '', $params);
echo prowess_core_get_shortcode_module_template_part('templates/parts/title', 'event-list', '', $params);
echo prowess_core_get_shortcode_module_template_part('templates/parts/excerpt', 'event-list', '', $params);
//echo prowess_core_get_shortcode_module_template_part('templates/parts/info', 'event-list', '', $params);
echo prowess_core_get_shortcode_module_template_part('templates/parts/read-more', 'event-list', '', $params);
?>
</div>
</div>
</div>
<!-- The Modal -->
<div id="<?php echo get_the_ID();?>" class="modal" >
<!-- Modal content -->
<div class="modal-content" id="content<?php echo get_the_ID();?>" >
<span id="close" class="close<?php echo get_the_ID();?>" data-modal="close">×</span>
<p><?php the_content( 'Read more ...' ); ?></p>
</div>
MODAL
var btn = document.getElementsByClassName("<?php echo get_the_ID(); ?>");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function() {
var modal1 = document.getElementById(this.dataset.modal);
modal1.style.display = "block";
}, false);
}
KRYZIUKAS
var span = document.getElementsByClassName("close<?php echo get_the_ID();?>");
// console.log(span)
for (var b = 0; b < span.length; b++) {
var click = span[b];
click.addEventListener("click", function(){
var modal = document.getElementById("<?php echo get_the_ID();?>");
modal.style.display = 'none';
console.log("modal", modal)
console.log('modal style--->', modal.style);
}, false);
}
Photo For Answer
So the problem was the value false in the event listener I needed to change it to true.
Explanation: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

jQuery Scroll only happens after first select

I have an odd problem with my jQuery. I have an element that I want to toggleTo once a dropdown option has been selected. The odd thing is that it only triggers AFTER the first time it has been changed. It will not scroll to the right element on the first change, but subsequent changes after that!
Why is it ignoring the first one? Maybe I selected the wrong event attribute? I have tried other ones such as mouseleave() with no luck. I feel like I have used the right attribute because I want it to scroll when the user selects or changes the dropdown value.
Any help would be appreciated.
Please find my code attached below:
home.php
//SCROLL TO TRANSFER GUIDE ON click
$("#major").on('change',function() {
$('html, body').animate({
scrollTop: $("#scrollHere").offset().top
}, 1000);
});
major.php
<?php
session_start();
require 'db_connect_clearmaze.php';
?>
<body>
<h3 align="center" class="header whitetext">Choose Your Major</h3>
<?php
$uni = trim($_GET['uni']);
$_SESSION['uni'] = $uni;
$cc = $_SESSION['cc'];
?>
<form align="center">
<select id = "major" class="dropbtn" onmouseover="DropListMajor()"
onmouseout="this.size=1;" onchange="loadTransferGuide(this.value,'<?php echo $uni; ?>','<?php echo $cc; ?>')">
<?php
echo '<option value=""> Select Your Major </option>';
$query = $db -> query("SELECT major FROM majors WHERE university = '".$uni."';");
while($row = $query -> fetch()){
echo '<option value = "'.$row['major'].'">' ?>
<?php echo $row['major'].'<br>' ?> <?php '</option>';
}
?>
</select>
</form>
</body>
This change event handler $("#major").on('change',function(){...} was defined inside another change handler...
So on 1st change, the first inline handler defined the second handler.
That is why it was not firing on the first change.
I guessed it because it was fitting the behavior described...
but also because of this comment //SCROLL TO TRANSFER GUIDE ON click.
;)

onclick even not working

in the code below on clicking the button corresponding price should be displayed and the click here text shud hide but it doesn't work nothing happens
<body>
<?php $itemprice = array("$10","$3","$5","$7");?>
<?php $len = count($itemprice);
$i=0;
?>
<div class= "gallery">
<?php while ($i<$len):?>
<div class="index">
<div class="clickbtn">
<a id="hiddenprice-<?php echo $i; ?>" href="http://www.bookurl.com" onclick="show_price(<?php echo $i; ?>)" target="_blank">
Click Here to reveal price <?php echo $itemprice[$i]; ?>
</a>
<a id="revealedprice-<?php echo $i; ?>" style="display:none;" href="http://www.bookurl.com"><?php echo $itemprice[$i]; ?></a>
</div>
</div>
<?php $i++;endwhile;
?>
<script>
function show_price(<?php echo $i; ?>) {
document.getElementById('revealedprice-<?php echo $i; ?>').style.display = '';
document.getElementById('hiddenprice-<?php echo $i; ?>').style.display = 'none';
}
</script>
</div>
</body>
u can see the outcome live at http://myproject.byethost7.com/test1.php
You have a mess between the PHP code and javascript code.
Also, it's not clear what you're trying to do with that anchor. If you have a href defined, the user will navigate to that url, the onclick code is irrelevant in your case unless you cancel the navigation.
It seems to me that you want to do this. Take into account that you can't control 100% if the url will be opened on a new window or a new tab.
HTML
<a id="hiddenprice-<?php echo $i; ?>" href="#" onclick="show_price(<?php echo $i; ?>)">
Click Here to reveal price <?php echo $itemprice[$i]; ?>
</a>
JS
<script>
function show_price(num) {
document.getElementById('revealedprice-' + num).style.display = '';
document.getElementById('hiddenprice-' + num).style.display = 'none';
window.open("http://www.bookurl.com");
return false;
}
</script>
Notice num on show_price, the added window.open and the return false to cancel the default anchor behavior (navigate to the href)
Do not trust everything you see :)
What would append if you use the previous answer, without understanding it? Try, but you're going to have a surprise.
Explanations.
<a id="hiddenprice-5" href="http://www.bookurl.com" onclick="show_price(5)" target="_blank">
Click Here to reveal price 52
</a>
Show_price function is now well defined. But. But you are using a link - the a tag -. When you're going to click, the effect would be fine, but there is still the redirection: the user would never see the revealed price.
In order to avoid this "kiss cool effect", you must use another tag than a, or add a return false; to your show_price function.

Name change from one element to another and value store

i need to get the name and value from li element and display it after selection as the button value, what i need more is for that single value to be stored in a php var for latter submit, i got this far but now i am stuck and keep getting 1 size only
CODE
<button id="changename" class="btn dropdown-toggle size-selector-btn" type="button" data-toggle="dropdown">Select your size <span class="caret" style="display: none;"></span>
</button>
<ul class="dropdown-menu size-list" role="menu">
$productAttributeOptions = $product->getTypeInstance(true)->getConfigurableAttributesAsArray($product);
$attributeOptions = array();
foreach ($productAttributeOptions as $productAttribute) {
foreach ($productAttribute['values'] as $attribute) {
$attributeOptions[$productAttribute['label']][$attribute['value_index']] = $attribute['store_label'];
}
}
$key = "Size";
foreach($attributeOptions[$key] as $size){ ?>
<li id="<?php echo $size; ?>" onclick="changeName()"><?php echo $size; ?></li>
<?php }
} ?>
</ul>
</div>
<script>
function changeName() {
document.getElementById("changename").innerHTML = "<?php echo $size; ?>";
}
</script>
OK, well there are 2 issues i can see. 1st that your third foreach loop looks like it should be nested within the others, but its not.
The second issue is that that you are missunderstanding how php and js work. Php is ran on the server before the page is rendered, so the value of $size in your js function will be whatever the LAST value of was.
To fix this, 1st nest the foreach correctly (when using php inline with html, i find its best to use the template syntax for blocks - eg if: endif;, foreach: endforeach; to aid readability), then adjust your js function to take a parameter, and pass that parameter in the onclick event by grabing the clicked elements id:
<button id="changename" class="btn dropdown-toggle size-selector-btn" type="button" data-toggle="dropdown">Select your size <span class="caret" style="display: none;"></span>
</button>
<ul class="dropdown-menu size-list" role="menu">
<?php
$productAttributeOptions = $product->getTypeInstance(true)->getConfigurableAttributesAsArray($product);
$attributeOptions = array();
foreach ($productAttributeOptions as $productAttribute) :
foreach ($productAttribute['values'] as $attribute) :
$attributeOptions[$productAttribute['label']][$attribute['value_index']] = $attribute['store_label'];
$key = "Size";
foreach($attributeOptions[$key] as $size):?>
<li id="<?php echo $size; ?>" onclick="changeName(this.id);"><?php echo $size; ?></li>
<?php endforeach;
endforeach;
endforeach;
?>
</ul>
</div>
<script>
function changeName(size) {
document.getElementById("changename").innerHTML = size;
}
</script>

Categories