I have a main page, and I am loading modal dialogs that are stored as HTML in other partial html pages. I am loading modals dynamically into 1 modal in the page on different buttons clicks.
The partial page for my modals look like this for 1 page:
<script type="text/javascript" src="../App/modals.js"></script>
<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">Specify entity name you wish to create</h4>
</div>
<div class="modal-body">
<div class="row">
<form>
<div class="col-md-6">
<input type="text" id="txtEntityNameCreate" />
</div>
<p class="modal-log"></p>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="AddEntity()">Create Entity</button>
</div>
I am referencing a script at the top which will be responsible for resetting the text field inside dialogs. I might use it for later purposes as well. But the script is not loaded into the page when I am calling the dialog like this from my main page:
<a id="" data-toggle="modal" data-target="#mainModal"
href="modals/createmodal.html"
data-remote="modals/createmodal.html"
onclick="Utilities.SetFocusModal('txtEntityNameCreate')">
<img src="../Images/create.png" />
<h4>Create Entity</h4>
</a>
How can I load the modals.js when the dialog is loaded?
Thanks.
When bootstraps modals are loaded remotely they do not reload the dom so the page is not being reloaded into the modal the html is just being inserted, so your script is more than likely not executing, not really sure what your script looks like but that is more than likely the issue. Bootstrap has a jquery function for when the modal is shown. So if your script functions correctly when you load your html normally, like when you open just your snippets, then you can probably do something like the following on your main page:
$('#mainModal').on('shown.bs.modal', function () {
//then put your script here
});
or maybe
$('#mainModal').on('shown.bs.modal', function () {
$.getScript('path/to/script.js');
});
And then your script will execute when the #mainModal is shown.
Related
I can run my code just fine locally. Everything seems to be perfect. But as soon as I upload my repository to Git-Hub and try to run it with Git-hub pages, part of the website breaks? Specifically, the only issue is the Modal that's supposed to run when I click 'add to library' on the nav bar.
I tried deleting it off Git-Hub and reuploading it. I've tried moving the files around but nothing seems to work. I'm really not sure what the root of the issue is (?)
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-secondary"
data-toggle="modal"
data-target="#libraryModal"
>
Add to Library
</button>
<!-- Modal -->
<div
class="modal"
id="libraryModal"
tabindex="-1"
role="dialog"
aria-labelledby="libraryModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="libraryModalLabel">
Add to Library
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input
type="text"
class="form-control mb-2"
id="englishField"
placeholder="English"
/>
<input
type="text"
class="form-control"
id="spanishField"
placeholder="Spanish"
/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="addWord">
Add Word
</button>
<button type="button" class="btn btn-primary" id="addPhrase">
Add Phrase
</button>
</div>
</div>
</div>
</div>
Expected: It would open up a modal with two text boxes and two buttons.
Actual: https://at-lowdesu.github.io/EstudiarEspanol/#study-inner (It doesn't open.)
Git-Hub Link: https://github.com/At-LowDeSu/EstudiarEspanol
You have a mixed content error. All src should link to https://.. but you have one with http://
<script
src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
Replace http://code.jquery.com/jquery-3.4.1.min.js with https://code.jquery.com/jquery-3.4.1.min.js
I was able to fix it by changing the jQuery script call.
<script
src="//code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
The jQuery is not loaded or blocked in your page. The console said Blocked loading mixed active content “http://code.jquery.com/jquery-3.4.1.min.js”
You should fix this first, since bootstrap uses jQuery for its to run.
I've tried to inject the jQuery manually to the page and it works just fine.
Bootstrap Modal :
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
you can refer more examples of the modal.
I am trying to build a web page that contains populates a bootstrap modal from an Html file stored on the same pc. However, it is currently displaying weirdly as can be seen in this image
This is my first time posting here and I am self-taught so if this is a stupid mistake - sorry.
I am trying to build a page with a list of stories. I want the stories to open my in a modal. To stop the page itself getting ridiculously long the stories themselves are stored in their own Html files (including formatting) and inserted using javascript - inner HTML.
The webpage includes bootstrap 4 and jquery
the relevant code is
<button onclick="fetchStory('Solitude')"> Read </button>
<div class="modal" id="displayStory" tabindex="-1" role="dialog" aria-labelledby="fetchStoryLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fetchStoryLabel">New message</h5>
</div>
<div class="modal-body" id="sample">
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
<script type="text/javascript">
function fetchStory(story) {
var modal = $(displayStory)
modal.find('.modal-title').text(story)
var story_path = "samples\\" + story + ".html"
document.getElementById("sample").innerHTML='<object type="text/html" data=' + story_path + '></object>'
$('#displayStory').modal()
}
</script>
If I passed the Html directly into the modal it displays as expected but when inserted using javascript it displays as above. inspecting it on a web page I cannot see any reason for the difference
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" class="modal fade" 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>
<h4 class="modal-title">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>
Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
I'm using Bootstrap 2.3.2 via the bootstrap-sass-2.3.2.2 gem in a Rails app.
With the following HTML:
<div class="modal hide fade fullscreen" id="myModal" aria-hidden="true">
<div class="modal-header">
<h3></h3>
</div>
<div class="modal-body">
<img src="">
</div>
<div class="modal-footer">
<a class="figureFullsizeLink btn" href="">Full-size</a>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
And links like these:
<a href="#myModal" class="btn" data-toggle="modal" data-html="true">
<img alt="Fig 1" class="figure" src="http://s3.amazonaws.com/..." title="..." />
</a>
And the following javascript:
$(document).ready(function() {
...
// hide the modal window onload
$("#myModal").css("display", "none");
...
});
I get a momentary flash of the open modal dialog while the page is loading. (see https://www.youtube.com/watch?v=X-HwRpKAUh8 for an exampe).
Your jQuery code runs after the DOM hierarchy has been fully constructed. Therefore the modal will be displayed when the DOM loads, and then the javascript will execute and hide the modal.
The easiest way to have the modal hidden by default is to set the CSS to:
#myModal{display:none};
Or, you can always place your jquery code within the
<head>
element of your page and it will execute before the DOM is constructed.