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

jQuery menu should stay opem

I am running a Wordpress on twenty fifteen child theme. I found a Script to toggle menu on mouseover. I really like that feature.
But I want to add following option:
When the user is on childpage of parent1, I want the menu to be open on this point, as it is by default in twentyfifteen. You can see it here:
http://johannabaschke.de/impressum/
I now want that also with the script I found:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
It toggles menu on mousover, but when clicking child-page, the menu isnt open, like here:
http://johannabaschke.de/transeuropa-2015/
I am not good in coding, thats why I only modify WP-themes with CSS which I am good at, but Javascript is not my bet practice. Maybe someone has a simple idea to solve this?
Would be super glad and thx for your help!
54v4nn4h

Please try like this:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').click(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>

Could you please try following code:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
//code to keep open respective menu open on page load
$("a[href='"+window.location.href+"']").closest('.sub-menu').stop().slideToggle(200);
});
</script>

Can we hide all the data before page load using Accordion page type?

In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance

i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.

You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/

ability to auto play on scroll position in jQuery plugin

I am on my way to develop my first jQuery plugin.In which I need an animation to auto play on scroll position.I have tried many ideas but nothing worked out.Finally I put the auto play function inside plugin and called in my HTML like this.
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
is there any way that I can put document.ready() or window.scroll() inside my plugin and make it working as it is in HTML.
any help will be great full..

you want to auto assign the event when the page loads right?
why don't you just put this in your plugin file:
(function($){
//your plugin code
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
});
})(jQuery);

$(window).scroll(scrollHandler);
function scrollHandler(){
jQuery.fn.autoplayAnimation();
}

Jquery Fancybox not working after postback

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee

The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info

Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?

It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee

This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );

I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>