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>
Related
I'm unable to call my modal in this PHP file to be called when and if statement is valued to be true
Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
PHP code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<?php
// trying to target modal
if (true){
// not able to call
echo "$( document ).ready(function(){ $('#form').modal('show')";
}
else{
echo "alert(\"haha\")";
}
?>
Please help thank you, so it should open a pop up when the if statement is true but it is not working.
Thanks!
You will just need to change a couple of items to get your popup to work. First don't forget your closing braces in your script tags and second, be sure to use the same ID so that it knows what one to look for.
//Your ID should match the ID of the modal you would like to open
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And in your script, be sure to add the same ID from the myModal DIV
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<?php
// trying to target modal
if (true){
// not able to call
echo "
<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show'); //myModal is ID of div
}); //Don't forget your closing braces
</script>
";
}
else{
echo "alert(\"haha\")";
}
?>
we can write php code anywhere on the page so try to write php condition inside javascript like this way
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
<?php
if (true){
?>
$( document ).ready(function(){ $('#form').modal('show')});
<?php
}
else{
?>
alert("haha");
<?php
}
?>
</script>
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.
I have a jquery modal button, where I want to display information from my database.
I have a field in the database where I want everything to be identified by it is called "number"
The modal button is displayed in a table which is already being looped from a SQL query displaying all entries
while ($row = getarray($res)){
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?
$row["number"])">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)>Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '$number' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Ideally, the information should be changed based on the different items that are being clicked. but it is staying the same.
Please try to use following code , there are so many typo mistakes you have in your code.
<?php while ($row = getarray($res)){ ?>
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?=
$row["number"]) ?>">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)">Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '".$number."' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
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?
I've gone through several examples but for some reason I'm unable to get data from my table to pass to my modal. I could use some expert guidance.
Table row is dynamically populated and looks like this:
<tr data-toggle="modal" data-target="#myModal" style="cursor: pointer" data-id="<?php echo $site_info['site_id']; ?>">
<td><?php echo $site_info['site_id']; ?></td>
...
The modal and JS are below:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Site Information</h4>
</div>
<div class="modal-body">
<div id="siteDetails">asdf</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(event) {
var getId = $(event.relatedTarget).data('id');
$("#siteDetails").html('Selected: ' + getId);
});
});
</script>
How can I make sure that the #siteDetails div gets updated?
Thanks!