We Keep Coding

How to Import remote modal's javascript

I'm trying to make a remote modal(bootstrap4) in my webpage, I use the below URL and it works with only the remote file's modal-content, while its javascript didn't work.
Bootstrap 4 with remote Modal
Can someone tell me how to let the javascript of modal HTML into the target page which shows the modal in remote?
The target HTML code:
https://codepen.io/gorilla0823/pen/qLXQaM
The remote modal:
https://codepen.io/gorilla0823/pen/VqzVpR
I have no idea why it works differently from my origin one. (My original one is the modal with full function, I want to let the modal remote to the target page .)
The Modal(With my translation function, and this is what I desire to display in my target page with a link):
http://sehomework.000webhostapp.com/translation/index(origin).html
The modal's function:
The first option is before translation, while the second option is after translation, You can select the language then translating or recognizing the letter you type, this is the full modal I'd like to display. However, it works with the content body now, it'll show the error message(speech SDK haven't found ) if the code doesn't fully work.
I want to let the modal remote to the page with a link, the content of its body works, while the script doesn't work, I've commented the code with which works and which doesn't work, the link is https://codepen.io/gorilla0823/pen/VqzVpR ( the same as the remote modal )
<!-- target.html -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
I put my modal-content here.But the script doesn't work
</div>
</div>
</div>
<script type="text/javascript">
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-content').load(button.data("remote"));
});
</script>
<!-- remote modal -->
<div class="modal-header">
<script>
//It doesn't work
</script>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="warning">
</div>
<script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
script>
//It doesn't work
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>

Loading modal-dialog from <a> Also .Show() might not be working

I am fairly new to web development. I have this problem.. It is probably something simple but I can't seem to work it out.
I solved how to use a link to run some javascript. The javascript is supposed to open a modal but the script doesn't work.
To call my script I am using this: (I confirmed this works because I had placed an 'alert()' in the script to test if it went through)
<li>
<a data-toggle="modal" href="javascript:void(0)" onclick="showBugForm()">
<i class="fa fa-fw fa-bug"></i> Report a Bug
</a>
</li>
The script being called is:
function showBugForm(){
$('#repBug').modal('show');}
The main structure of my modal is shown below. I know the modal doesn't have any problems since I was able to load modal from a button, but I can't seem do it properly from an element. For the sake of context: I was able to load the modal by adding 'data-toggle="modal" data-target="#repBug"' to my button attributes, but I can't do the same with html link tag.)
<div class="modal fade" id="repBug" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Here's my Code -->
<div>
<div>
<div>
Any clues?

<a data-target="#repBug" data-toggle="modal" href="#repBug"><i class="fa fa-fw fa-bug"></i> Report a Bug</a>
Try this, it will solve your problem .Calling any function is not required here. Your modal will open directly on click of this anchor tag.

The issue I was having was because I missed to add:
<?php include_once('bug-form.php'); ?>
To my index.php file .. Because I had the code written in different php file named 'bug-form.

How to close the modal with the button in remote content?

As the title, how can I close the modal using the button in remote content?
Here is the original page, index.html:
open modal
<div id="testModal" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
</div>
</div>
</div>
and here is the page I want to open in the modal, modal.html:
<p>Hi, I am a modal</p>
<button class="btn btn-primary">close</button>
<script type="text/javascript">
$(function() {
$("#closeModal").click(function() {
// do something...(Ajax)
$("#testModal").modal('hide');
});
});
</script>
and I want the close button to close the modal in index.html but not using data-dismiss. Here is the full example in Plunker:http://plnkr.co/edit/EGjtma?p=info

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
Do nothing with any function, dismiss modal is build-in on Boostrap

I've checked you're code, and I found that what the modal does is grapping the whole content of modal.html file and place it inside a div with class name "modal-content"
So that's very easy, you can write this code in the close button inside the modal.html file and this will allow you to close the modal
<button class="btn btn-primary" onclick="$('#testModal').hide()">close</button>
Also I've few notes for you
There are many scripts that you've added and I'm not sure that you needed
Your code contains some Javascript errors, so check the browser console to fix them
Don't duplicate JS / CSS includes in modal.html, If these files already exist in the main file no need to add them again.

Bootstrap Modal not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->

It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

Bind a function to Twitter Bootstrap Modal Ajax Complete

I use this for Bootstrap Modal:
<a href="one/url" data-target="#add-follow-up-modal" role="button" class="btn" data-toggle="modal">
Load
</a>
<div id="add-follow-up-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-body">
<p>Please wait…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Now, i want to run a function when ajax load completed.
Any idea?

By default bootstrap modal does not trigger an event for ajax load, you can have a look at the list of triggered events at the modal section of the bootstrap documentation.
What you can do, however is to write your own function that loads the content to the modal's body via ajax, and attach a .done() to it.

remove href from your link
in ajax success add href="one/url" to your "a" attributes and then trigger click on your link