Select correct element to be shown - javascript

So I have the below code that I wish to change but I am unsure on the direction I need to go with this other than I need to use Javascript. Ideally I would like to click the button (id="popupbtn") so show the corresponding 'MainDescription' panel. The issue I have is that I have all of this in a loop so how do I go about making each button display the maindescription it is connected to?
I hope it makes sense because I'm spent awhile trying to figure out how to explain the I am having!
!--Quick Details-->
<h4 class="text-info"><?php echo $forsale['make'];?> <?php echo $forsale['model'];?> <?php echo $forsale['variant'];?></h4>
<h4>Price: £<?php echo $forsale['price'];?></h4>
<input type="hidden" id="stockbox" value="<?php echo $forsale['StockID'];?>">
<p id="stockref" class="form-control">Stock Ref: <?php echo $forsale['StockID'] ?></p>
<button type="button" class="btn btn-md form-control" id="popupbtn" onclick="MainDescription()">View More</button>
<div class="maindescription" id="maindesc" value="<?php echo $forsale['StockID'];?>" style="display:none">
<p id="descYear" class="form-control">Year: <?php echo $forsale['year'] ?></p>
<p id="descmileage" class="form-control">Mileage: <?php echo $forsale['mileage'] ?></p>
<p id="descFuel" class="form-control">Fuel: <?php echo $forsale['fuel'] ?></p>
<p id="descDoors" class="form-control">No. Doors: <?php echo $forsale['doors'] ?></p>
<p id="descTrans" class="form-control">Transmission: <?php echo $forsale['trans'] ?></p>
<p id="descEnginesize" class="form-control">Engine Size: <?php echo $forsale['enginesize'] ?></p>
<p id="description" class="form-control">Description: <?php echo $forsale['description'] ?></p>
</div>

You can use a function like this at the end of the HTML document to do that:
<script>
function MainDescription() {
const panel = document.getElementById('maindesc');
if (panel.style.display === 'none') {
panel.style.display = 'block'
} else {
panel.style.display = 'none'
}
}
</script>

Related

How to hide any child elements inside a parent div using jquery

I have two cases, One when there is comments and one when there is not. I have separated two cases with php like this:
<div class="box">
<textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
<button style="display: none;" id="comment_button" class="btn btn-success" >Add Comment</button>
<div id="comment_div">
<b>Comments...</b></br>
<?php if($comment_data){ foreach ($comment_data as $data) {?>
<b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
<p><?php echo $data->comment; ?></p>
<?php } } else{?>
<div id="no_comment_case" ><h1>No comments yet...</h1></div>
<?php } ?>
</div>
Now when there is no comment No comment case will be displayed. After user posts a comment with ajax i have tried the following code to hide the no comment case and only append the recent comment, but the no comment case is not being hidden.
The jquery code is:
success: function(msg){
console.log(msg);
if(msg=="success")
{
$('#comment_button').hide();
$('#reviews_comment',$('#comment_div')).hide();
// $('div#comment_div> div:eq(2)').css("display", "none");
html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
$('#comment_div').append(html);
}
}
How can I do it. Any kind of suggestion are highly appreciated. Thanks.
Enclose comment_div properly,
<div class="box">
<textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
<button style="display: none;" id="comment_button" class="btn btn-success" >Add Comment</button>
<div id="comment_div">
<b>Comments...</b></br>
<?php if($comment_data){ foreach ($comment_data as $data) {?>
<b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
<p><?php echo $data->comment; ?></p>
<?php }
} else{?>
<div id="no_comment_case" ><h1>No comments yet...</h1></div>
<?php } ?>
</div>
</div>
Ajax call:
success: function(msg){
if(msg=="success")
{
$('#comment_button').hide();
$('#reviews_comment,#comment_div,#no_comment_case').hide();
html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
$('#comment_div').append(html);
}
}

Multiple ID's on single button click

