I have the following form code:
<div class="modal" 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">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>
<form action="/admin/menuContent.php?id=<?php echo $menuId ?>" method="post">
//few inputs...
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
<div class="col-sm-1">
Cancel
</div>
</form>
And my problem is that after click save button the modal appears but just for a second or less, what can be a problem? Thanks for helps! :)
that error come just because of url passed in form action.try to figure out that.whether you have passed correct url or not.
i have tried this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<div class="modal" 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">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>
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
</div>
</div>
</body>
</html>
You should not trigger form submit and modal with a single submit button.When you trigger the submit button the modal disappears and direct to menuContent.php.You should use some client side programs to pass the parameters into the php.
When you click the save button, the form was submitted.
So this goes to action page. (action="/admin/menuContent.php?id=")
Please refer this and solve your problem: https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Related
I give up. Such a simple thing. Can someone tell me why this modal refuses to popup when I click the button?
#extends('index')
#section('title', 'Labs')
#section('content')
>Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#endsection
If its not inside a section then it works. But my page has a navigation bar and that won't show if code is not inside the #section.
EDIT: Here's how it looks inside my app:
When I click the "Launch demo modal" button, nothing happens.
If I change the code to this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">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>
</div>
</body>
</html>
Then it works fine, but no more navigation bar.
Apparently the head section with the link and script info is needed. The following code works.
#extends('index')
#section('title', 'Labs')
#section('content')
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">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>
</div>
</body>
</html>
#endsection
I'm using modal from bootstrap. The modal opens but it doesn't close either with the cross or close button.
This is what I have on my index.php file:
<div id="editar" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
</div>
And this is the modal which is in a separated .php file:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Accion</h4>
<button type="button" class="close" data-dismiss="modal" id="cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="editar" value="<?php echo $id; ?>">
<div class="form-group">
<label for="item_name">Accion:</label>
<input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
<button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
</div>
</div>
</div>
I have to keep them in two files.
If you noticed my comment, I have told you its headache to use two different pages. Also it is not recommended way.
I have created a button for you and on the button click the modal shows up with cancel button that goes away when you click it. It is the way exactly you wanted afterwards.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click Me
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Editar Accion</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="hidden" name="editar" value="<?php echo $id; ?>">
<div class="form-group">
<label for="item_name">Accion:</label>
<input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
<button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.
I think it is better to make use of JQuery so that you can have more control over what happens (e.g: clear fields, etc) on the modal on close.
$(document).on('click','#button_id',function(e){
e.preventDefault();
//you can clear fields first if you need to
$('#accion').val('');
$('#modal_id').hide(); //close modal
});
Please remember to include the file into the index.php. Keeping modal in separate file will help you reuse the same somewhere in your code, that is if you keep your modal code dynamic enough.
I have the following database:
| fund_name | fund_description | amount_received | actual_amount
Bootstrap With PHP :
<div class="card-deck">
<?php
$sql = "SELECT * FROM fundraiser;";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($result)){
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$row['fund_name'].'</h5>
<div class="card-text">
<p>'.$row['fund_description'].'</p>
<h6>Amount:'.$row['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$row['amount_received'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary" data-
toggle="modal" data-target="#exampleModalCenter"> Donate
</button>
</div>
</div>
</div>
</div>';
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-
hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" class="form-control" id="formGroupExampleInput"
placeholder="Enter Amount">
</div>
<div class="form-group">
<input type="submit" class="form-control btn btn-primary btn-small"
id="formGroupExampleInput" >
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Here In my above code im obtaining data from database and displaying the fundraisers using the bootstrap 4. Each fundraisers is displayed using the cards and each card has a donate button. Donate button links to a modal which has a form to pay amount to fundraisers.
My Question is how to differentiate the donate button of a particular card that payment is going on for that so that i can store 'amount_received' field in database for a particular row of fundraiser?
You can use data-id to store the id of each fundraiser. When a user click on the button to open the modal, you will get the value of data-id. In the modal form I add <input type="hidden" name="fundid" id="fundid"> to store the data-id. Try the following code:
Here is a replicate of your data in php array:
<?php
$fundraiser = array(
array('id'=>1,'fundname'=>"Anyname","description"=>"About fund","actual_amount"=>50.00,'amount_receive'=>40),
array('id'=>2,'fundname'=>"Anyname2","description"=>"About fund3","actual_amount"=>100.00,'amount_receive'=>90),
array('id'=>3,'fundname'=>"Anyname3","description"=>"About fund3","actual_amount"=>20.00,'amount_receive'=>10)
);
?>
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck">
<?php
foreach($fundraiser as $key=>$val):
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$val['fundname'].'</h5>
<div class="card-text">
<p>'.$val['description'].'</p>
<h6>Amount:'.$val['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$val['amount_receive'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary fundid" data-toggle="modal" data-target="#exampleModalCenter" data-id="'.$val['id'].'"> Donate
</button>
</div>
</div>
</div>
</div>';
endforeach; ?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" action='updatedb.php'>
<div class="modal-body">
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" name="amount" class="form-control" id="formGroupExampleInput" placeholder="Enter Amount">
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="form-control btn btn-primary btn-small" id="formGroupExampleInput">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To get data-id and store in the form
<script type="text/javascript">
$('.fundid').on('click', function (e) {
$('#fundid').val($(this).attr("data-id"));
});
We don't want to leave trace of the data-id when we close the modal dialog
$('#exampleModalCenter').on('hidden.bs.modal', function () {
$('#fundid').val('');
});
</script>
When you submit the form, it will submit the data to updatedb.php. In updatedb.php, to get the form data:
the content of updatedb.php
<?php
$fundid = $_POST['fundid'];
$amount = $_POST['amount'];
echo "ID=>".$fundid."<br> Amount=>".$amount;
?>
I have a navigation bar with some links. The links all trigger the same modal but I need to display different information inside the modal based on the link. I'd prefer a non-jQuery solution but if it is necessary I'll take it.
I tried this...
firstpage.php
<li>My Messages</li>
<li>My Notifications</li>
<!---Modal -->
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<?php include 'modal.php';?>
</div>
</div>
</div>
<!-- Modal -->
modal.php
<!--
=============================
ISSET_GET MESSAGES
=============================-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messages</h4>
</div>
<div class="modal-body">
<p>some text here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--
=============================
ISSET_GET NOTIFICATIONS
=============================-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Notifications</h4>
</div>
<div class="modal-body">
<p>some text here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I think you should render all of your modals at the bottom of the page and use jQuery to to load the modal associated to the link.
e.g.
<button type="button" class="btn btn-info btn-lg" id="myBtn1">Open Modal 1</button>
Then bind bootstraps .modal() function to the button's click event with jQuery. This is where you can set which modal to load eg.
$("#myBtn1").click(function(){
$("#myModal1").modal();
});
Please run my code snippet which I have modified from w3 schools documentation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate multiple Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn1">Open Modal 1</button>
<button type="button" class="btn btn-success btn-lg" id="myBtn2">Open Modal 2</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" 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">Look its modal one</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>
<div class="modal fade" id="myModal2" 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">look its modal 2</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>
</div>
<script>
$(document).ready(function(){
$("#myBtn1").click(function(){
$("#myModal1").modal();
});
$("#myBtn2").click(function(){
$("#myModal2").modal();
});
});
</script>
</body>
</html>
original source of code that I modified:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h
Hello,
I created a bootstrap 3 modal and it works on my mobile device but on my desktop when you click the button it does not open the modal.
I've tried resizing the modal box even adjusting it's zindex but those did not fix the problem.
Does anyone know what the issue is i'm having?
<div class="container-fluid formbox ">
<div id="cageModal" class="modal fade" role="dialog" class="col-sm-10 col-sm-offset-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cage The Great</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VqghSmwdnpg" frameborder="no" allowfullscreen></iframe>
<button type="button" class="btn btn-default" data-dismiss="modal">See More</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid formbox ">
<div class="col-xs-12 col-sm-12">
<h3>Get Familiar with the artists below.</h3>
<div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3">
<div> <button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#cageModal">Cage The Great</button>
</div>
</div>
</div>
</div>
Non-working code on jfiddle
Your code is correct. But your bootstrap references (CDN) are not.
replace your references to Bootstrap with the latest. Or better yet, use Bootstrap locally and never touch it!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is your broken jfiddle, now working