I am facing issue while trying to switch between two modal windows. Requesting you guidance on the same
Objective
In my page, i have a link. When i click that link my modal 1 opens. This model 1 has a link which when i click opens 2.
Code
Sample page - Modal window 1 - Contents below are part of Modal 1
<div class="row">
<div class="col-md-12">
<?php
if($_SESSION['role'] == "Business")
{ ?>
<div class="form-group" id="buscomments">
View Business Comments
</div>
</div>
<div class="col-md-12">
<?php }else { ?>
<div class="form-group" id="othcomments">
View Other Comments
</div>
<?php } ?>
</div>
Now in the same HTML File - I have two other models
<div class="modal fade text-center" id="busscomments">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<div class="modal fade text-center" id="othcomments">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
Modal content of these modals are available in busscomments.php and
othcomments.php respectively
Output :
My Modal 1 opens correctly but when i click busscomments.php link which should ideally open modal 2, does not happen. i could see the fade effect but no modal is displayed
What i referred :
I refered the below links and try to modify my code but no luck
Stackoverflow link 1
Not sure What i am missing. I understand that traditional use of Jquery to do the same should be ideal. But any help in this regard would be helpful.
Please let me know if more information is required from my end.
Thanks
UPDATE :
Othcomments.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Other Comments</h4>
</div>
<div class="modal-body">
<div class ="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">Other Comments</th>
</tr>
</thead>
<?php
while(mysqli_stmt_fetch($statement))
{
$response = array("oth"=>$othcomments);
?>
<tbody>
<tr>
<td><?php echo $response['oth']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
</div>
MY BAD.. I absolutely messed up calling the modal ID's. I interchanged the Id's and there was no result from the database. I fixed the issue. Thank you
Related
I have a table showing the summary for every ticket submitted from user.
Every line of this table has a "Charge Exp" button, that opens a modal that allows to load the expenses for every ticket opened from the user.
<table id="ticketList" class="table table-striped table-hover">
<thead>
<!-- header fields -->
</thead>
<tbody>
<?php
if($numrows_ticket > 0 ) {
if($numrows_ticket < $limit){
$limit = $numrows_ticket;
}
for($i = $paginationStart; $i < ($paginationStart+$limit);$i++){
?>
<tr>
<td><?php echo $arr[$i]['jira_id'];?></td>
<td><?php echo $arr[$i]['project'];?></td>
<td><?php echo date_format(date_create($arr[$i]['data']), "d/m/y H:i");?></td>
<td><?php echo $arr[$i]['id_user'];?></td>
<td><?php echo "xXstatusXx";?></td>
<td><button id="btnExp" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#chargeExpenses"><?php echo "Charge Exp"?></button>
<!-- Modal -->
<div class="modal" id="chargeExpenses" tabindex="-1" role="dialog" aria-labelledby="expensesForm" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<?php include "load_expenses.php";?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I write the data into the fields of the modal (without submitting), the same content appears if I close, go to a different line and open a new modal. When I submit, multiple forms for every line of the table are submitted.
load_expenses.php:
<?php error_log("counter load exp: ".$i);?>
<form action="xxx.php" method="post" id="exp_form-<?php echo $i?>" class="spellcheck exclusive save" name="dett2-<?php echo $i?>" enctype="multipart/form-data">
In the log I have $i from 0 to 9, as I'd expect. The id and name of the form is however always 0.
What's wrong and what could be the best way to do it?
you have only one modal and whenever you add something to it it stays there just gets hide when you close the modal .
There can be some options to do it one of them can be that you use modal id different for each modal like
<div class="modal" id="chargeExpenses[$x]" tabindex="-1" role="dialog" aria-labelledby="expensesForm" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<?php include "load_expenses.php";?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and when you open up the modal just pass the id of the row you clicked
Good day. In my Laravel App, I have a foreach loop where I display all products. I also have a quickview modal where users can view the products without loading a new page. Furthermore, I am using owlcarousel.js to display the products. Unfortunately, owl.carousel breaks the bootstrap modal unless the modal is placed outside the owl.carousel. But, since the products are loaded on the page dynamically, I can't access the ids of the modals outside the owl carousel div which encompasses the loop.
The $modal_id variable is only returning the last Id in the loop. So, please what is the way out?
How can I access the individual ids within the loop from on click from outside
The code is shown below
<div class="product owl-carousel">
<?php $modal_id = 0; ?>
#foreach($new_arrivals as $new_arrival)
<div class="pro">
<div class="pro-img">
<?php $modal_id = $new_arrival->id?>
<span class="sticker-new">new</span>
<div class="quick-view-pro">
<a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"
href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>
</div>
</div>
</div>
#endforeach
</div>
<!-- Modal is shown below !-->
<div class="product-view">
<div class="container">
<div class="modal fade" id="{{$modal_id}}">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
</div>
</div>
Try this code:
<div class="product owl-carousel">
<?php $modal_id = 0; ?>
<?php $modal_ids = []; ?>
#foreach($new_arrivals as $new_arrival)
<div class="pro">
<div class="pro-img">
<?php $modal_id = $new_arrival->id?>
<?php $modal_ids[] = $new_arrival->id ?>
<span class="sticker-new">new</span>
<div class="quick-view-pro">
<a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"
href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>
</div>
</div>
</div>
#endforeach
</div>
<!-- Modal is shown below !-->
#foreach($modal_ids as $item)
<div class="product-view">
<div class="container">
<div class="modal fade" id="{{$item}}">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
</div>
</div>
#endforeach
Hope help you.
A PHP function loops through an array of objects and lists down their titles. I have a link that opens a modal. How can I dynamically load the modal header and body with regard to the object $r from the $results when I press details?
<?php
foreach ($results as $r) {
?>
<div class="row justify-content-center">
<div class="alert alert-success">
<strong>
<?php echo $r['_source']['title']; ?></strong> <span id="showSearchTerm"></span></br>
<a data-target="#myModal" data-toggle="modal" class="MainNavText" id="MainNavHelp" href="#myModal">Details</a>
</div>
</div>
<!-- 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> -->
<h2 class="modal-title">
<?php echo $r['_source']['title']; ?>
</h2>
</div>
<div class="modal-body">
<p>
<?php echo $r['_source']['body']; ?>
</p>
<p>
<?php echo $r['_source']['path']['real']; ?>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
}
Take the information you need to fill up the modal from an Ajax call. After that you can add that content with:
$(".classname").append(information_from_Ajax_call_stored_in_variable);
So this is my code, its a Laravel .blade.php but anyway my problem is with this HTML / PHP code.
The problem is that when I press on any delete button I get the same id, I get cat->id = 1. when I press the 'delete' button on the laptop row, I should get in my delete confirmation the id number: 2, but I still get the number: 1 and its that way with any other row
<div class="">
<div class="box">
<div class="box-header">
<h3 class="box-title">All Categories</h3>
</div>
<div class="box-body">
<table class="table table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Id</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
#foreach($categories as $cat)
<tr>
<td>{{$cat->nombre}}</td>
<td>{{$cat->id}}</td>
<td>
<button class="btn btn-danger" data-catid={{$cat->id}} data-toggle="modal" data-target="#delete">Delete</button>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
For the modal im using the next code:
<div class="modal modal-danger fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel"><span>Delete Confirmation</span><</h4>
</div>
<form action="{{route('categories.destroy','test')}}" method="post">
{{method_field('delete')}}
{{csrf_field()}}
<div class="modal-body">
<p class="text-center">
<span>Are you sure you want to delete this {{ $cat->id}}?</span>
</p>
<input type="hidden" name="category_id" id="cat_id" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal"><span>No, Cancel</span></button>
<button type="submit" class="btn btn-warning"><span>Yes, Delete</span></button>
</div>
</form>
</div>
</div>
I pressed the delete button on the Laptop row, and I get the id number:1 when I should get id number:2. this apply on every row
This is because everytime you click on the delete button it calls the same model with the same ID. Change you Button ID
<button class="btn btn-danger" data-catid={{$cat->id}} data-toggle="modal" data-target="#delete-{{$cat->id}}">Delete</button>
And the modal ID as well
<div class="modal modal-danger fade" id="delete-{{$cat->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
NOTE: You might need to keep the modal box in foreach loop so that delete button is mapped to the correct modal box
I am trying to open bootstrap pop for every row in table .It works if I keep the
onclick event in loop and pop up window in loop for getting different id ie photoModal.But for some reason i have to keep the pop up window out of loop.
<!-- Image toggle box start-->
<div class="bs-example">
<div id="photoModal" class="modal fade">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">rudra pop 2 </h4>
</div>
<div class="modal-body"> <img src="<?php echo URL;?>images/decor/Int-Design2.jpg" style="max-width:100%; " /> </div>
</div>
</div>
</div>
</div>
<!-- End Image toggle box start-->
<a href="#" data-toggle="modal" data-target="#photoModal" data-title="Feedback"
style="border:none !important; text-decoration:none !important;">
<div class="tz-image-item">
<img alt="" src="images/decor/Int-Design1.jpg">
</div>
</a>
Use Javascript to open your modal dialog. That should help you.
$(document).ready(function() {
$('tr').on('click', function(ev) {
$('#my-modal').modal('show');
});
});