How to get post ID from button and pass title to Modal
문제
<div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
<span class="name"><?php echo $title ?></span><span class="jobtitle"><?php echo $jobtitle ?></span>
<a onclick="return moreinfoModal(this);" id="<?php get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal" href="javascript:void(0);" class="info">more info</a>
</div>
<div id="moreinfo-modal" role="dialog">
<div class="teammember_div">
<a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
<?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
<p><?php echo $title ?></p>
<p><?php echo $about ?></p>
<span class="jobtitle"><?php echo $jobtitle ?></span>
<span id="moreinfo" style="display: inherit;"></span>
<a id="modal-join" class="btn-cta" href="/sign-up/">Become a Member!</a>
</div>
</div>
<?php }?>
</div>
</div>
I am am displaying 4 cards with names and job titles and a button to open a modal. Once the user clicks on the button it opens a modal with a image, title, about bit etc...
Sadly, I can only get it to open a Modal with the details of one post. I'd like to match to modal content with the content of the cards, if that makes sense.
So card = Harry Modal = Harry
<script> function moreinfoModal(field) {
console.log(field.id);
$('#moreinfo-modal').toggleClass('open');
}
function closeMoreInfoModal() {
$('#moreinfo-modal').toggleClass('open');
}
$(document).on('click', '.close-pill', function(e) {
$(this).parent().remove();
e.preventDefault();
});
</script>
Any idea what I am missing here?
해결책
When we display post data in model with on click of button we have to provide the post-id with data attribute in for specific model target.
Please add post-id in data-target in anchor tag as well as in main div tag ID.
I have modified your code here:
<div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
<span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
<a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">more info</a>
</div>
<div id="moreinfo-modal-<?php echo get_the_ID();?>" class= "moreinfo-modal" role="dialog">
<div class="teammember_div">
<a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
<?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
<p><?php echo $title ?></p>
<p><?php echo $about ?></p>
<span class="jobtitle"><?php echo $jobtitle ?></span>
<span id="moreinfo" style="display: inherit;"></span>
<a id="modal-join" class="btn-cta" href="/sign-up/">Become a Member!</a>
</div>
</div>
<?php }?>
</div>
</div>
As well as you can change js code with click on class instead of div ID attribut like:
<script> function moreinfoModal(field) {
console.log(field.id);
$('.moreinfo-modal').toggleClass('open');
}
function closeMoreInfoModal() {
$('.moreinfo-modal').toggleClass('open');
}
$(document).on('click', '.close-pill', function(e) {
$(this).parent().remove();
e.preventDefault();
});
</script>
Hope this can solved your problem. :)