Twitter Bootstrap Modal change Content via Ajax - javascript

I know, here are many question with the same topic.
But I cannot find a solution for my prpblem.
So I have a layout and before the body tag closes there is the modal window:
<!-- 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
CONTENT
</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>
</body>
I have a link in my site that toggles the modal window:
<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=1" data-target="#myModal">Click</a>
My remote php only contains "<php echo $_GET['id'];?>" for testing.
In the future there is content from a database.
So everytime I click on the link to the modal the content will change.
this is not the problem, I know how to do this in php etc.
And I write JS that the modal content should change:
$(document).ready(function() {
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
})
the problem:
when I click the link the modal window opens. perfect.
But than the modal window dissappear and in the top position of my site there is the "1". But this is not so nice, because I only want that the content "CONTENT" in the modal-body should change to "1."
What I am doing wrong here?
And - another question. If I do this with changing content every time with the $_GET['id'] the 1 never dissappear, but I want changing the content dynamic here, so in this example there should be a "2" in the modal-body class of the modal window if I click on a link like this:
<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=2" data-target="#myModal">Click</a>
Can somebody help me please?

Make link like below:
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click</a>
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click 2</a>
On Js:
$(document).ready(function() {
// Fill modal with content from link href
$(".openModal").on("click", function(e) {
var link = $(this).data("href");
$('#myModal').modal("show");
$('#myModal .modal-body').load(link );
});
})
Can you try it ?

Related

Modal refactor over some common elements

These code works fine, but is repeating the same over and over, needs to refact.
The elements presented on page are Title and Description of all Modal. Rest
of functionality is the same. Css is default bootstrap, it can be the same
whithout any important change.
I added another Help button on the side of each primary button, to help
search some information about how to find the documentation on every element
inside the Modals. Is no needed to focus on that at the moment.
Lorem ipsum text, can be placed on the respective container to complete
the description, and title, feel free to do it by your own.
To test the code, link Bootstrap 4.0 js files on the page.
So some guide to refact here, will be apreciated. Thank you very much.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</br>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-2" data-whatever="2. First Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</ul>
</div>
</div>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 1</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">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Title 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 2</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">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
$('#example-1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
$('#example-2').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
I created a single modal in which the information can be replaced according to the button that clicked it. To take care of a longer text for modal body part, I added a that contains the relevant text along with the button in the same li but keeping the same hidden. So on click of the modal lonk all the relevant values can be replaced using jquery like this.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding first modal or...">?<i></i></button>
<div id="1content" style="visibility: hidden;"> <p>Some text Description 1</p></div>
</a></li>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="2. Second Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding second modal or...">?<i></i></button>
<div id="2content" style="visibility: hidden;"> <p>Some text Description 2</p></div>
</a></li>
</ul>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p></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">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<script>
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var button = $(this); // Button that triggered the modal
var recipient = $(this).attr("data-whatever");
var modal = $("#example-1");
modal.find('.modal-title').text(recipient);
var div = $( "div" );
// if last() is not used, then it brings that information button's ? as well
var bodyText = $(this).siblings(div).last().text();
modal.find('.modal-body p').text(bodyText);
});
</script>

Show modal after download for multiple download links

i have many download links. i want to open the same modal after clicking each download link. I achieved this for a single download by creating two links, one for the modal and one for the download, hiding the download link and then triggerring the click event on it when the modal link is clicked. the only problem is that it isnt working for multiple download links. I tried using different ids on the links for each file and triggering each dwnload from a seperate modal link but it isnt working.
<ul class="list-group">
<li class="list-group-item">2016
<a class="pull-right" href="#" data-toggle="modal" data-target="#myModal" rel="nofollow" download id="modal1"><i class='fa fa-download'>Download</i></a>
aa</li>
<li class="list-group-item">2015
<a class="pull-right" href="#" data-toggle="modal" data-target="#myModal" rel="nofollow" download id="modal2"><i class='fa fa-download'>Download</i></a>
aa</li>
</ul>
those are the links. this is the 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">Your download will begin shortly...</h4>
</div>
<div class="modal-body">
this is the modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
this is the javascript
$('[data-toggle=modal]').on('click', function(e) {
var $target = $($(this).data('target'));
$target.data('triggered', true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show').data('triggered', false);
};
}, 1000); // milliseconds
return false;
});
$('#modal1').click(function(){
$('#download1').trigger('click');
});
$('#modal2').click(function(){
$('#download2').trigger('click');
});
please what is wrong?

