Passing information from a while loop to a bootstrap modal - javascript

I've currently got a while loop that echos all the information in my database onto a table. In this table there is a button that can be clicked to link to a modal.
<a data-toggle="modal" data-target="#myModal2" class="active"><img src="img here"></a>
This then links to a modal with the code:
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<?php echo $row['name']; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What I'm trying to do is print out some of that information from the while loop into that modal e.g.($row['name']). How can I do this? Can this be done through PHP or does it have to be JS?

Related

How to scroll to an element from a modal submit button?

I would like my modal's submit button to bring my users to my contact form outside of the modal and to close the modal in the process.
I've tried several ideas but so far, I am scrolling to the element wanted but when the modal closes it scrolls back to the element where my modal is initially located.
Modal :
<div class="modal fade" id="Modal-<?= $formation['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<?= $formation['descriptionLongue'] ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary devis">Demander un devis</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- FORMATION -->
Contact Form
<div class="container col-4" id="contact">
<!-- form contact -->
<form class="text-center border border-light p-5" action="<?=buildUrl('/contact');?>" method="POST">
etc...
Javacript
const target = document.getElementById('contact'),
buttons = document.querySelectorAll('.devis');
for (const button of buttons) {
button.addEventListener('click', function(){
$(this).parents('.modal').modal('hide');
target.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'nearest'
});
});
}

pass an item id to from card to modal

so i have a 3 cards that has its value taken from database
i want to get the id of the particular card that was clicked and send it to modal so i can echo it in the modal
i tried sending it to the button trigger as data-id=< ?php $card_id ?> but that doesn't seem to work
php & mysql codes to fetch from database
<div class="container">
<div class="title">
<h5><?php echo $card_id; ?></h5> <h1><?php echo $card_title; ?></h1>
<div class="body">
<?php echo $card_name; ?>
<button type="button" data-toggle="modal" data-target="#myModal" name="button" data></button>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1><?php echo $card_id; ?></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You could look into using Ajax for this.
Keep data-id="<?php echo $card_id; ?>" in your button.
Create a php page to process the ID to be echoed:
if ($_POST['cardid']) {
$id = $_POST['cardid'];
echo $id;
}
Use a modal event to push the ID to your modal's body using a class declaration:
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function(e){
var cardid = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: 'record.php',
data: 'cardid='+ cardid,
success: function(data){
$('.fetched-data').html(data);
}
});
});
});
Put the class declaration in your modal body where you want the ID to show:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1 class="fetched-data"></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Contact Form 7: Submit button doesn't work in Twitter Bootstrap Modal

I have multiple forms on my site that are loaded in a Bootstrap Modal on a click of a button. For some reason when I try to submit the forms nothing happens. I have checked the browser console and I can't find any errors. Also there is no error in the error_log file.
The code below is what I have for my forms. Have I done something wrong?
Edit: I have tested with another form and it seems javascript/jquery is not being loaded in the modal.
<button type="button" class="application_button button" data-toggle="modal" data-target="#jobapplyform">
<?php esc_attr_e( 'Apply for job', 'wp-job-manager' ); ?>
</button>
<div class="modal fade" id="jobapplyform" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close-btn-modal" data-dismiss="modal" aria-label="Close">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/close-icon.png"/>
</button>
<h2 class="modal-title" id="jobModalLabel">Apply</h2>
</div>
<div class="modal-body">
<div class="application_details">
<?php echo do_shortcode('[contact-form-7 id="5096" title="Claim This Profile"]'); ?>
</div>
</div>
</div>
</div>
</div>
May be you are using bootstrap4.
Please try bellow code
<!-- The Modal -->
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#jobapplyform">
Open modal
</button>
<div class="modal" id="jobapplyform">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close-btn-modal" data-dismiss="modal" aria-label="Close"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/close-icon.png"/></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="application_details">
<?php echo do_shortcode('[contact-form-7 id="5096" title="Claim This Profile"]'); ?>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If there is not visibility issue then please try to prevent close when submit button and check if contact form submit button action triggered.
You are missing form element for HTML and type submit for the button, or else the info wont be sent anywhere.

append bootstrap calendar on div not on body

I am trying to open a bootstrap calendar in a modal(popup) window. by default it append on body. is there is any way to append that calendar on a div.
Actually when scroll the page the calendar goes out away through to the popup window.
I hope this helps. Add content in modal-body.
<a href="#" data-toggle="modal" data-target="#createapp">
ABC</a>
<div class="modal fade" id="createapp" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body" id="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Image opens modal dialog bootstrap

Soooo I want to use these images I have so that when they are clicked it opens a modal dialog for a staff page on my site and I'm not sure how to do it
PS: I have seen something like this on here but its not what I wanted
<img src="https://minotar.net/helm/EpicMinerBackup">
<img src="https://minotar.net/helm/kingpooper27s">
EDIT~~~: Resolution to issue ~~~EDIT END~~
<!--####################### Start of the staff list ############################### -->
<img src="https://minotar.net/helm/EpicMinerBackup" data-toggle="modal" data-target="#Staff1" />
<div class="modal fade" id="Staff1" tabindex="-1" role="dialog" aria-labelledby="StaffModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="StaffModalLabel1">EpicMinerBackup</h4>
</div>
<div class="modal-body">
The Owner of the site and server.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--########################################################################## -->
You can use data attributes to load the modal box. img href value should match modal id value prefixed with #. In case below its #myModal. If it still doesn't work check JS errors or if the bootstrap js files are loaded.
<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is the link for sample
http://www.bootply.com/TH49jSYRm6

Categories