From a link in a table:
<a href="#myModal" data-toggle="modal" data-id="'.$row['ID'].'">
and JS on that page:
<script>
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'forms/php/fetchrecord.php', //fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
})
});
</script>
I'm sending the mysql record ID to a PHP file that populates the "fetch-data" class of an "Edit" form in a BS modal. My issue is that on Submit, the modal is not sending any data to updaterecord.php. The updaterecord.php works when you open the "Edit" form in a new window rather than a modal. What am I not doing or doing wrong?
<!-- Modal -->
<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" id="myModalLabel">Edit Order</h4>
</div>
<div class="modal-body">
<form role="form" action="forms/php/updateorder.php" method="post">
<div class="fetch-data"></div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="updateorder">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
Related
So I have a few buttons that open the same modal but different content. I don't want to copy/paste the modal code each time I need to open a new model. I want to use the same modal code and according to the button clicked load different content in the modal. How can I do that?
Here is my modal code:
<div class="dialogs-holder">
<div class="dialog new_file">
<div class="dialog-header clearfix">
<a class="flaticon stroke maximize-4" href="/"></a>
<div class="dialog-title"><span class="gray-bckg">{{ //different according to button }}</span></div>
<div class="flaticon stroke x-1"></div>
</div>
<div class="dialog-content clearfix">
#include('includes.modals.' . //different template according to button )
</div>
</div>
</div>
How can I do that?
You have to use the javascript to do that.
first you have handle the each event when the buttons are clicked. then you can set the content by dynamically to the title and content of modal using javascript.
eg.
// give the id to title tag of modal
<span class="gray-bckg" id="modal_title"></span>
//give the id to content tag of modal
<div class="dialog-content clearfix" id="content"></div>
now add the script
//with script
$("#button1").on("click",function(e){
$("#content").val("this is button1 content");
$(".modal").open();
});
$("#button2").on("click",function(e){
$("#content").val("this is button2 content");
$(".modal").open();
});
It's a late answer and adapted for Laravel but it might interest someone.
I created a modal.blade.php
<div id="{{ $id or 'modal' }}" class="modal fade" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header text-center">
<h2>{{ $title }}</h2>
</div>
<div class="modal-body">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
And now when I want to pop-up a modal I use this
#component('whereyourmodalisplaced.modal', [
'id' => 'task-show', //If you use multi modal on same page, always use ID
'title' => 'Edit a task'])
#endcomponent
I'm updating the modal contact with ajax when needed with this kind of behaviour
<a href=""
data-endpoint="{{ route('tasks.show' , ['tasks' => $task->id]) }}"
data-target="task-show .modal-content .panel-body"
data-modal="task-show"
data-cache="false"
data-async="true"
data-toggle="modal" >{{ $task->name }}</a>
And make sure to always have this in your code
$('body').on('click', 'a[data-async="true"]', function(e)
{
e.preventDefault();
var self = $(this),
url = self.data('endpoint'),
target = self.data('target'),
modal = self.data('modal');
$.ajax({
url: url,
type: self.data('method'),
cache : self.data('cache'),
success: function(data)
{
if (target !== 'undefined'){ $('#'+target).html( data ); }
if (modal !== 'undefined'){ $('#'+modal).modal( 'show' ); }
}
});
});
follow bellow steps and you will got output which near your requirements.
Step 1. Create Routes like bellow in routes.php
Route::get('test_model1',['as'=>'test_model1', 'uses'=>'TestController#test_model1']);
Route::get('test_model2',['as'=>'test_model2', 'uses'=>'TestController#test_model2']);
Step 2. Setup Testcontroller with bellow code in Testcontroller.php
class TestController extends Controller {
public $param=array();
public function __construct(){
//$this->middleware('auth');
}
public function test_model1(){
$this->param['content']="Model 1 body.";
return view('test.model',$this->param);
}
public function test_model2(){
$this->param['content']="Model 2 body.";
return view('test.model',$this->param);
}
}
Step 3. setup model body content view. in resources/test/model.blade.php
<div class="row">
<div class="col-xs-12">
<p><?php echo $content; ?></p>
</div>
</div>
Step 4. setup bello code in any of your view file.
<a href="<?php echo route('test_model1'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-primary">
Launch Modal 1
</a>
<a href="<?php echo route('test_model2'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-danger">
Launch Modal 2
</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
I have table with names, when I am clicking names I need to open modal and put the name I clicked there. How I can do it? Thanks in advance
report.php
button:
<a href='#ReportModal' data-id='1' data-toggle='modal'>Open</a></td>
modal:
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
<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">asd</h4>
</div>
<div class="modal-body">
//HOW TO PRINT HERE?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
script
<script>
$(document).ready(function() {
$(document).on("click",".get-data"function(){
var val = $(this).attr("data-id");
$.ajax({
url: "../dist/scripts/report.userinfo.php",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});
});
});
</script>
report.userinfo.php
<?php
include($_SERVER['DOCUMENT_ROOT']."/dist/config.php");
$id = $_POST['id'];
$query = $db->query ("select Name from _reports where ID = '$id' ") or die($db->error());
$rows= $query->fetch_array();
echo $rows['Name'];
?>
You're almost there, now all you need is to execute the code assigned to elements with class get-data - to do achieve this, you can add the class to your anchor.
$(document).ready(function() {
$("#ReportModal").dialog();
$(document).on("click", ".get-data", function() {
var val = $(this).attr("data-id");
// for the sake of testing we assume your AJAX call works
// and then you can remove the following line and handle it
// in the success handler as shown in the comment below
$('.modal-body').html("You clicked: " + val);
/*
$.ajax({
url: "../dist/scripts/report.userinfo.php",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});*/
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Open
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
<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">asd</h4>
</div>
<div class="modal-body">
//HOW TO PRINT HERE?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm enough new with html/javascript so I would need an advice. I have to call modal from button and in this modal I would like to see a table obtained from database.
So my idea is to call modal through button so:
<tbody>
<tr th:each="fleet : ${fleets}">
<td th:text="${fleet.application}"></td>
<td th:text="${fleet.cubic}"></td>
<td th:text="${fleet.power}"></td>
<td th:text="${fleet.euroClass}"></td>
<td th:text="${fleet.engineType}"></td>
<td th:text="${fleet.traction}"></td>
<td th:text="${fleet.transmission}"></td>
<td><button data-id="showCarsButton" type="button"
class="btn btn-primary" data-toggle="modal"
data-target="#modalShowCar">Show cars</button></td>
<td><button id="addCarButton" type="button"
class="btn btn-primary">Add car</button></td>
</tr>
temporary modal:
<div class="modal fade" id="modalShowCar" 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">Fleet cars</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>
temporary js:
$(document).ready(function(){
$('#modalShowCar').on('show.bs.modal', function (e) {
var idFleet = $(e.relatedTarget).data('id');
$.ajax({
type : "GET",
url : "cars/"+ idFleet,
contentType : 'application/json',
success : function(data) {
if (data.status==200){
//I have to pass to modal the data.body
} else {
//show error
}
},
error : function(data) {
window.location.href = "/500"; //Redirect to page 500
}
});
});
});
and then from modal call the Spring controller with data-url into table tag.
I need to pass parameter (id) to perform the query, so from the button to the url into modal, how can I do it? Is this the best way?
thanks,regards
There are many ways to achieve what you are trying, with your appraoch, you can use bootstrap modal event and pass the id to modal
change id="showCarsButton" to data-id="showCarsButton"
<button data-id="showCarsButton" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalShowCar">Show cars</button></td>
JS
$('#modalShowCar').on('show.bs.modal', function (e) {
var carid = $(e.relatedTarget).data('id');
// Do Whatever you like to do,
});
Example Code
$(document).ready(function(){
$('#modalShowCar').on('show.bs.modal', function (e) {
var carid = $(e.relatedTarget).data('id');
alert(carid);
$(".modal-body").html(carid);
// Do Whatever you like to do,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalShowCar" data-id="showCarsButton">Open Modal</button>
<div id="modalShowCar" 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>
I have here the sample project that will get the value of the id of an attribute using ajax and then should show the modal using ajax.
The program that I've got is functioning well in terms of getting the id but my problem is the modal is not showing.
What I tested to know the problem is that I deleted the class="modal hide" in the modal and so the modal appeared below of the table and not in front of the whole page.
It just looked like another division under the table.
So now my problem is that the modal doesn't pop up. When the is clicked nothing happens if there is an attribute class="modal hide" of the modal, but if there is no attribute like that it is working there is a modal but it is not a pop up.
It is like another division under the table.
What's wrong with my code?
<a type="button" data-toggle="modal" id="11" class="push">Read more</a>
<script>
$(document).ready(function () {
$('.push').click(function () {
var res_id = $(this).attr('id');
$.ajax({
type: 'POST',
url: '../php-files/resolve.php', // in here you should put your query
data: 'post_id=' + res_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function (r) {
// now you can show output in your modal
$('#mymodal').modal('show'); // put your modal id
$('.modal-body').show().html(r);
}
});
});
});
</script>
<!-- Modal -->
<div id="myModal" class="modal hide fade in" 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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In success function add this code
$('#id1').modal('show'); // you
$('#body').html(r);
Your model should be as below
<div class="modal" id="id1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<div id="body" class="modal-body text-center">
<!-- loading modal.. -->
</div>
..
</div>
I currently have panels and each panel has an ID associated with it which is held in the data-id attribute of each panel. I can get this easily through JavaScript. One the panels I have a delete button which will delete the panel and it's entry within the database. Once this delete button is clicked, a modal will fire up with a Html.BeginForm() which is hooked up to an action on my controller. I was wondering if it was possible to add an the widget ID to the routing values via JavaScript?
Here is my modal:
<div class="modal fade" id="deleteWidgetModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Delete widget?</h4><!--add depending on which panel you have clicked-->
</div>
<div class="modal-body" id="myModalBody">
<!--Depending on which panel insert content-->
#using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post,))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
Do you wish to delete this widget?
<div class="form-group">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
and here is the JavaScript:
/*---------------------------------------------DELETING PANELS-------------------------------------------------*/
$(document).ready(function () {
$('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
//get id here
//toggle the modal
$('#deleteWidgetModal').modal('toggle');
//pass id to form
});
});
$(document).ready(function () {
document.getElementById('#delete-widget').onclick = function (event) {
event.preventDefault();
var parentElement = $(this).closest(".col-md-4.column");
var targetElement = $(this).closest(".panel.panel-default");
targetElement.remove();
//parentElement.addClass("expand-panel");
checkEmptyPanelContainers();
}
});
Html.BeginForm is transformed into a <form> tag before your javascript and user interaction is executed. You can modify that form using something like this
$("form").prop('myattribute', value)