I want to open a modal with information about the offer that is grabbed from the database.
Here's what I have so far: (Minimal required code)
Opening modal:
<a href="" data-bs-toggle="modal" data-bs-target="#infoPonuka">
<i class="fa-solid fa-eye spc"> </i>
</a>
Modal:
<div class="modal fade" id="infoPonuka" tabindex="-1" aria-labelledby="infoPonuka" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoPonuka">Ponuka - info:</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
#if(isset($_GET['id']))
#foreach ($ponuky AS $item)
#if($item->ID == $_GET['id'])
#php
$ponuka = $item;
#endphp
{{Debug::printr($ponuka, false);}}
#endif
#endforeach
#endif
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zatvoriť</button>
</div>
</div>
</div>
</div>
When I was doing it, I thought I could maybe just use $_GET to get the ID of the offer, so I can have specific data from an array because every opening modal (the first code block) is shown on every item, so I wanted to make it unique for every button by maybe adding the href="?id={{ $ponuka->ID }}". But I was unable to do so. Does someone have any idea?
You might use ajax request on click of your anchor tag instead of using these attributes data-bs-toggle="modal" data-bs-target="#infoPonuka", and then, in response of your ajax request, set the data in the html of the modal as Passing ajax response data to modal
and then show the modal as:
$("#modalId").modal("show");
right after the line your data is set to modal html.
Make a method in a Controller and a route:
This will retun a redered view.
public function getOffer($offer_id)
{
$offer = Offer::where('id', $offer_id);
$renderedOfferView = view('modal.offer', ['offer' => $offer)->render();
return return response()->json(['status' => 'success', 'renderedOfferView' => $renderedOfferView]);
}
In your blade:
<a href="" data-bs-toggle="modal" data-bs-target="#infoPonuka" onclick="getOffer('{{ $ponuka->ID }}')">
<i class="fa-solid fa-eye spc"> </i>
</a>
<div class="modal fade" id="infoPonuka" tabindex="-1" aria-labelledby="infoPonuka" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoPonuka">Ponuka - info:</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="getOfferContent">
<!-- use the getOfferContent id to fill with data -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zatvoriť</button>
</div>
</div>
</div>
</div>
getOffer(id){
$('#getOfferContent').html(''); // clear data
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/your-getOffer-route',
type: 'GET',
data: {
id: id,
},
success: function( response ) {
$('#getOfferContent').html(response.renderedOfferView); // fill data
},
error: function( response ) {
}
});
}
Do not forgot to set: <meta name="csrf-token" content="{{ csrf_token() }}"> in your layout.blade.php into <head> tag
Related
I have a list of categories, from where I want to pass {{category.name}} to data into Bootstrap modal.
I want to achieve that when I click on the specific button, to show the name of the category in the modal as a message?
Categories
<div class="card mt-2">#foreach($categories as $category)
<ul class="list-group list-group-flush">
<li class="list-group-item">{{ $category->name}}
<a href="" class="btn btn-danger btn-sm ml-2 float-right"
onclick="handleDelete({{$category->id}})">Delete</a>
Edit
</li>
</ul>
#endforeach
</div>
From where I've tried to pass {{$category->name}} into div element, but It showing the last element from the loop.
Modal
<form action="" method="POST" id="deleteCategoryForm">
#csrf
#method('DELETE')
<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle"
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="exampleModalCenterTitle">Delete category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete "{{$category->name}}" ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Go Back</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</div>
</div>
</div>
</form>
JS Script
<script>
function handleDelete(id){
event.preventDefault();
var form = document.getElementById('deleteCategoryForm');
console.log('Delete', form);
form.action = '/categories/' + id;
$('#deleteModalCenter').modal('show');
}
</script>
Thanks in advance
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 want to edit in Modal, but the data does not come through to opgaveRet.blade.php containing Modal :-( Here is my code:
Can anyone help me to see what I am doing wrong?
// route.php
Route::resource('/admin/opgave', 'Admin\OpgaveController');
// OpgaveController.php
public function edit($id)
{
$tasks = Tasks::findOrFail($id);
return view('admin.opgaver.opgaveRet', ['tasks' => $tasks ]);
// also tried :-(:
//return view('admin.opgave', compact('tasks'));
}
// opgave.blade.php
#foreach ($opgaver as $opgave)
// here is a table, and then comes the Action
<a href="{{ route('opgave.edit', $opgave->id) }}"
data-toggle="modal"
data-target="#RetOpgave"
class="btn btn-primary btn-xs">Edit</a>
#endforeach
// in bottom of opgave.blade.php
// #include('admin.opgaver.opgaveRet')
<div class="modal fade" id="RetOpgave" tabindex="-1" role="dialog" aria-labelledby="RetOpgave">
<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="RetOpgave">Ret opgave</h4>
</div>
<div class="modal-body" >
#if(!empty($tasks))
// Here i want to build a FORM::
// But there is nothing in $tasks ???????
{{ dd($tasks) }}
#endif
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Luk</button>
</div>
</div>
</div>
</div>
You have to call the edit function in AJAX.
this one may help you:
https://tutorials.kode-blog.com/laravel-5-ajax-tutorial
I am trying to display a modal when pressing the button "Vezi rezolvare"
I have the following code for the button:
<div class="col-md-4 text-center patrat-block">
<div class="thumbnail">
<img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" alt="">
<div class="caption">
<h3>Problema 1<br>
<small>Gradina</small>
</h3>
<p>Află dimensiunile grădinii</p>
<ul class="list-inline">
<li>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Problema"><span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare </button>
</li>
</ul>
</div>
</div>
</div>
And the modal content + php :
<?php
if(isset($_GET['id'])&&isset($_GET['category']))
{
$id=$_GET['id'];
$category=$_GET['category'];
$sql = "SELECT cerinta, rezolvare FROM probleme WHERE id='".$id."'AND category='".$category."'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc())
{
$cerinta=$row["cerinta"];
$rezolvare=$row["rezolvare"];
}
$_SESSION["cerinta"]=$cerinta;
$_SESSION["rezolvare"]=$rezolvare;
}
}
?>
<div id="Problema" 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">Problema</h4>
</div>
<div class="modal-body">
<h4>Cerinta</h4>
<div class="well">
<?php echo $cerinta;?>
</div>
<h4>Rezolvare</h4>
<div class="well">
<?php echo $rezolvare;?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Inchide fereastra</button>
</div>
</div>
</div>
</div>
What this is trying to accomplish is to show a modal with some information in my database. I checked and the values are stored successfully in $cerinta and $rezolvare.
It seems like when the button is pressed, there is a fast fade and I am redirected to the top of the page, without showing the modal. I put an <a href="probleme.php?id=1&category=g"> so I know what button has been pressed, but it seems like it refreshes the page and the modal isn't displayed. How can I let the modal be displayed?
Nesting a <button> inside an achor <a> is not valid html syntax because it can't tell which one was clicked. Also the anchor has an href different than '#' so it's just redirecting you to probleme.php?id=1&category=g. You can modify your code as follows (not tested):
Remove the button from inside the anchor and change the anchor to:
<a href="probleme.php?id=1&category=g" class="btn btn-primary"
data-toggle="modal" data-target="#Problema">
<span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare
</a>
Have the template of the modal somewhere in your html:
<div id="Problema" 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">Problema</h4>
</div>
<div class="modal-body">
Some fine body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Inchide fereastra
</button>
</div>
</div>
</div>
</div>
Modify your php to return only the body of the modal:
<?php
// Some good php
echo("
<h4>Cerinta</h4>
<div class=\"well\">
{$cerinta)}
</div>
<h4>Rezolvare</h4>
<div class=\"well\">
{$rezolvare}
</div>");
// The modal body is returned by php
?>
Use ajax to retrieve the modal body and subsequently open the modal. Something in the lines of:
$(document).ready(function() {
// Assign some id to the anchor say id="myAnchor"
$('#myAnchor1').click(function(e) {
e.preventDefault();
// get the modal
var modal = $($(this).data("data-target"));
var url = $(this).attr("href");
var request = $.get(url);
request.done(function(response) {
// get modal
modal.find(".modal-body").html(response);
modal.modal("show");
});
});
});
I have my html code as:
<button class="btn btn-default" id="openForm">
New
</button>
<!-- Modal -->
<div class="modal fade hide" id="formModal">
<div class="modal-header">
<h4>
Form
</h4>
</div>
<div class="modal-body" id="formModalBody">
</div>
<div class="modal-footer">
Close
</div>
</div>
My Java script reads as:
$(document).on('click', '#openForm', function(e) {
e.preventDefault();
$("#formModalBody").html("");
$("#formModal").modal('show');
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
});
I am using Twitter Bootstrap & Codeignitor. The post url above is index.php/Controller/function
When I am clicking on the button; I am not able to see the Bootstrap Modal. The page fades in, but there is no modal visible.
this is for bootstrap 3 and can be triggered by html alone without javascript it will run
Launch demo modal
<!-- Modal -->
<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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="formModalBody">
</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>
<!-- For javascript -->
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
You should use anchor link instead of button, it will work default settings
<a href="/model_link" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</a>
The href link response code will append in
<div class="modal-body" id="formModalBody">
<!-- modal body -->
</div>