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>

on('click'....) only fires after the second click

Here's the script. When I click it on load, works like a charm. When I click it via a dynamically created element, the first click sees the actual html shift (kind of stretch and go back). It does however work on the second click consistently.
<script>
$(document).on('click', '.iframe_add', function(){
var element = $(this).attr('name');
$('#iframe_target').html('<iframe src="https://104.131.18.58/t3/default/ajax_new_secured_asset_debt_creator?all='+element +'" frameborder="0" width="580" height="300" scrolling="yes" id="myFrame"></iframe>');
});
</script>
I dont really get whats going on and Id appreciate any help.
P.S. I saw this one, but am not sure if it applies (seems to deal with some datepicker issues)
jquery on.click doesn't work on first click (with a dynamic element)
EDIT:
Here is the HTML
<div id="iframe_modal" class="modal fade" 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">X</button>
<h4 class="modal-title">Edit Information</h4>
</div>
<div id="iframe_target" class="modal-body">
</div>
</div>
</div>
</div>
EDIT 2 - Console Logs (all the same):
New

Your console log:
New
reveals that one of the classes is iframe_input.
Your JavaScript is telling us that you want the click event to fire when an element with a class named .iframe_add is clicked.
Try
$(document).on('click', '.iframe_input', function(){

Ok. So here is the hackity-hack solution I came up with (if you cant beat em -- and by em, I mean javascript, join em):
parent.document.getElementsByClassName("iframe_input")[0].click();
I just force a click on the first input element when the modal hides and this seems to resolve the behavior. That being said, this seems really hacky and Im all ears as to why this is wrong but it does work like a charm....

You must check if you don`t get error -> Cannot read property 'addEventListener' of null
If yes you must add code document.getElementById('xxx_element_name_xxx').addEventListener('click', xxx_function_name_xxx, true); after place where your element xxx_element_name_xxx was declared.

Got the same issue in my ASP.Net Web Form. My case is I create toggle button to hide and display div.
I get rid this problem by embeded the initial style during loading page which is display: none at div itself rather than put it in external css file.
<div id="toggleDiv" style="style:none">
</div>

Video with autoplay in a Bootstrap modal with a stop when the modal is closed

I read a lot of similar posts but didn't find the right solution for my project.
I would like to let the user show/hide the bootstrap modal with a simple <a> balise. It's a Youtube iframe with an autoplay=1.
First problem is that when the page load, the video is launching and we can hear the sound but of course cannot see the video inside the bidding modal. Second problem, I need to stop the video when the user closes the modal with the cross or just by clicking outside the modal.
Here is a online demo : See live demo
Here is my code, I'm using Bootstrap 3+ :
<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
</div>
<div class="modal-body"></div>
</div>
and the JS :
<script>
$('#myModal').on('show', function () {
$('div.modal-body').html('<iframe width="100%" height="360" src="https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
});
$('#myModal').on('hide', function () {
$('div.modal-body').html('');
});
</script>

You could leave the SRC attribute of the iframe blank initially and only set it to the desired YouTube video with autoplay=1 when the user opens the modal window.
HTML:
<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
</div>
<div class="modal-body">
<iframe id="youtube" src="" />
</div>
</div>
JS:
<script>
$('#myModal').on('show', function () {
$('div.modal-body iframe#youtube').attr('src', 'https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0');
});
$('#myModal').on('hide', function () {
$('div.modal-body iframe#youtube').attr('src', '');
});
</script>

Sorry, can't comment, missing the privilege. So a quick answer with two possible solutions.
Solution 1: use the Youtube API
You can find the API reference here: https://developers.google.com/youtube/iframe_api_reference
So you could create the iframe when showing the page and just use the play() method when launching the modal.
Solution 2: use a premade player
There are lots of good solutions out there. As I'm in the matter right now, I'd recommend using http://afterglowplayer.com (based on video.js) or some other similar solution. There is lightbox support and you don't have to cope with this kind of stuff. :)

Modal not being called on bootstrap 3

I have this following code:
<div class="btn slick-slide slick-active" data-toggle="modal" data-target="#photo-carousel-modal" data-slick-index="0" aria-hidden="false" style="width: 234px;">
<img class="img-holder img-thumbnail" src="image/path.jpg">
</div>
That was supposed to call for this modal here:
<div class="modal fade bs-example-modal-lg" id="photo-carousel-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
{{-- Modal's content --}}
</div>
</div>
</div>
It simply not triggers anything! Am I doing some stupidity and not realizing it?
P.S.: YES! The Bootstrap does work properly. I'm using it in other parts of the code and it works like a charm!

Make sure your bootstrap.js file is called AFTER your jQuery file like this:
<script src="path/to/jquery-file.js"></script>
<script src="path/to/bootstrap.js"></script>
(Also, remove any other bootstrap js file like bootstrap-modal.js, etc as bootstrap.js has everything in it already)
If the above is already done and it still is not showing, please post the codes from your <head....</head and the footer of your webpage on your question.
P.S. Check your browser console for errors so you can get a better idea on what is going on.

I found out later that my code had 3 call for jQuery library. one of them was after the bootstrap call. That's where I messed up!
(As a matter of fact, it was the other guy who works here.)
So, kids: DO NOT PLACE YOUR JQUERY CALL AFTER THE BOOTSTRAP CALL! It will make you go nuts!

Custom JQuery showing: Uncaught ReferenceError: $ is not defined on modal

Question Background:
I have a simple ASP.NET MVC site using Bootstrap to render a view with nine panels. On each panel is a button that when clicked should produce a modal popup.
The issue:
If I include a script link to the included bootstrap.min.js filethen I can produce a simple modal pop-up. My issue is I will need to start passing parameters to the pop-up eventually so am attempting to develop my JQuery solution. Currently when I click on a panel button in my view I can see from the Chrome console I'm getting the error:
Uncaught ReferenceError: $ is not defined
Code:
Note: This view is based on a master view that has <script src="/Scripts/jquery-1.9.1.js"></script> included as part of the defined bundles
#{
ViewBag.Title = "CIBuilds";
Layout = "~/Views/Shared/_Layout.cshtml";
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<link rel="stylesheet" href="~/Content/bootstrap.css">
}
#Styles.Render("~/Content/css")
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">This Page is Disabled</div>
<div class="panel-body">
This page is temporarily disabled by the site administrator for some reason.<br>
Click here to enable the page.
Click to open Modal
</div>
</div>
</div>
//Other 8 panels
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
<script>
ERROR:***** Uncaught ReferenceError: $ is not defined
$(document).ready(function () {
$(".btn").click(function () {
$("#basicModal").modal("show");
});
});
</script>
If anyone could help me sorting this that would be great.
UPDATE
I commented out the master views RenderSection reference to the defined JQuery bundle along with the bundle itself. I then added a link to JQuery1.9.1.js and also tried 1.9.1.min.js to no avail.
I also tried JQuery-1.11.2.js and 1.11.2.min.js again the issue still persists.
I am getting a different error message now which is:
Uncaught TypeError: undefined is not a function
This is because .modal() is not showing as a valid method in the JQuery - which would explain the undefined function error message, what script should I be using?

Running your script snippets the same way you have pasted, I get the same error that you are talking about in the console until I include the JQuery Library. Once the JQuery library is loaded the error goes away.
You may want to recheck your bundles to make sure that they are all linked properly, or if the software your using blocks JQuery on the frontend you may have to add another link to the Library you intend to use. Hope this helps.
I wanted to add this as a comment to poke around a little bit to come to the correct solution first, but I don't have enough rank for that. I would try using this on the front end, but with your version of JQuery that you want to use.
// By Chris Coyer CSS-Tricks
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
EDIT:
Here is the fiddle http://jsfiddle.net/sf9knxx8/ with no library, you can see the console to find your error. Here is one with the library added http://jsfiddle.net/6f980kyc/, clear your console and refresh you can see the error goes away.

Must be the $ conflict! Try this:
jQuery(document).ready(function () {
jQuery(".btn").click(function () {
jQuery("#basicModal").modal("show");
});
});
instead of
$(document).ready(function () {
$(".btn").click(function () {
$("#basicModal").modal("show");
});
});

Simply open viewsource in browser and see
1 : If jquery is file loaded (clicking on the link in viewsource should open the jquery file)
2 : If there are more than one links to include jquery (make sure you turn off EnableOptimization in your bundle)
Also try replacing $ with JQuery

I noticed this error in Firefox using their developer tool.
I use MVC, and was able to resolve this issue by moving
my #Scripts.Render() calls Before calling #RenderBody() in my Layout Page.