I am developing an app which requires to show the data at every click on my different list of icon. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.
Here, I have tried with, but not working all..
<div class="col-xs-12 col-sm-6 col-md-3">
#foreach($Play as $post)
<div class="member">
<div class="member-img">
#if ($post->new_game)
<img src="{{ $post->new_game}}" alt="member" />#endif
</div>
<!-- .member-img end -->
<div class="member-info">
<h5>{{$post->friendly}}</h5>
<h6>{{$post->enemy}}</h6>
<div class="divider--line divider--center"></div>
<p>{{ $post->weapon }}</p>
<button type="button" class="btn btn--primary btn--link" href="#" data-toggle="modal" data-target="#myModal" id="{{$post->id }}" onclick="showDtails">Get more weapon detials</button>
</div>
</div>
#endforeach
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
</div>
<div class="modal-body">
<img src="/app/assets/images/team/thumb/1.jpg">
<p>{{$post->full_weapon}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
Html should like this
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Button
<button type="button" data-toggle="modal" data-target="#myModal" onclick="showDtails({{$post->id }})">Get more weapon detials</button>
call function with ajax
function showDtails(postid){
$.ajax({
url : '{{ route("getdata") }}',
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
data:{postid:postid},
success:function(data){
$('.modal-body').html(data)
},
});
}
Route.php
Route::post('/getdata', 'HomeController#getdata')->name('getdata');
Controller.php
public function getdata(Request $request){
$postid = $request->postid;
$post = Post::where('id',$postid)->first();
return view('getdata',compact('post'));
}
getdata.blade.php file
<div>
//whatever you write here or display here you'll get this data to your bootstrap model.
</div>
You will need to hit a get api containing the data you need, when the response is received fill the values with javascript and then display the modal
Just write the function in th script tag
function showDtails(){
$( ".modal-body" ).load("/admin/edit_location", function() {
$( "#myModal" ).modal('show');
});
}
where /admin/edit_location is the route to load view and below is the function of the route:
public function GetEditLocationsModal(){
return view('modals.admin_edit_current_location');
}
use javascript or js framework like vuejs or library like jquery
axios|ajax call to controller->controller send back corresponding data ->show in modal
//show modal
$('#myModal').modal('show');
//hide modal
$('#myModal').modal('hide')
sorry my english is not good but i help as i can.
update
look at this example you will get the idea
welcome.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>Document</title>
</head>
<body>
<ul class="list-group">
<li ><button type="button" id="btn1" class="btn btn-primary m-3" onclick="get('btn1')">button 1</button></li>
<li ><button type="button" id="btn2" class="btn btn-primary m-3" onclick="get('btn2')">button 2</button></li>
<li ><button type="button" id="btn3" class="btn btn-primary m-3" onclick="get('btn3')">button 3</button></li>
</ul>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p id="modalBody">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function get(btn) {
// send data and recive response from controller
axios.post('/getData',{ // send
btnClick:btn
}).then(res =>{ // recive
$('.modal').modal('show'); // open modal
$('#modalBody').empty().append(res.data); // append data in modal body
});
}
</script>
web.php
Route::post('/getData', 'apiController#index');
controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class apiController extends Controller
{
public function index(Request $request)
{
switch( $request->btnClick){
case 'btn1':
return 'data for button 1';
break;
case 'btn2':
return 'data for button 2';
break;
case 'btn3':
return 'data for button 3';
break;
}
}
}
maybe you want send response from controller according to current user id. then use auth()->user()->id
Related
I have a Spring MVC controller and bootstrap page.
When I submit the form and send some payload to this endpoint if some condition is not met I would like to display confirmation window:
API:
#PostMapping(value = "/pairs")
public String addPair(#ModelAttribute StepForm addPairStepForm,
Model model) {
....... // do some check
}
Bootstrap page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
<!-- Modal -->
<div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Pair already exists for the same exchange.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-10">
<form id="add_pair_form" class="form-inline" action="#" th:action="#{/pairs}"
th:object="${stepForm}"
autocomplete="off"
method="post">
<div class="row g-3 align-items-center mb-1 mt-1">
<div class="col-auto">
<label for="pair" class="form-label">New</label>
</div>
<div class="col-auto">
<input id="pair" class="form-control" name="pair" type="text"
placeholder="Pair to be added."
th:field="*{pair}"
required
autofocus>
......................................
</div>
</div>
<div class="form-group mb-1 mt-1">
<button type="submit" class="btn btn-primary submit_btn">Submit</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
Validate
</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</main>
</body>
</html>
How I can open the modal dialog window when I submit the form and Post some payload to Spring BE?
I have a variable in my view which I want it's value to change according to a button I press. I tried this but It doesn't work:
<button type="button" data-dismiss="modal" onclick="{{ $product1 = $p->id }}" class="btn btn-primary">Pick</button>
This is inside a #foreach. Is there a way to have the $product1 variable change it's value with the button click? Preferably pure HTML or Laravel. If not, then how do I do it? Javascript?
You could do this easily using a Vue component, create a button for picking the product like so:
<button v-bind:class="buttonColor" #click="pickProduct" v-text="buttonText"></button>
Then create your function to make an Ajax call to update that product and at the same time update your button based on the response.
methods: {
pickProduct() {
axios.post('/product/' + this.productId)
.then(response => {
this.status = response.data;
}
})
}
then just realtime update the button copy and maybe color for when a product is picked
computed: {
buttonText() {
return (this.status=='picked') ? 'Picked' : 'Pick Product';
},
buttonColor() {
return (this.status=='picked') ? 'btn btn-primary' : 'btn btn-secondary';
}
}
If you are looking for an easy solution I would think something like this could work for you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- in your foreach !-->
#foreach($data as $p)
<!-- data-target #openModal{{$p->id}} !-->
<a role="button" data-toggle="modal" data-target="#openModal{{$p->id}}" ></a>
<!-- id = #openModal{{$p->id}} !-->
<div class="modal fade" id="openModal{{$p->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- here your code, for example you can display the id or any data
!-->
<p>Your id: {{$p->id}}</p>
<!-- <p>Your name: {{$p->name}}</p> !-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
#endforeach
You can do this with boostrap,I leave you an example.
This is only to show data, if you want to modify data you have to use js
I'm trying to create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...
app2.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>
<div class="container">
#yield('content')
</div>
<!--<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->
<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>
</body>
</html>
dashboard.blade.php
#extends('layouts.app2')
#section('title')
dashboard
#endsection
#section('content')
<h1>Dashboard</h1><br>
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div>
<form action="{{url('/post')}}" method="post">
{{csrf_field()}}
<div class="form-group">
<textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!--<input type="hidden" value="{{Session::token()}}" name="_token">-->
</form>
</div>
</div>
</div><br><br>
#foreach($posts as $post)
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>
Edit | Delete | Like | Dislike
</div>
</div>
<br>
#endforeach
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endsection
app_new.js
$('#edit').click(function(){
$('#edit-modal').modal();
});
Use preventDefault() when you click on link.
$('#edit').click(function(e){
e.preventDefault();
$('#edit-modal').modal();
});
And add id='edit-modal' for your div with modal class.
try this
Edit
where #modalEdit is id of modal tag like
<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">
This is one way to call a modal using jquery please try
$('#myModal').modal('show');
We have:
$('#myModal').modal({
show: true,
remote: '/some/api/url/',
//onComplete: function() ???
//success: function() ???
});
How for example make console.log() every time when data successfuly loaded?
From documentation:
remote
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
In any case, you can use:
loaded.bs.modal This event is fired when the modal has loaded content using the remote option
So the code, in your case will be:
$('#myModal').on('loaded.bs.modal', function (e) {
// do something...
})
An example:
$('#myModal').modal({
show: true,
remote: 'https://api.github.com/users/defunkt'
});
$('#myModal').on('loaded.bs.modal', function (e) {
$("#myModal").css({"height":'150px',"overflow-y":"auto"});
console.log('remote content loaded');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">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>
Here I am calling view of bootstrap modal using codeigniter function. But its not working proper. Here is code:
In codeigniter:
function alert_breaktime()
{
$this->load->view('break_alert');
}
break_alert.php:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> <h3 class="modal-title" style="color: red;font-weight: bold;">Message Alert !</h3>
</div>
<?php //$attributes = array('class' => 'bs-example form-horizontal'); echo form_open(base_url().'activity/add',$attributes); ?>
<div class="modal-body">
<div class="message" style="font-size: x-large;">
Hello, <?php
$user_id = $this->tank_auth->get_user_id();
$names = $this->user_profile->get_profile_details($user_id,'fullname') ? $this->user_profile->get_profile_details($user_id,'fullname') : $this->tank_auth->get_username();
echo $names ?> <br>
Please do not forget to <b>Break Out..!!</b>
</div>
<div class="modal-footer">
<?=lang('close')?>
</div>
</div>
</div>
</div>
Since you have told your code is not working I assume you may have not call the bootstrap libraries properly.
I have included all jquery and bootstrap css files to your code and it working in my computer.
below is your code edited by me:
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 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>
</div>
<div class="modal-body">
<div class="message" style="font-size: x-large;">
Hello, <?php
$user_id = $this->tank_auth->get_user_id();
$names = $this->user_profile->get_profile_details($user_id,'fullname') ? $this->user_profile->get_profile_details($user_id,'fullname') : $this->tank_auth->get_username();
echo $names ?> <br>
Please do not forget to <b>Break Out..!!</b>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I hope this code would help you..
let me know if there is any problem with that code.