We Keep Coding

How do I run a function in jQuery after Bootstrap completes a function?

I am working on a final project due in less than 24 hours and am working on the final requirement, which is to add custom Javascript to my code that is not complete bootstrap.
I have a bootstrap created form with a submit button. I used jQuery to trigger a bootstrap modal to appear displaying a success message upon the clicking of that button. The modal closes when the user clicks the "x" or clicks outside the modal window.
Once the modal window closes, I am attempting to hide the form from the page using jquery. Here is my code snippet below:
//the modal submit button click event
$('#myModal').modal(show);
//the form dissapears after the modal is closed. #formToggle is the id applid to the <form>
$(document).ready( function() {
$('#formToggle').on('show', function(){
$('#formToggle').remove();
});
});

Listen when the modal is closed
$(document).on('hidden.bs.modal', '#myModal', function () {
$("#formToggle").hide();
});
https://jsfiddle.net/yd9nffxe/6/

use hidden.bs.modal:
$('#myModal').on('hidden.bs.modal', function(){
// do your stuff here...
});
hidden.bs.modal occurs when the modal is fully hidden (after CSS transitions have completed)

Prevent bootstrap dropdown closing when clicked anywhere else other than the menu item itself

I need the submenu to be opened when its child is active (as in when the user is on that page). Managed to do so already by this:
// To open active submenu on load
jQuery('.keep-open').find('.current-menu-item').closest('.current-menu-parent').children('.dropdown-toggle').trigger('click');
But upon clicking anywhere, the menu closes. It needs to stay opened unless it's specifically clicked. Only managed to prevent it from closing when clicked outside using this:
// To prevent submenu from being closed on outside click
jQuery('.current-menu-parent').on('hide.bs.dropdown', function() {
return false;
});
But of course, this seems prevents it from closing too even when the menu itself is clicked. How can I specify it to close only when that menu item is clicked?
Closest reference I found but was this and this but so far still can't get a hold of how to do it. This is on a WordPress site menu via wp_bootstrap_navwalker.
Jsfiddle here

If you want to close only when that menu is clicked just add this code
// Hide dropdown when click menu
jQuery('.current-menu-parent').bind('click', function() {
$(this).find('ul').fadeOut();
});
Demo here
Or you want to show menu item again when that menu is clicked:
// toggle dropdown when click menu
jQuery('.current-menu-parent').bind('click', function() {
$(this).find('ul').fadeToggle();
});
Demo here

JQuery Modal Trigger for Unique Elements

Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!

The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.

Capturing some clicks, not all

I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.

There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});

submit and close modal at same time

We have a form within a modal window.
I have a submit button, which saves to db. And I would like to simultaneously close the modal window.
The function for close is correct, just not my usage lol.
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" onclick="$.lightbox().close();" />
The modal window , contains iframe with php / html within it, this form is part of that iframed html code.
Any suggestions ?

To close the dialog when the element with ID save_thumb is clicked:
$('#save_thumb').click(function ()
{
$.lightbox().close();
});
You might want to bind to its parent form's submit event, however, since keyboard events won't trigger the click handler:
$('#my_form_id').submit(function ()
{
$.lightbox().close();
});
Whichever you decide on, make sure to wrap it up in a document ready handler.

Add this javascript to your file and remove the onclick attribute on your button. Make sure the javascript is added inside tags.
$(document).ready(function(){
$('#save_thumb').click(function (){
$.lightbox().close();
});
});

Use the bind function,
$(function() {
$("#save_thumb").bind("click", function() {
$.lightbox().close();
});
});