Open html element by id with jQuery
Question
I tried to find the answer here but nothing has been working. Can u guys help me?
I have a loop in my logged page what loops "forklifts" from the database. In every bar, I have hidden modal what I want to show on button click. the modal has an id of a looped forklift (otherwise it opens all modals). This code doesn't work and I don't know why.
js
function open_broken_modal(id){
$("#" + id).css("display", "block");
//$(".modal_bg").css("display", "block");
}
css
z-index:250;
position:fixed;
top:75px;
left:calc(50% - 300px);
width:600px;
height:500px;
background-color:white;
border:2px solid red;
border-radius:2px;
display:none;
php & html
<div id="<?php print $forklift_id; ?>" class="forklift_broken_modal">
<div id="modal_info_wrapper" class="modal_info_wrapper">
<h1 class="forklift_number_h" id="forklift_number_b"><?php print $forklift_id; ?></h1>
<h2 class="forklift_name_h" id="forklift_name_b"></h2>
<div class="forklift_info_box">
<p class="forklift_info_p" id="forklift_info_b"></p>
</div>
<h2 class="forklift_name_h">charging spot</h2>
<p class="forklift_info_p" id="forklift_chargin_b"></p>
</div>
<form action="">
<div class="modal_input_wrapper">
<input title="this information will be sent to management" class="radio_btn" type="radio" name="broken" value="broken">broken
<input class="broken_info" type="text" name="broken_info" placeholder="write short information how its broken here."><br>
<input class="radio_btn" type="radio" name="broken" value="not_broken">intact<br>
</div>
<div class="modal_footer">
<input title="this information will be sent to management" class="input_submit" value="save" name="save_broken_details" type="submit">
<button onclick="close_all_modals();" class="input_submit">exit</button>
</div>
</form>
</div>
this is only modal, not the whole looped bar. And I have checked that id goes through js function correctly.
2 answers
solution1
0 2018-07-26 10:24:01
If you want to open only one box then first hide all the boxes by using their classname and then show the box you want to show by id. Like
function open_broken_modal(id){
$(".forklift_broken_modal").css("display", "none");
$("#" + id).css("display", "block");
//$(".modal_bg").css("display", "block");
}
solution2
0 ACCPTED 2018-07-26 10:55:37
The problem in your code, as you posted a screenshot as a comment on piyush's answer, is that you have several div elements with the same id, in this case 32.
You need to make sure there's only one instance of the same id on the whole document.
The code you posted works fine, I created the following dummy page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style>
.forklift_broken_modal{
z-index:250;
position:fixed;
top:75px;
left:calc(50% - 300px);
width:600px;
height:500px;
background-color:white;
border:2px solid red;
border-radius:2px;
display:none;
}
</style>
<?php $forklift_id = 123; ?>
<i title="mark forklift broken" onclick="open_broken_modal(<?php print $forklift_id ?>);" class="fa fa-wrench water_logo" aria-hidden="true">click me</i>
<div id="<?php print $forklift_id; ?>" class="forklift_broken_modal">
<div id="modal_info_wrapper" class="modal_info_wrapper">
<h1 class="forklift_number_h" id="forklift_number_b"><?php print $forklift_id; ?></h1>
<h2 class="forklift_name_h" id="forklift_name_b"></h2>
<div class="forklift_info_box">
<p class="forklift_info_p" id="forklift_info_b"></p>
</div>
<h2 class="forklift_name_h">charging spot</h2>
<p class="forklift_info_p" id="forklift_chargin_b"></p>
</div>
<form action="">
<div class="modal_input_wrapper">
<input title="this information will be sent to management" class="radio_btn" type="radio" name="broken" value="broken">broken
<input class="broken_info" type="text" name="broken_info" placeholder="write short information how its broken here."><br>
<input class="radio_btn" type="radio" name="broken" value="not_broken">intact<br>
</div>
<div class="modal_footer">
<input title="this information will be sent to management" class="input_submit" value="save" name="save_broken_details" type="submit">
<button onclick="close_all_modals();" class="input_submit">exit</button>
</div>
</form>
</div>
<script type="text/javascript">
function open_broken_modal(id){
console.log('clicking!');
$("#" + id).css("display", "block");
//$(".modal_bg").css("display", "block");
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.