I have below code with href link that will open the popup form. How can I pass the parameters to this popup form??
echo "<a class=\"btn btn-primary btn-xs\" href=\"#contactAdvertiser\" data-toggle=\"modal\" ><i class=\"fa fa-edit\"></i> Reply </a></p>";
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
this is a simple way only
i make use of bootstrap and jquery
<br/>
this are buttons generated by the php
<br/>
you can create a element data attribute where in you can put
<br/>
your php contents to be transfer to the modal or popup
<br/>
<button type="button" class="btn btn-primary clickbutton" data-toggle="modal" data-target=".bs-example-modal-sm" data-transfer="This is a data that i am holding generated by the php">Small modal</button>
<button type="button" class="btn btn-primary clickbutton" data-toggle="modal" data-target=".bs-example-modal-sm" data-transfer="This is a data that i am holding generated by the php sample 2">Small modal1</button>
<div id="popup" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<p>Sample Test Data</p>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// bind on click event on the button once it was open
// change the contents of modal or the popup
// contents
$('.clickbutton').on('click', function() {
// get the data-transfer attribute and
// send it to modal/popup data
var data = $(this).attr('data-transfer');
// change the content of the modal using javascript
// jquery dom manipulation
$('#popup').find('.modal-content p').html(data);
});
});
</script>
</body>
</html>
Related
i have a modal which opens when the Edit button is clicked now i want that the value of data-href in with which the modal opens on clicking to echo inside of modal body how can i do that
Edit
You can use event.relatedTarget function have more dynamic approach to get the data-attributes.
You do not need to use an inline onclick function here this can be done easily using the native jQuery bootstrap function like show.bs.modal and get the a data attributes on click and to be displayed in the modal.
$("#editModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var getHref = button.data('href') //get button href
$('#href').text(getHref) //show in the modal
})
Live Working Demo:
$("#editModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var getHref = button.data('href') //get button href
console.log(getHref) //{{ url('admin/product_edit/'.$cat->id) }}
$('#href').text(getHref) //show in the modal
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Edit
<!-- Modal -->
<div class="modal fade" id="editModal" 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">
<span id="href"></span>
</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>
You can do it like
<a href="javascript:void(0);" data-href="/sample/url" class="edit_product btn btn-sm btn-primary" data-toggle="modal" data-target="#editModal" onclick='process(this)'> Edit</a>
function process(inp) {
console.log(inp.getAttribute('data-href'));
}
if you are using jQuery, then you can do this
let hrefVal = null
$('.edit_product').click(function () { hrefVal = $(this).data('href') })
I have a laravel datatable the following:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/>
</head>
This is the table:
<td><button
type="button"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#favoritesModal">
Add to Favorites
</button></td>
and here I have created the modal:
<div class="modal fade" id="favoritesModal"
tabindex="-1" role="dialog"
aria-labelledby="favoritesModalLabel">
<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="favoritesModalLabel">The Sun Also Rises</h4>
</div>
<div class="modal-body">
<p>
Please confirm you would like to add
<b><span id="fav-title">The Sun Also Rises</span></b>
to your favorites list.
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
<span class="pull-right">
<button type="button" class="btn btn-primary">
Add to Favorites
</button>
</span>
</div>
</div>
</div>
</div>
Can anyone please help me how do I implement this modal in a datatable row?
Basically I want everytime the user clicks a button show Image to open a modal with the image inside
Thanks in advance
Probably easiest if you add a unique class (say... 'imageButton') as well as a data-image-id to the button to identify which image you want. If you want individual title, you may wish to add a data-img-title on the same button.
So - sort of like this:
<td><button
type="button"
class="btn btn-primary btn-lg imageButton"
data-toggle="modal"
data-img-title ="{{$looped->title}}"
data-img-id = "{{$looped->id}}"
data-target="#favoritesModal">
Add to Favorites
</button></td>
Then, some jquery AJAX to get the image data from your controller and then place that HTML inside the modal. Something like this:
$('.imageButton').on('click', function () {
var imgTitle = $(this).data('img-title');
var imgId = $(this).data('img-id');
$.ajax({
url: "{{url('url_for_your_image_returning_controller_method)}}" + "/" + imgId,
type: "GET",
success: function (h) {
$(".modal-title").text(imgTitle);
$(".modal-body").html(h);
$('#modal').modal();
},
error: function () {
swal("Error", "Unable to bring up the creation dialog.", "error");
}
})
});
Depending on what you are sending through that would work. You can also chose to create an image tag, and send through the new src instead of photo data something like this if you want to show thumbnails as well:
<img id="modalImage" src="{{url('images')."/".(isset($image->thumb)?$image->thumb:$image->image)}}"
class="picToModal">
Then replace the src within the $("#modalImage") element with your new source and trigger. There are lots of options and branches, and you'll need to re-work to suit, but this should get you started.
This is my page, how to get modal after form submit.
I want to get Modal as I am in requirement of doing such task. This is just simple practice modal page for my understanding.
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit")
{
?>
<script type="text/javascript">
$(window).load(function()
{
$('#myModal').modal('show');
});
</script>
<?php
}
?>
<!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">
<h2>Modal Example</h2>
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<form method="post">
<div class="col-sm-4">
<input type="text" name="text" class="form-control"> <br>
<input type="submit" name="btn" class="btn btn-danger">
</div>
</form>
<!-- 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>
First of all do not include <script> tags outside the html tags, put them in the <body> or <head> tags. Whenever you are working with the DOM and jQuery, wrap your code in a document ready closure. Ex:
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
You need to place your jQuery after the definition of the modal in the HTML Since you can not display a BS modal before the HTML page and the modal is defined.
Also the POST response from the form submit button is "Submit Query" not just "Submit".
Put the following PHP under the last </div> tag from the modal definition and the before the </body> tag and it will work:
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit Query")
{
?>
<script type="text/javascript">
$('#myModal').modal('show');
</script>
<?php
}
?>
I've already tried :
Flash::overlay('message');
But no result.
Controller action would be something like..
//use Illuminate\Http\Request;
public function flashTest(Request $request){
//see explanation for following line at very end
$request->session()->forget('flash_notification');
//Flash::success('this is an alert message'); //if you want to show alert message
Flash::overlay('Modal Message');
return view('yourview');
}
in view
<head>
<!-- Bootstrap css-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<!--if it's not an overlay, show flash message-->
#if (!Session::has('flash_notification.overlay'))
<div class="alert alert-{{ Session::get('flash_notification.level') }}">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ Session::get('flash_notification.message') }}
</div>
#else
<!--perform your overlay action here. For now i am showing a model-->
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
<!-- bootstrap 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">{{ Session::get('flash_notification.title') }}</h4>
</div>
<div class="modal-body">
<p>{{ Session::get('flash_notification.message') }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endif
<!-- other code -->
<!-- bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
OR
if you exclusively want to use this package only;
run command php artisan vendor:publish
after adding code in config/app.php as stated in laracast/flash.
This will add two package views in the "/vendor/laracasts/flash/src/views/" directory. Here you will find the default views (you can customize them).
now in your view file simply add
<body>
#include('flash::message')<!-- this line is important -->
<!-- bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- This is only necessary if you do Flash::overlay('...') -->
<script>
$('#flash-overlay-modal').modal();
</script>
</body>
Explanation for $request->session()->forget('flash_notification');
Somehow this package was retaining keys of overlay session variable. i.e. if you show overlay message first and next time you want to show flash message, a flash message would also appear as an overlay. This line is added to prevent this behavior. refer laravel session .
Also check out this bootstrap overlay
I have done alert for submit button and its working. but for the same page i have two popup buttons for them also i have to add alert but it wont work for me. Please help in this: I have my alert code which work for only submit button:
(function() {
var proxied = window.alert;
window.alert = function() {
$("#myModal .modal-body").text(arguments[0]);
$("#myModal").modal('show');
};
var myVar = setInterval(myTimer, 100000000000000000000);
})();
alert('SUCCESS');
function myTimer() {
window.location.assign('job_schedule');;
}
function redirectfun() {
window.location.assign('job_schedule');
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js">
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Alert</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" onclick="redirectfun()" aria-hidden="true">Close</button>
</div>
</div>
I don't know if I really understand your question, but you can try this:
function your_function_name(){
if (!confirm("Please Confirm - Yes or No?")) return;
//following your codes ...
}