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>
Related
I am trying to open a modal in my Vue Template using boostrap. but whenever I try using jquery on it, modal is not appearing.
Here is my code:
<template>
<div id="app_religion">
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button> -->
<button type="button" class="btn btn-primary" #click="showModal()">
Open
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">
test
</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>
</div>
</template>
<script>
export default {
methods: {
showModal() {
console.log("test")
$('#exampleModal').modal('show');
},
},
}
</script>
I am really new in using Vue, can anyone guide me on how to solve my problem. I am really lost on trying to figure it out.
This can be easily implemented through plain js
Start by assigning a unique id to your modal
<div class="modal fade" id="uniqueId" tabindex="-1" role="dialog" aria-labelledby="uniqueIdlLabel" aria-hidden="true">
import Modal from bootstrap
import { Modal } from "bootstrap";
Declare a variable that will serve as your proxy to your modal, declared as uniqueModal below, Assign the variable the DOM element retrieved by uniqueId, use the inbuilt functions provided by bootstrap to manipulate the modal. Documentation
export default {
name:"randomName",
data(){
return {uniqueModal:null}
},
methods:
{
showUniqueModal() {
this.uniqueModal = new Modal(document.getElementById("uniqueId"),{ keyboard: false });
this.uniqueModal.show();
},
closeUniqueModal() {
this.uniqueModal.hide();
},
},
}
Why trying to do it with jQuery when you can make it with vue ?
use v-if or v-show on your modal (check the difference between the two and take the one who fits better the result you want)
https://v2.vuejs.org/v2/guide/conditional.html
Didn't tested it, i wrote it on the fly, but something like this should work.
<template>
<div>
<button type="button" class="btn btn-primary" #click="showModal">
Open
</button>
<div class="modal" v-if="modalOpen">
<p>Hello World</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalOpen: false
}
},
methods: {
showModal() {
this.modalOpen = true;
}
}
}
</script>
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 know there few old posts about this issue but none of them is helping me. I'm trying to delete a row via Bootstrap4 model,
unfortunately I have to pass the clicked row value to model in order to delete it can someone please tell me how I can achieve this ?
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<c:forEach items="${anslist}" var="ans">
</c:forEach>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Delete Confirmation </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure, you want to delete this record ?</p>
</div>
<form action="/removeAns/${xxx id here xxx}" method="post">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger btn-ok" >Delete</button>
</div>
</form>
</div>
</div>
</div>
You can use jquery for that i.e: whenever a tag is clicked get value of href and assign that to action attribute of form under modal.
Demo code :
//onclick of a tag
$("a").click(function(){
//get href value
var hrefs = $(this).attr("href");
console.log(hrefs)
//add to modal form
$("#modal_form").attr('action',hrefs);
})
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--dummy data added in href -->
Click <br>
Click2
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Delete Confirmation </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure, you want to delete this record ?</p>
</div>
<!--added id to form-->
<form action="/removeAns/${xxx id here xxx}" id="modal_form" method="post">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger btn-ok">Delete</button>
</div>
</form>
</div>
</div>
</div>
I am trying to get a modal to show upon redirect to a page.
I am following this response (Laravel how to redirect back to boostrap modal dialog window)
My controller:
return redirect('postings')->with('welcome_msg');
My view:
#if(Session::has('welcome_msg'))
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
#endif
<div class="modal fade" id="myModal role="dialog" 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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
However, the modal is not showing upon pop-up. What am I doing wrong?
<div class="modal fade" id="myModal role="dialog" 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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
#if(Session::has('welcome_msg'))
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
#endif
This may fix it. HTML has to load before javascript.
try this in your blade just before closing tag of </ body>
#if (session()->has('welcome_msg'))
<script>
$('#YourModalName').modal('toggle');
</script>
#endif
$.ajax({
type : 'POST',
data : "",
url : '<?php echo site_url("adduser/register_user");?>',
success : function(data){
$('#error').modal('show');
}
});
the codes above is my code to show a modal but it didn't work. Is it possible to show a modal using ajax?
It seems you use Bootstrap right?
If you read the documentation there is a better way to achieve the same result:
In your main file:
<a data-toggle="modal" href="<?php echo site_url('adduser/register_user');?>" data-target="#myModal">Click me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
And then in the remote file:
<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">
...
</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>
This will show the default modal. More information in the manual: Bootstrap Modal