Open Modal (bootstrap) from other html-file

I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. i've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.
<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">Nieuwe Taak toevoegen</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>
I open this dialog using a button.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files ?
example:
if the button is inside index.Html but the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)
Note: I don't/can't use HTML5 (company-standards)
if you're using jquery, you could download the page using an ajax call:
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
If you're building a single page application you might want to check out a framework designed to solve this type of problem:
durandal
Can you use PHP? If so there is simple solution.
Your index will be index.php and where you want to have your modal just place this code
<?php include "newTaskModal.html"; ?>
Also you could if you are using JQuery to load your html page into into a matched element.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
Go to http://api.jquery.com/load/ for more info.
STEP 1 Use below code for link:
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
STEP 2 Use below code for modal window
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
STEP 3 Create MyModal.html and place some text.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
Note: This may not work local html. works only on server!

Jquery modal pop up with dynamic content

I am working on someone script.I can t understand it clearly to implement my code.I need this content in modal pop up.
<div data-rel="close" data-role="panel" data-display="overlay" data-position="right" id="circle-more">
<div class="details-arrow">
<div class="boxscroll">
<div class="contentscroll circle-more-cont">
</div>
</div>
</div>
</div>
Actually now its taking data dynamically from db and hidden.It working fine but it shows in page.I want to show this entire content in modal.can anybody help me.I tried all options nothing work out.
it get contents from here
function circleMoreDetailsSocial(social_ring_obj_index, comment_details, cur_obj)
{
$(".circle-more-cont").html('');
if (nice) nice.remove();
var i = 1;
$.each(circleData4[social_ring_obj_index], function(social_value_index, social_value)
{
$.each(social_value, function(value_index, value)
{
if(value[1] == 'facebook')
social_media_link = "https://facebook.com/"+value[2];
// <div class='"+value_index+"' style='background-color:"+eval("color"+i)+"'> </div>
$(".circle-more-cont").append("<a href="+social_media_link+" onclick='javascript: void(0)' return false;' ><p>"+value[0]+"</p></a>");
i++;
});
});
$("#circle-more").panel('open');
nice = $(".boxscroll").niceScroll(".contentscroll",{cursorcolor:"#F00",cursoropacitymax:0.7,boxzoom:true,touchbehavior:true});
return false;
}
This make some sense i think.it dynamically add content from json file as pargraphs.so when i click a paragraph it will redirect to some links.I dont want to get redirected.instead of that i just want to wrap everything under modal so i can stay in same page.redirect will done only in modal.
please check demolink
Reference link http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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">
...
</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>
use jqueryui dialog -modal ...https://jqueryui.com/dialog/
example:
html
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
js:
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
you can use jquery + jquery ui
the code
$(function(){
$( "#circle-more" ).dialog({
height: 140,
modal: true
});
});
this a demo
https://jqueryui.com/dialog/#modal
that's open the dialog at the start of the page.

How to reload page on closing a Bootstrap 3 modal

My aim is to get the page to reload when a Bootstrap modal is closed. The user can close the modal by clicking on the close button or icon or by clicking away from the modal.
My code so far is pretty standard. Taken from:
http://getbootstrap.com/javascript/#modals
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch
</button>
<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">My title</h4>
</div>
<div class="modal-body">
My content
</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</button>
</div>
</div>
</div>
</div>
How can I get the page to reload after a modal is closed?
Update: Wow, fantastic fast response from everybody. Thank you
You can bind the event to reload page on click of close:
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
})
Demo
try this with your button:
onclick="javascript:window.location.reload()"
full button:
<button type="button" onclick="javascript:window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">×</button>
example: http://jsfiddle.net/Valtos/52VtD/2288/embedded/result/
$('#myModal').on('hidden', function () {
document.location.reload();
})
Demo

Categories