We Keep Coding

Bootstrap 4 dynamic javascript doesnt work, works fine in Bootstrap 3

I'm dynamically showing a modal using the following code:
// show ajax modal with content
$(document).on('click', '[data-modal]', function (event) {
event.preventDefault();
$.get($(this).data('modal'), function (data) {
$(data).modal('show');
});
});
So data-modal on that element would contain the URL for the AJAX call.
Now, in one of my modals, I have the following in the modal-body element:
<script>
console.log('hello world');
</script>
This works fine when using Bootstrap 3, as it shows hello world in the console after the modal is displayed. However, for whatever reason, when using Bootstrap 4 it does not work. It does not execute the script whatsoever.
What has changed between BS3 and BS4 which would cause this? Do I now have to use some type of injection library just to get this to work?

Well I figured it out.
$(document).on('shown.bs.modal', '.modal', function () {
$(this).find('script').each(function(){
eval($(this).text());
});
});
Credit: http://subinsb.com/how-to-execute-javascript-in-ajax-response

How can i keep the Menu open with JavaScript and HTML?

i have a SideBar Menu, how can i keep it open? If you go to the page, the Menu is closed and i must click on the Menu Button, to toggle it on. How can i keep it open, i'll close it myself.
Code:
<script type="text/javascript">
$('#nav-btn').click(toggleMenu);
$('main').click(function() {
if ($(this).hasClass('active')) {
toggleMenu();
}
});
function toggleMenu() {
$('#nav-btn, #sidebar, main, #cover').toggleClass('active');
}
</script>

for better practice, write your code inside a .js doc and put your code inside a
$( document ).ready(function() {
// Your code here
});
And not inside a <script> tag..
You can just add the active classes inside the HTML element (wihthout jQuery), if debugging is the purpose.
Try replacing toggleClass with addClass, should help.
Please edit your question and provide the full code (html & css) so we can help you further

Restrict JQM Panel to only 1 instance on page

I'm developing a JQM theme using single pages. I also have a side bar / panel that is built as a seperate html file. This panel is imported into the JQM page using the following JS;
/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
$.get('left-panel.html', function(data){
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
});
Ive got this script in a js file that is loaded at the foot of every page, since users of the 'mobile site' could enter via any page.
Ive noticed via Firebug that an instance of the panel seems to be added with every page I navigate to. So if I visit 3 pages, the panel will be loaded 3 times, 4pages = 4 panels, etc.
It's fair to say I'm fairly novice at JQ & JQM, but I was under the impression that the use of
$(document).one
meant the event only occurred once per page, and would therefore prevent the issue I have.
IF you can help me work out how I can prevent this issue, I'd really appreciate it.

The pagebeforecreate event will emit on each and every page, but only ONCE. If you have 5 pages in one HTML file (Multi-Page Model), that event will fire 5 times before creating/showing the target page.
This event can't be delegated to a specific page, e.g. the below code won't work.
$(document).on("pagebeforecreate", "#pageX", function (event) {
/* do something to pageX */
});
unlike pagecreate which can be delegated to a specific page.
$(document).on("pagecreate", "#pageX", function (event) {
/* use it to add listeners */
});
However, you can obtain an object of that page which is being created.
$(document).on("pagebeforecreate", function (event) {
var page = event.target.id;
if ( page == "pageX") {
/* do something to pageX */
}
});
Why .one()?
Since pagebeforecreate can't be delegated and it fires on each page, using .one() will run code once only. However, if you repeat the same code using .one() that code will be executed it again.
Altenative approaches:
Check whether panel is added before adding it.
$(document).one('pagebeforecreate', function () {
var panelDOM = $("[data-role=panel]").length;
if (panelDOM === 0) {
/* add panel */
} else {
/* nothing */
}
});
Demo
Use mobileinit as it fires once per document/framework. This event fires before loading jQM, so you will need to enhance/_initialize_ panel after loading jQM.
<script src="jquery-1.9.1.min.js"></script>
<script>
/* inject panel */
$(document).on("mobileinit", function() {
var panel = '<div>panel</div>';
$("body").prepend(panel);
});
</script>
<script src="jquery.mobile-1.4.2.min.js"></script>
<script>
/* initialize it */
$(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
</script>
Demo

Bootstrap Popover Not Working When Loaded With Ajax

When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.

The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.

with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer

<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.

Mobile Hidden Menu works on jsfiddle but not online. Any solution would be helpful.

So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?

It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/

You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery