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.
Related
I want to echo my results in the bootstrap modal class without the page reloading or refreshing but each time i click the submit button, it reloads and it escapes the modal class... I am using foreach loop and i guess each time the loop counts after the first time, it clears everything...
<?php
$count_main_odd = 0;
$main_odds_error = $main_odds = "";
if(isset($_POST["submit"])){
if(empty($_POST["total_odds"])){
echo $main_odds_error = "<div class='error-msg'>You have not selected any odds</div>";
}else{
$main_odds = $_POST["total_odds"];
$total = 1;
if(!empty($main_odds)){
echo "You have selected the following games ";
foreach ($main_odds as $final_odd){
echo $final_odd;
$total = $total * $final_odd;
$total1 = $final_odd . ", ";
}
}
$count_main_odd = count($main_odds);
echo number_format($total, 2);
}
}
// calculating selected games
?>
This is the submit button from the page
<input type="submit" name="submit" value="Calculate Selected odds" class="btn btn-outline-success btn-sm card-link" data-toggle="modal" data-target="#exampleModalOdds"/>
This is the modal class, i had to remove the code because it looks untidy
<!-- Modal -->
<div class="modal fade" id="exampleModalOdds" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
How can i not make the page reload after clicking the submit button...
This is the input type
<input type="checkbox" name="total_odds[]" value="<?= $game->odds; ?>-<?= $game->home; ?>-<?= $game->away; ?>"/>
I'm trying to loop my modal. this modal is used to display the user's QR code. but I only get the first value.
this is my modal.
#foreach($siswas as $siswa)
<div class="modal fade" id="qrmodal" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> QR </h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<div class="form-group centered" id="QR">
{!!QrCode::size(200)->generate($siswa->nis)!!}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Print</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
#endforeach
Your problem is that the id is not unique.
But this is a bad approach. You should have only one modal and depend on the button clicked you should load the content.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
I am using bootstrap modal to display member's information. Each member has the button to open the modal. I have this button in loop:
#foreach($members as $member)
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View Details</button>
#endforeach
This modal content:
<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">Member Detail Information</h4>
</div>
<div class="modal-body">
{{$member->name}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
But everytime I get the last member's information. This is obvious but i want to pass the $member->ID from the button and dispaly their respective details in the modal. How Can I acheive this?
You can use data attribute to pass some data into Bootstrap modal.
Buttons in the loop
#foreach()
<a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>
#endforeach
Bootstrap model
<div class="modal hide" id="UserDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="user_name" id="user_name" value=""/>
</div>
</div>
And little JavaScript
$(document).on("click", ".user_dialog", function () {
var UserName = $(this).data('id');
$(".modal-body #user_name").val( UserName );
});
That's it
Little demo here : http://jsfiddle.net/Au9tc/6247/
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'
});
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.