HTML + PHP
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id, $('.copyTarget').attr('id'));">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id, target_id) {
alert(clicked_id);
alert(target_id);
}
</script>
What i want
I want to get the both values for copyTarget and copyButton as per loop cycle. It means
If current value of $i = 3
then I want alert values like,
clicked_id = copyTarget3
target_id = copyButton3
What i am currently getting is,
If current value of
$i = 3
then I want alert values like,
clicked_id = copyTarget0
target_id = copyButton3
Its taking first value of ID(copyTarget) stored initially. I want current loop cycle value.
Any help would do
Thanks
Why use JS in handler?
Try:
onClick="reply_click('copyButton<?php echo $i; ?>', 'copyTarget<?php echo $i; ?>')"
Also you should store id names (copyButton and copyTarget) in php variable, so you can change them in one place.
You could try something like below. However, I would go by Maxx's answer .. It really depends on what you plan to do with the rest of code etc.
<?php
for($i=0;$i<5;$i++){
?>
<div>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this)">Copy</button>
</div>
<?php
}
?>
<script>
function reply_click(btn) {
var clicked_id = $(btn).attr('id');
var target_id=$(btn).parent().find('span').html();
alert(clicked_id);
alert(target_id);
}
</script>
Try This
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id);">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id) {
alert(clicked_id); //clicked id
alert(clicked_id.split('copyButton').join('copyTarget')); // target id
}
</script>

clearing and changing content of div

I'm trying to replace the content of comments div with the new comments by loading it again and replacing the old comments. When i change the content of the div, it replaces the first comment only and repeat the whole comment:
here is the comments div :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div id="comments_div">
<div style="background:#aaaaaa; margin:5px;">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($post_row['user_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
</div>
<?php } ?>
ajax code :
/////////////////////////comment function
function comment(post_id, poster_id)
{
loadXMLDoc("php/comment.php?post_id="+post_id+" content="+document.getElementById("content").value+"&poster_id="+poster_id,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("comments_div").innerHTML = xmlhttp.responseText;
}
});
}
comment.php :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$_GET[post_id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
Your first code snippet is creating a separate comments_div for each comment. Then your JavaScript code snippet is just replacing the content of the first one.
You can fix it by putting the comments_div outside the the PHP while loop, and then using the same HTML output code inside that loop as you are in your third example (a div.comment per comment).
So, something like this in place of that first code snippet:
<div id="comments_div">
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
</div>

JQuery checkbox when value is assigned

I've been trying to get JQuery to check a radio for me when I assign a value 'Z' to it.
My current code:
<?php if ($option['type'] == 'radio') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<div id="input-option<?php echo $option['product_option_id']; ?>">
<?php if (isset($option_values)) foreach ($option_values as $option_value) { ?>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php if ($option_value['price_prefix'] == 'z') {?>
<script>
$(".radio").prop("checked", true)
</script>
<?php echo 'Im Active!!'; ?><?php }
else { ?> <?php echo ' ';?> (<?php echo $option_value['price_prefix'];?>
<?php echo $option_value['price']; ?>) <?PHP }?>
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php } ?>
As for now, my option 'Z' only shows 'I'm Active!!' in the list. The radio is still unchecked though.
What am I doing wrong?
I'm planning on releasing a free OpenCart module where people can activate an option by standard by assigning the value Z in product properties.
Thanks!

Auto calculation of div values on blur

I am generating a table of divs from mysql database with code as below :
<?php
$sql = "SELECT * FROM menuitem";
$result = mysql_query($sql); $i =1;
while ($row = mysql_fetch_array($result)) {?>
<div class="orderblock">
<div class="orderlist">
<div class="pimage">
<p></p>
</div>
<div class="pdesc">
<p><?php echo $row['prodname']; ?></p>
<p><?php echo substr($row['proddesc'], 0, 20); ?></p>
</div>
<div class="portion">
<input type="text" onblur="document.getElementById('tot<?php echo $i;?>').value=document.getElementById('por<?php echo $i;?>').value * document.getElementById('pri<?php echo $i;?>').value;" id="por<?php echo $i;?>" name="<?php echo $row['prodname']; ?>" >
</div>
<div class="price">
<p id="pri<?php echo $i;?>"><?php echo $row['price']; ?></p>
</div>
<div class="total">
<p><input style="border: none;" type="text" id="tot<?php echo $i;?>" disabled="disabled" value=""> </p>
</div>
</div>
</div>
<?php $i++; }
?>
this is my final code, finally I got it working but I am getting NaN as result could any please sort it for me.
thanks
Try this now. Before try this remove your blur event from html.I hope this will help you.
$(document).ready(function () {
$("input[type=text]").blur(function () {
var portion = $(this).val();
var price = $(this).parent().parent().find(".price p").text();
if(isNaN(portion)==false)
{
var tot = portion * price;
$(this).parent().parent().find(".total p input").val(tot);
}
else
{
$(this).parent().parent().find(".total p input").val(0);
}
});
});
Demo here

Categories