Reload content in modal (twitter bootstrap)
I guess the way of doing this will be to remove the data-toggle attribute and have a custom handler for the links.
Something in the lines of:
$("a[data-target=#myModal]").click(function(ev) {
ev.preventDefault();
var target = $(this).attr("href");
// load the url and show modal on success
$("#myModal .modal-body").load(target, function() {
$("#myModal").modal("show");
});
});
JQuery/Bootstrap: close and open the same modal to refresh the content, which is generated dynamically
DEMO
Since you are hiding and showing on the same instance it will create one more backdrop but will not be able to show the modal
again. So you either can have a setTimeout
before showing the modal
with a minimal time interval, which will be inefficient as a backdrop will not be destroyed or just make use of shown.bs.modal
method and hide modal
before showing as below:
function openmodal(id){
var id=id;
//No need to hide here
$('#item_modal').modal('show');
$("#target_title").text(id);
}
$("#item_modal").on("shown.bs.modal",function(){
//will be executed everytime #item_modal is shown
$(this).hide().show(); //hide first and then show here
});
UPDATE
To have a fadeIn
and fadeOut
effect here is the little trick but you might feel its bit slow
and its upto you to opt this solution or not
DEMO
function openmodal(id){
var id=id;
var other="<a onclick='openmodal(1)' style='cursor:pointer'>product 1</a><a onclick='openmodal(2)' style='cursor:pointer'>product 2</a><a onclick='openmodal(3)' style='cursor:pointer' >product 3</a>";
$('#item_modal').fadeOut("slow",function(){
$(this).modal('hide')
}).fadeIn("slow",function(){
$("#target_title").text(id);
$("#target_other").html(other);
$(this).modal('show')
});
}
You can now remove shown.bs.modal
part as it is handled in the function
itself
How to refresh the bootstrap modal with the use of jquery
Using Scroll Top you can easily do that
When you close the model write a jquery function which makes the scroll top of model to 0
some thing like this
$('.close').click(function(){
$('.modal-body').scrollTop(0);
});
give a class with name close to close button and this will work fine
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .modal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; height: 70vh; padding: 1rem; overflow: scroll; } </style></head><body>
<div class="container"> <h2>Modal Example</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button>
<!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger close" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div><script> $('.close').click(function(){ $('.modal-body').scrollTop(0); }); </script></body></html>
Bootstrap modal data refresh
Use this:
$('#txtInput').val();
instead of
$('input').val();
You are using just input selector on every iteration which is too generic. You can use the Id selector from Jquery to grab the input element and get the new value out of it. Here is a working example.
<script>
$(function() {
$('#btnLaunch').click(function() {
$('#myModal').modal('show');
});
$('#btnSave').click(function() {
var value = $('#txtInput').val();
$("#myList").append('<li><input type="checkbox" id="'+ value +'"
name="'+ value +'" value="'+ value +'" checked>'+ value +'</li>');
$('#txtInput').val('');
$('#myModal').modal('hide');
});
});
</script>
Reload bootstrap modal content delay issue
In this case is better if you clean the content in the event "show.bs.modal". with this the form will be clean before to load, for example:
const modal = $('#content-modal');
const modalBody = $('.modal-body');
const modalTitle = $('.modal-title');
$('.service').on('click', function(e){
e.preventDefault();
var id = $(this).attr('data-id');
var type = $(this).attr('data-type');
$.getJSON('https://localhost/wordpress/wp-json/wp/v2/'+type+'/'+id, function(data){
modalTitle.html(data.title.rendered);
modalBody.html(data.content.rendered);
});
});
$('.staff').on('click', function(e){
e.preventDefault();
var id = $(this).attr('data-id');
var type = $(this).attr('data-type');
$.getJSON('https://localhost/wordpress/wp-json/wp/v2/'+type+'/'+id, function(data){
modalTitle.html(data.title.rendered);
modalBody.html(data.content.rendered);
});
});
modal.on('hidden.bs.modal', function(e){
e.preventDefault();
$(this).modal('dispose');
});
// just add this //
modal.on('show.bs.modal', function(e){
modalTitle.html("");
modalBody.html("");
});
Related Topics
Input Date Format With Dd/Mm/Yyyy in the Input Field
How to Download File in React Js
Jquery Validation Code for Not Allowed Only Blank Space in Textbox
How to Loop Through Json Array and Get Specific Values
React Button Onclick Redirect Page
How to Detect Browser Refresh Using Angular
How to Move Focus on Next Field When Enter Is Pressed
Stringified Json Has Unwanted Double Quotes
Javascript Function Not Defined Error (But It Is Defined)
How to Detect Browser Back Button Click Event Using Angular
How to Tell If a String Contains a Certain Character in JavaScript
How to Download Fetch Response in React as File
How to Make New Line or Break in Array
Getting Name of Parent Object from Value of Object
Jquery Validate Phone Number With With Regex
Typeerror: Router.Use() Requires Middleware Function But Got a Object