Hi I want to open modal after I click on button. But I want to display different content on the basis on which button I click.
So in html I have:
<h1>article1</h1>
<div class="btnComment">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Comment button 1</button>
</div>
<h1>article2</h1>
<div class="btnComment">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Comment button 2</button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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" id="gridSystemModalLabel">Comments</h4>
</div>
<div class="modal-body">
<?php
mysql_query("set names 'utf8'");
$selectConf = mysql_query("SELECT * FROM e_comments WHERE article='".$article."'");
$count = 0;
if($selectConf){
while ($row = mysql_fetch_array($selectConf)) {
$text = $row['text'];
echo $text;
}
}
?>
</div>
</div>
</div>
</div>
So how can I know in modal which button was clicked? And how I can pass some variable throw it? I want to show comments of article. So I need to pass id of article and select all comments where is id of article same.
There's a direct example on the bootstrap page at http://getbootstrap.com/javascript/#modals-related-target. Here is the equivalent code for your dialog
<script>
$(document).ready(function () {
$('.bs-example-modal-lg').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
alert(button.html())
})
})
</script>
edit : you'd have to change the alert() part to whatever if else logic you want.
Related
Heys guys
I am having trouble passing an ID variable to be used in a pop-up window in HTML
this is what I am trying to do
<?php
$sql = "select * from locations";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()){
$locationID = $row['id'];
<button class=\"btn btn-success btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\"> Show Listed Properties </button>
// here i want to pass the locationID variable so that when the user clicks on the
// button a pop up window appears displaying information based on the location id.
}
?>
my pop up window looks like this:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Hi there, I am a Modal Example for Dashio Admin Panel.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
inside the popup code, I will be performing an SQL query based on the locationID variable and then populate the popup window with the query results.
alternatively, I could just create a new page and pass the id as a get request but I feel like that does not look as professional and is more time-consuming.
could someone point me in the right direction?
add new class in the button and call it open-modal, and use data-id like so:
<button type="button" class="btn btn-info btn-lg open-modal" data-toggle="modal" data-id="<?= $id; ?>" data-target="#myModal">Show Listed Properties</button>
in the end of the file you can call it like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).on("click", ".open-modal", function () {
var id = $(this).data('id');
alert(id)
/*
proceed with rest of modal using the id variable as necessary
*/
});
</script>
hope I understand your issue well.
I want to edit record in cakephp for that i want to load modal popup that is placed inside another view edit.ctp. There is a page view.ctp where user can click link on a link and modal popup will show up. I need a different view for my modalpopup. Below is code.Please help to solve my issue. If i place my modal on the same page i.e. view.ctp it is working but i need a different view.
view.ctp
<li>
<?php
echo $this->Html->link("Edit Profucts","/PanelAdmin/products/edit/".$prod->product_id, array('update' => '#flexModal','id'=>'flexModal','data-target' => 'flexModal','htmlAttributes' => array('data-toggle' => 'modal',)));
?>
</li>
<script>
$(document).ready(function() {
$("a[data-target='flexModal']").click(function(ev) {
ev.preventDefault();
var target = $('#flexModal').attr("href");
$("#flexModals .modal-body").load(target, function(data) {
$("#flexModals").modal("show");
});
});
});
</script>
edit.ctp
<div class="modal" data-target="#flexModal" tabindex="-1" role="dialog" data-backdrop="static">
<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 class="modal-title" id="myModalLabel"></h3>
</div>
<div class="modal-body">
<?php
echo $products->product_name;
echo $products->product_desc;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
ProductsController.php
public function edit($id)
{
$products = $this->Products->get($id);
$this->set(compact('products'));
}
I have a PHP website and am using Bootstrap for the framework. When I hit a button a modal opens to show some info. I would like to know how to send a variable to this modal from the previous page.
The button is in index.php and the modal code is in modals.php.
This is the modal code:
index.php
require("modals.php");
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
modals.php
<!-- 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>
What I'm looking for is something like you would do with a url: <button data-target="myModal&id=1"> and then pick it up with $varId = $_GET['id'] inside the modal.
Is there a way?
index.php (Give class name openModal button, which is used in <script></script>. Give data-id attribute, pass value to it.)
<?php require("modals.php");?>
<button type="button" class="openModal btn btn-info btn-lg" data-toggle="modal" data-id='1' data-target="#myModal">Open Modal</button>
Place this code somewhere in same page.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
JS (fetch data-id from Open Modal button. and, pass it to ajax_modal.php page)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
$id = $_GET['id'];
?>
<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>Your Id : <?echo $id;?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
passing-data-from-page-to-bootstrap-modal-using-sql-php
If you are passing something from a previous page set the variable in the query string of the url. You can then get the variable from the url query string using $_GET
e.g.
<?php $myVar = $_GET["my value"]; ?>
<div class="modal-body">
<p><?php echo $myVar; ?></p>
</div>
Or you could just use pure javascript like so.(No PHP)
HTML:
<button data-id="myModal1" data-target="#myModal" class="myModalClass">
<!-- 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 input text where you want to show the passed value.</p>
<input type="hidden" name="myValue" id="myValue" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and get the value using javascript
$(document).on("click", ".myModalClass", function () {
var myValue = $(this).data('id');
$(".modal-body #myValue").val( myValue ); // myValue has the value 'myModal1'
});
I have a button that is created using a while loop. so the while loop creates a table row for each row in a mysql table.
I have one line of code for the button which is created again for each row of the table and each button has a different value based on the id for that record.
$order .= '<td>Edit</td>';
The problem is that I want to use that $row['ID'] and view it in a modal so I can retrieve the record with the same ID using mysqli query.
Here is the code for the modal.
<div class="modal fade" id="myModal" 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">Edit Data</h4>
</div>
<div class="modal-body">
i want to save the id in a variable here so i can use it in a php script for this modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
put this inside your loop
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>
<div id="message<?php echo $row['id'];?>" 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>
<?php echo $row['id'];?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If, I got you correct.
The modal trigger button with $row['ID']
$order .= '<td>Edit</td>';
Bootstrap Modal event to fetch the $row['ID'] value with Ajax method
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch_record.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
Modal HTML
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div> //Here Will show the Data
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Last Create fetch_record.php, retrieve the record and show in modal
<?php
//Include database connection
if($_POST['rowid']) {
$id = $_POST['rowid']; //escape string
// Run the Query
// Fetch Records
// Echo the data you want to show in modal
}
?>
adding the modal in a loop is auto duplicating the html content when it is not really necessary! it is not a good practice to add a modal to each item in a loop instead call the data only when it is requested!
here is an example add the following button to a loop in php
<button data-id="<?php echo $note['id']; ?>" onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click me </button>
on your modal you can know use that id to make a request to your db or any json
example assuming you are using a modal called showmodal use this info to make a new request to your database or desire class or function!
<?php $dataid = '<span id="dataid"/>'; echo $dataid; ?>
The echo $dataid is only to show you that the id of the clicked item in the loop really works.
as you can see here we are only adding 1 single html template in the loop and we are also only calling data when it is being requested! this will save memory and also will be faster.
I hope this helps many people
I'm passing input data to my controller like this:
if ($this->input->post('submit') === 'renew_prepaids_submit'){
if($this->affiliates_model->renew_doctor_pp($user_id, $this->input->post())){
$type = $this->input->post('type');
$amount = $this->input->post('amount');
$pp_type = $this->input->post('doctor_case_fee_type');
$doctor = $this->users_model->get_user($user_id);
$doctor = object_to_array($doctor);
$this->dev_email->pp_mailer($doctor,$type,$amount );
}
redirect('/cases/thank_you');
}
The view that contains the form template:
<? $this->load->view('client/templates/form_horizontal', $prepaid_renewal_data); ?>
What I'm trying to do is, instead of doing redirect, I'd like to first have the submit button call a modal for verification, something like this:
<div id="create-visit-modal" class="modal hide fade create-visit-modal" tabindex="-1" role="dialog" aria-labelledby="create-visit-modal" aria-hidden="true" style="display: block;">
<div class="modal-header">
<button type="button" class="close" style="margin-top:-8px;" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h1>Attention:</h1>
<p style="text-align:justify;"></b>
No returns or exchanges will be accepted. If you have any questions please call .
</p>
</div>
<div class="modal-footer">
<a class="btn btn-success" style="float:left" href="https://dev.yikes/cases/renew_pp/664">Submit</a>
<button class="btn btn-primary create-visit-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<style>
#alert{visibility: hidden !important; position: absolute;}
</style>
So, the form will pass input data to the modal, the modal will then pass that input data to the controller etc.