I want to open model on successful submission of form but although form is submitting modal is not popped up.
public function insert($data) {
// Inserting into your table
// Calling model
$done = $this->db->insert('sign_up', $data);
if($done) {
echo "<script>$('#thankyouModal').modal('show')</script>";
echo '<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<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" id="myModalLabel">Thank you for pre-registering!</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div>
</div>';
}
}
I am trying to open the model in controller using
$data = array(
'first_name' => $fname,
'last_name' => $lname,
'email' => $email,
'password' => $password
);
$this->load->model('modal');
$this->modal->insert($data);
Try below code; this will work
public function insert($data) {
// Inserting into your table
// Calling model
$done = $this->db->insert('sign_up', $data);
// You can do something else here
if($done) {
?>
<script>$(document).ready(function(){$('#thankyouModal').modal('show')});</script>
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<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" id="myModalLabel">Thank you for pre-registering!</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div>
</div>
<?php
}
}
Put the code of modal in a view file so that we can easily call the modal with javascript in the view file.
And you need to set a variable in flash data so that you can check the condition that the form has been succesfully inserted or not.
Here is the code , I hope it helps you:
Controller file :
public function insert($data) {
// Inserting into your table
// Calling model
$done = $this->db->insert('sign_up', $data);
// You can do something else here
if($done) {
//You can set the message and variable name as per your need.
$this->session->set_flashdata('inserted','Yes');
//Redirect to the desired view file
redirect("controller/anotherfunction_where_view_file_is_loaded");
}
View File:
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<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" id="myModalLabel">Thank you for pre-registering!</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div>
</div>
<?php if((isset($this->session->flashdata('inserted'))) && $this->session->flashdata('inserted') != "") { ?>
<script type="text/javascript">
$(document).ready(function(){
$('#thankyouModal').modal('show');
});
</script>
<?php } ?>
I got the answer
CONTROLLER
public function insert() {
$signup_email = $this->input->post('signup_email');
$signup_password = $this->input->post('signup_password');
// Checking if everything is there
if ($fname && $signup_email && $signup_password) {
$data = array(
'email' => $signup_email,
'password' => $signup_password
);
if($this->modal->insert($data)) {
echo "SOME DATA TO BE DISPLAYED IN MODAL";
}
}
}
VIEW
<body>
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<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" id="myModalLabel">Thank you for pre-registering!</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div>
</div>
<script>
var signup_email = $('#signUp').val();
var signup_password = $('#signUpPassword').val() ;
$.ajax({
type: "POST",
url: "<?php echo site_url('form/insert'); ?>",
data: { signup_email: signup_email, signup_password: signup_password },
dataType: "html",
success: function(data) {
if(data) {
$('#thankyouModal').modal('show');
}
}, error: function() {
alert("ERROR!");
}
});
</script>
</body>
Related
After searching a lot, doing lots of debugging, and I figured out that inside slick carousel div, the bootstrap modal is not displaying. Only showing a gray dropback.
Here is code: In this code, we are getting details from the database and with slick showing images and when someone clicks on those images it will open a modal for that image. But everything is fine except this. How to call the modal inside slick div.
Thank you in advance
<?php
$ush = $mysqli->prepare("SELECT company_id, img, name from list");
$ush->execute();
$ush->store_result();
$ush->bind_result($u_bid, $u_bimg,$u_bname);
?>
<div class="company-logo">
<?php
while($ush->fetch()){
?>
<div>
<a href="#<?php echo $u_bid;?>" data-toggle="modal" data-target="#<?php echo $u_bid;?>"><img
src="data:image/png;base64,<?php echo base64_encode($u_bimg); ?>" height="80px" width="80px"></a>
<!-- Modal -->
<div class="modal" id="<?php echo $u_bid;?>" tabindex="-1" role="dialog" aria-labelledby="<?php echo $u_bid;?>" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
</button>
<h3><?php echo $u_bname;?></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
$ush->close();
?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.company-logo').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:14,
slidesToScroll:14,
arrows:false,
responsive:[{
breakpoint:768,
settings:{
slidesToShow:4,
slidesToScroll:4
}
}]
})
});
</script>
I think you should move the modal code parts outside of your carousel parts like this:
<?php
$ush = $mysqli->prepare("SELECT company_id, img, name from list");
$ush->execute();
$ush->store_result();
$ush->bind_result($u_bid, $u_bimg,$u_bname);
$carousel_content = '';
$modal_content = '';
while($ush->fetch()){
$carousel_content .= '<div>
<a href="#'.$u_bid.'" data-toggle="modal" data-target="#'.$u_bid.'"><img
src="data:image/png;base64,'.base64_encode($u_bimg).'" height="80px" width="80px"></a>
</div>';
$modal_content .= '<!-- Modal -->
<div class="modal" id="'.$u_bid.'" tabindex="-1" role="dialog" aria-labelledby="'.$u_bid.'" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
</button>
<h3>'.$u_bname.'</h3>
</div>
</div>
</div>
</div>
</div>';
?>
<?php
}
$ush->close();
?>
<div class="company-logo"><?=$carousel_content?></div>
<div id="modal_contents"><?=$modal_content?></div>
<script type="text/javascript">
$(document).ready(function(){
$('.company-logo').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:14,
slidesToScroll:14,
arrows:false,
responsive:[{
breakpoint:768,
settings:{
slidesToShow:4,
slidesToScroll:4
}
}]
})
});
</script>
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 am new to laravel and even more with ajax, I am trying to update from ajax but I can not do anything, it stays frozen and after a few seconds the url is updated with the data that happens to it, but in the base data nothing happens. If you could correct the code I would appreciate it because I am sure that this is the one that is giving problem because of my lack of experience, thank you very much
Route:
Route::name('appointments.update')->put('/appointment/$id', 'AppointmentController#update');
html:
<div class="modal fade" id="UpdateEventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Update</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
#include('appointments._form-appointments')
</div>
<div class="modal-footer">
<div class="col-md-12 form-group">
{{ Form::submit('Update',['class' => 'btn btn-primary','id' => 'btn-modal-update',]) }}
{{ Form::button('Close',['class' => 'btn btn-default', 'data-dismiss' => 'modal']) }}
</div>
</div>
</form>
</div>
</div>
ajax:
$(document).ready(function() {
$('#btn-modal-update').click(function(){
var id = $('#appointment_id').val();
var route="{{url('appointments.update')}}/"+id+"";
$.ajax({
type:'PUT',
headers:{"Authorization": localStorage.getItem('token')},
url:route,
dataType:'json',
data: {startTime: $('input#startTime').val(), finalTime: $('input#finalTime').val(), patient_id: $('select[name="patient_id"').val(),
user_id: $('select[name="user_id"').val(event.user_id), date: $('input#date').val(), appointment_id: $('#appointment_id').val()},
success:function(data){
if(data.success == 'true'){
alert('updated');
}
},
error:function(data){
alert('not updated');
}
});
});
});
controller:
public function update(Request $request, $id)
{
if($request->ajax()){
$appointment = Appointment::find($id);
$appointment->date = $request->date;
$appointment->startTime = $request->startTime;
$appointment->finalTime = $request->finalTime;
$appointment->clinic_id = $request->clinic_id;
$appointment->user_id = $request->user_id;
$appointment->patient_id = $request->patient_id;
$result = $appointment->save();
if (result) {
return response()->json(['success'=>'true']);
}
else{
return response()->json(['success'=>'false']);
}
}
}
You should change your event listener a little bit:
Listen to the submit() event on your form and make sure that you prevent the normal form submission by adding the following line at the end of the callback: return false;
If it still isn't doing anythin, check your console for error output.
I am trying to show a bootstrap modal on body load based on value from mysql database. I have included bootstrap modal in body and showing it successfully according to database value with:
$resultsPop = mysql_query("select popup from members where mid=" . $mid);
$pop = mysql_result($resultsPop, 0, "popup");
if($pop == 0) {
$popupval = "<script type='text/javascript'>$(window).load(function(){ $('#MyPopUp').modal('show'); });</script>";
} else {
$popupval = "";
}
echo $popupval;
And my modal code is:
<div class="modal fade" id="MyPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="">
<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="myModalLabel">Welcome</h4>
</div>
<div class="modal-body" style="text-align: center;">
<span>
Welcome Popup
</span>
</div>
</div>
</div>
</div>
Now, I want to have a checkbox in the modal which on checked can silently pass value 1 and logged in member variable $mid value to a php page after user clicks on modal close button. So, popup value in members table is updated with 1 for that logged in member who do not want popup to be see again.
I have searched for such thing but couldn't successful and I am getting no idea on it.
Try this.
yourphpfile.php
<?php
$resultsPop = mysql_query("select popup from members where mid=" . $mid);
$pop = mysql_result($resultsPop, 0, "popup");
if($pop == 0) {
$popupval = "<script type='text/javascript'>$(window).load(function(){ $('#MyPopUp').modal('show'); });</script>";
} else {
$popupval = "";
}
echo $popupval;
$ppop = $_POST['pops'];
$username = $_POST['mids'];
//Here you can update your database with 1 where username is mids.
//On success
$output = json_encode(array('type' => 'pop'));
die($output);
//Else
$output = json_encode(array('type' => 'error'));
die($output);
?>
<script>
$(document).ready(function(){
$("#closemodal").click(function(event){
event.preventDefault();
var popups = $('#popups').val();
var user_id = $('#mids').val();
$.ajax({
type: 'post',
url: yourphpfile.php,
dataType: 'json',
data: $('#yourform').serialize(),
success: function(data)
{
if(data.type == 'pop')
{
$('#MyPopUp').modal('hide');
}
}
});
});
});
</script>
<div class="modal fade" id="MyPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" id="closemodal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Welcome</h4>
</div>
<div class="modal-body" style="text-align: center;">
<span>
Welcome Popup
</span>
<form action="" id="yourform" method="POST" role="form">
<div class="checkbox">
<label><input type="checkbox" name="pops" id="popups" value="1">Pops</label>
</div>
<input type="hidden" id="mids" name="mids" value="<?php echo $_SESSION['mids']; ?>">
</form>
</div>
</div>
</div>
</div>
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.