We Keep Coding

Button onlick show alert box

I have a modal and after pressing the password update button, the modal should close and an alert box should appear on my homepage. however, the alert box will not appear when the page is first opened. how can I do it? Do you have any examples you can share?

If you are using the alerts provided by the browser, you have to add a EventListener to your button like:
yourCloseButton.addEventListener("click", () => {
alert("The modal has been closed!");
});

Complementing Apollo79's answer, you can also use an inline event listener, but this is no longer recommended. There are some specific cases for this, but if you really don't need one, use Apollo79's answer instead.
<button id="urButton" onclick="alertAndDisappear()">
or
yourCloseButton.onclick = function(){}
which is equivalent to the first one.
Again, only use these if you really need them

Custom jQuery not working on Wordpress Ninja Forms plugin

I am having some problems when I want to add custom jQuery code that affects the form.
For example when someone clicks an input or radio button another input or element to be hidden or shown.I tried to get a result like console.log('trigger'); when clicked or something else but nothing in dev. console appeared.Also, I tried the following methods:
To call the click event with .on('click', function()... or to call the event with .trigger('click');, or to change the event to change
To embed the script within a file from ninja forms or to put it inside the page at the ending of body tag in footer.php
To change the opening declaration of jQuery to work inside a function like this : (function($) {$(document).ready(function(){.....
I know that I could try another plugin, I tried one and the custom jQuery works but I really like this one and don't know why this is happening ...
Thanks

Not sure if you need help with this any more as it's been some time since you posted your question, but this may help others in the future. I had the same/similar issue with not being able to run JS/jQuery on the Ninja Forms and found that it's because Ninja Forms load their forms asynchronously. So, when your document.ready function runs, the form doesn't yet exist and it's not able to bind.
Ninja Forms have their own event ready state that can be used as follows:
jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
// Your code goes here...
});

The event isn't registered simply because the elements you're trying to bind the event to do not exist yet at that moment (on document load). Ninja forms loads the form contents asynchronously, so you'll have to wait until the form is fully loaded and then add your event listeners.
This works for me:
var formExists = setInterval(function() {
if ($(".nf-form-cont").length) {
// Set your event listeners here, example:
$("#nf-field-1").click(function(e) {
console.log("click!");
}
clearInterval(formExists);
}
}, 100); // check every 100ms

How to bind an event within dynamically loaded content on a click event?

I have a div inside my html with the id pageContent. When users click various buttons, it will load the appropriate content. When a user clicks the javaQuestions button it loads, javaQuestions.html into the div just fine. However, inside, the javaQuestions.html, I have a collapsible list, and I can't figure out a way to "bind" the li collapse/uncollapse without having the user to click TWICE. Right now what I have is:
$("#pageContent").on('click', 'li', function (){
$('.collapsible').collapsible();
});
So I guess what happens is, first the user clicks on the button, and it loads content. Then, the user clicks on any li, and it enables the "collapsible()" function, but does not uncollapse/collapse the content. Only when the user clicks a second time does it works fine. I tried adding the line $('.collapsible').collapsible(); into the event that loads the javaQuestions.html content, but it doesn't do anything. Kind of at a roadblock, any ideas?
EDIT: Here is the code that loads the content:
$("#pageContent").on('click', '#javaQuestions', function (e) {
fadeIn("#pageContent", "../java-questions/javaQuestions.html", 50);
fadeIn("#commentsContent", "../comments/comment-section.html", 500);
});
I also really want to know how this will function once I figure it out. But as you can see, the above function loads the javaquestions.html, and I can't seem to find a way to ALSO bind 'li' to be collapsible in one swoop.

Have you tried using jQuery bind method? You can bind your handler to, say, body and then you don't have to care about loading and attaching a handler after it.
Update: may be this will help:
$(document).ready(function() {
$("body").on('click', '#pageContent li', function (){
$('.collapsible').collapsible();
});
});

Use this DOCUMENT because it is dynamically loaded
$(document).on("click","li #pageContent",function(){
$('.collapsible').collapsible();
});

Executing functions BEFORE Bootstrap popover is displayed?

I've recently started using Twitter's new Bootstrap 2.0.1 and its Javascript popovers.
I want to write a script so that no more than one popover can be displayed at one time. In other words, when a new popover is generated for whatever reason (e.g. the client clicks or hovers over a new element with a popover), all of the PREVIOUSLY displayed popovers are hidden first.
Here's the function that initially sets up all of the popovers for my webpage:
$(function (){
$("[rel=popover]").popover({placement:'left', trigger:'click', html:true});
});
What I need, I think, is to write a function that hides all popovers. I would call that function BEFORE displaying every popover, to ensure that only one popover is displayed at a time. The function might look like this, I imagine:
function hidePopovers(){
$(function (){
$("[rel=popover]").popover('hide');
});
}
But my problem is figuring out WHERE (or HOW) to call this hidePopovers function. I want to call it when a popover is triggered, but before the popover is displayed. Help?
Oh, and just to clear up any confusion, the new Bootstrap now has a 'click' trigger that allows you to display popovers upon clicking. More details about it can be found here.
Thank you so much!

Considering what you have presented as the problem to solve, I think that it would be much more efficient to simply store a reference to the last popover open, rather than execute the hide() method on every single popover element you might select on the page. As far as I understand it, you only want a single popover to be open in the first place, so there should only ever be at most a single one to hide.
The following would do the trick:
var $visiblePopover;
$('body').on('click', '[rel="popover"]', function() {
var $this = $(this);
// check if the one clicked is now shown
if ($this.data('popover').tip().hasClass('in')) {
// if another was showing, hide it
$visiblePopover && $visiblePopover.popover('hide');
// then store reference to current popover
$visiblePopover = $this;
} else { // if it was hidden, then nothing must be showing
$visiblePopover = '';
}
});​
JSFiddle
Technically, you could potentially change the selector where the delegate handler is attached (in the example code 'body' is used) to a more specific element of the page, allowing you to attach the only-one-visible-at-a-time behavior to only a subset of the popovers on the page.
For instance, if you had a specific form where the popovers would appear too close together, but other popups on the page wouldn't collide/overlap, you could select just the form (e.g., '#some_form_id'), and only the popups in the form would have the behavior.
JSFiddle
Note: In this latter example, I also optimized the code a bit by changing the stored reference to only use the actual Popover object, rather than the jQuery-ized DOM element it is attached to.

Haven't tested this but something like this might work:
Set the trigger to manual.
Listen for click events and on click, call hidePopovers(), and then show the clicked popover.
$(function (){
function hidePopovers(){
$(function (){
$("[rel=popover]").popover('hide');
});
}
$("[rel=popover]").popover({placement:'left', trigger:'manual', html:true});
$("[rel=popover]").click(function() { hidePopovers(); $(this).popover('show');});
});

Timeout for javascript execution

jQuery(document).click(function () {
jQuery('.close-news').css('display', function(){return jQuery('#colorbox').css('display');});
});
I have this script, which make my link appear\dissappear depends on state of #colorbox block. But somewhy link appear\dissappear not immediatelly, but after 2 click.
Basically i have to click one more time in random area to make my script work
I guess its because my html code isnt update fast enought to make . So how do i add some timeout for this script?

It seems you are using Colorbox in Drupal.
There can be a callback function that gets executed once the Colorbox is shown up.
After Debugging your site, seems that there is a cbox_complete custom event firing up.
If thats the case, you can attach a function to this event.
In the function, you can toggle the display of your .close-news li element, similar to what you are doing on document click in the question