Bootstrap Modal show current data on click - javascript

My original issue:
I know that when this gets coded, the variables get written when the request is sent from the server. So I'll probably have to use JQuery, but I'm lost on where to even start (I don't know JS).
This code works when I refresh the page, but I want it to refresh the data being displayed when the modal is clicked on.
Can anyone point me in the right direction?
My self found fix, for others to view:
Modal Code:
<div class="modal fade ajaxmodal" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" 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">Trace Logging</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
JS:
$('.ajaxmodal').on('show.bs.modal', function () {
$('#modal-body').load('trace.php');
});
trace.php has formatted html that displays on click perfectly.

Updated my original question to contain my answer as well.

Related

Bootstrap Modal Issue URL variable

I am trying to display modal window when a users sessions times out. When the user times out they will get redirected back to the index.cfm?sessiontimeout page. I have the following code in the index.cfm page to fire IF the URL variable exists:
<cfif structkeyexists(URL,'sessiontimeout')>
<script>
//alert('Your session has timed out.');
$('#appTimeOut').modal('show');
</script>
</cfif>
All that happens is I see the modal background but not the modal window. However when I add it as a link in the nav (for testing), it works perfectly.
<a href="##" title="Feedback" data-toggle="modal" data-target="##appTimeOut">
Here is the modal window code:
<div class="modal fade" id="appTimeOut" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h4 class="modal-title">SESSION TIMOUT</h4>
</div>
<div class="modal-body">
Your session has expired.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I've tried moving the and the modal window code between the two pages (index.cfm and header.cfm). Header.cfm is called within index.cfm. Either way, the javascript function doesn't display the modal window as expected. Any help would be greatly appreciated.

Request A Code button,

I run an amazon review site, and I need a button that will request a code from a text file that is uploaded by the seller.
What I am needing to know is how can this be done using HTML if possible.
I am trying to use this example:
<!-- Button trigger modal -->
<button type="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">
<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>
But instead of the pre-filled text. It will display only the code that is in the txt file that was upload by the seller. Only that members can see and be issue a random code.
If I understand your question, you're trying to request data from an external site after a button was clicked.
In this case, HTML can't really do this on it's own since it's just a layout and markup language.
What you're looking for is something along the lines of an AJAX request which is used with javascript or some jQuery.

One time show modal window in session

I need show modal window (bootstrap) only one time, at first login to site.
What I cant do that?
Modal window
<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">Przeczytaj zanim zaczniesz!</h4>
</div>
<div class="modal-body">
..........................
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS
$(window).load(function () {
$('#myModal').modal('show');
});
Embed a variable in jsp from server side (idk whether you are using a framework) simply;
request.setAttribute("isLoginPage", true);
and assuming that you are using jstl along with jsp;
<script>
<c:if test="${isLoginPage}">
// your js code here
</c:if>
</script>
You can achive the same result with using java answered here.
Or only with javascript, alternatively you can get the current url with;
var url = window.location.href;
And check url whether is login url. However this approach does not work in single page applications.

Bootstrap large modal dialog design issue

I am trying to create a form inside a modal dialog, it's working if I don't identify a modal size, but if I go to this page: http://getbootstrap.com/javascript/#modals and copy large size modal dialog code, and put my form inside it, the design will be wrong, and the form will be stuck at the top and right borders.
Here's a JS fiddle of the form itself: https://goo.gl/wsnwm8
Thanks.
FORMAT for bootstrap modal
<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">Modal title</h4>
</div>
<div class="modal-body">Modal Body</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
Enclose your form inside modal-body
like below
<div class='modal-body'><form ><form></div>
Demo
Put a container class in your modal-content and everything will look just right.
<div class="modal-dialog modal-lg">
<div class="modal-content container">
<!-- form content goes here -->
</div>
</div>
JsFiddle

Twitter Bootstrap Dialog shows "2 times"

I am building my website using Twitter Bootstrap. I found that my dialog shows "2 times". Here is a video for you if you don't know what am I talking about(expire in 7 days).
Watch this video
Note: I only clicked the Close button one time. You can see there is a dialog appeared about I clicked Close and it disappeared in less than 1 second.
Here is my code.
<div class="modal fade" id="contactModel" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<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">Contact</h4>
</div>
<div class="modal-body">
<p id="modelText">Thank you! Your submission has been received!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My button calls JavaScript.
<button onclick="submitForm()" type="button" id="submit" class="btn btn-primary">Send</button>
My JavaScript
$('#contactModel').modal('show');
Can anyone help me to solve this? Thanks in advanced.
I don't see your button's code, but I guess you've been using the bootstrap modal in both ways : via data attributes and via js.
Choose one. Look here http://getbootstrap.com/javascript/#modals in "Usage".
Anyway, if it's not the button, then your code works well. here is a proof: http://www.bootply.com/eYXtmm6Yrr.

Categories

Resources