Develop Reference

how to put the close button in the title bar of jquery pop up

Here is the fiddle
https://jsfiddle.net/evbvrkan/
This is a very big project so can't change many things, now the requirement is to put the x button of the second pop up(which comes from clicking the 'Click me 2 ' button ) in the title bar or any other way of making the appear on the 2nd dialog to close that.
As you can see in the CSS that every pop-ups title close icon is disabled, I cant change that.
I tried many of the solution from stackoverflow and nothing worked , to put a button in title bar of a dialog or X sign
HTML
<div id="myFirstDialog">
This is the content of my modal dialog box
</div>
<button id="clickMe">Click Me</button>
<div id="my2ndDialog" >
This is the content of my 2nd modal dialog box
</div>
<button id="clickMe2">Click Me 2</button>
JS
$("#myFirstDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box"
});
$('#clickMe').click(function() {
$("#myFirstDialog").dialog("open");
});
$("#my2ndDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box",
buttons : {
'X' : function() {
$(this).dialog('close');
}
}
});
$('#clickMe2').click(function() {
$("#my2ndDialog").dialog("open");
});
CSS
.ui-dialog-titlebar-close {
visibility:hidden;
}

Add a class using dialogClass to the ui dialog you want to show the close button and then add css to show based on that class:
https://jsfiddle.net/jmcjzkyv/

jQuery click fires on second click but not first

I've checked some other threads but can't seem to find a response that goes with my code. My issue is my click event only fires on the second click, at which point it works perfectly (second click opens, third click closes, fourth opens, etc...)
$('.expand-btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.expand-wrapper').animate({
right: "0"
}, 500, function() {
});
} else {
$('.expand-wrapper').animate({
right: "-325px"
}, 500, function() {
});
}
$(this).data('clicks', !clicks);
});
EDIT: Here is my HTML code. It works like this jquery plugin where .expand-wrapper is the contact form which is hidden off screen and .expand-btn is the little flap that is on the side of the screen and clickable.
<div class="expand-wrapper">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Contact
<div class="expand-form">
<?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?>
</div>
</div>

This sounds like an issue where your data-clicks attribute isn't initialized on your element (as you are setting it at the end of your first click and then it appears to work as expected).
Try initializing it on your .expand-btn element as follows :
<a href="#" class="expand-btn" data-clicks='false'>...</a>
Or if you have multiple expand button elements, you can initialize them when your page is loaded using jQuery :
$(function(){
$('.expand-btn').data('clicks',false);
});

Getting div containers to display hidden and then show with a button

I am creating an admin panel and I have a panel on the left side of my page that I want to bring up different data.
I created a JSFiddle to show what I am doing.
The issue I am having is I want the dashboard home message...
<div id="dashboard_home">Welcome to the Admin Dashboard</div>
To be the only div that shows up on page load. Then when a panel seletion is clicked on, for the dashboard home message to go away and then only that new panel selection's div to show up.
Then once another panel selection is clicked on, I want the previous selection to hide and the new one to display and so fourth for all of the selections.
What do I need to do?
HTML
<div class="panel_out">
<div class="panel">
<input type='button' class="panel_buttons" id='user_request_button' value='User Requests'>
<input type='button' class="panel_buttons" id='message_button' value='Message Center'>
<input type='button' class="panel_buttons" id='draft_order_button' value='Draft Order'>
<input type='button' class="panel_buttons" id='draft_input_button' value='Draft Input'>
<input type='button' class="panel_buttons" id='announcements_button' value='Announcements'>
<input type='button' class="panel_buttons" id='dues_button' value='League Dues'>
</div>
</div>
<div class="dashboard_selection">
<div id='user_requests'>User Requests</div>
<div id='message_center'>Message Center</div>
<div id='draft_order'>Draft Order</div>
<div id='draft_input'>Draft Input</div>
<div id='announcements'>Announcements</div>
<div id='dues'>Leauge Dues</div>
</div>
JS
jQuery(document).ready(function () {
jQuery('#user_request_button').on('click', function (event) {
jQuery('#user_requests').toggle('hide');
});
jQuery('#message_button').on('click', function (event) {
jQuery('#message_center').toggle('hide');
});
jQuery('#draft_order_button').on('click', function (event) {
jQuery('#draft_order').toggle('hide');
});
jQuery('#draft_input_button').on('click', function (event) {
jQuery('#draft_input').toggle('show');
});
jQuery('#announcements_button').on('click', function (event) {
jQuery('#announcements').toggle('show');
});
jQuery('#dues_button').on('click', function (event) {
jQuery('#dues').toggle('show');
});
});

Demo
You're adding far too many bespoke events when you don't need to. Normalise your IDs to match the button IDs and derive one from the other,
e.g. <input id='user_requests_button' /> finds <div id="user_requests">
Show the div you want, then use siblings() to get the elements that you want hidden, and hide them.
Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).
jQuery(document).ready(function () {
$('.panel_out input').on('click', function(){
// derive the ID
var id_to_show = '#' + this.id.replace('_button', '');
// show one and hide the others
$(id_to_show).show().siblings().hide();
}).first().trigger('click'); // trigger the first on page load
});
Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).

On a click hide all panels first. And then open the desired one with .show()
So i would do it this way:
$('.panel').click(function(e){
$('.panel').hide();
$(e.currentTarget).closest('panel').show();
});

jQuery - Reload Bootstrap Popover Window with Load() on Click

I looked around and tried many different options to get this working but somehow I cant find a solution.
I have a boostrap popover window that will load() external url.
Everything works OK when I click the popup button first time but once I close the popover, the query function will not reload on click once the window has been closed.
Ideally, the popover window will be reloaded with fresh data every time the popover is called by a click.
my button:
<a class="btn btn-default btn-sm pop-class"
data-container="body"
data-toggle="popover"
data-placement="left"
id="{{ instance.id }}"></a>
Here is my script
$('.pop-class').popover({
html: true,
title: function() {
return $("#my-head").html();
},
content: function() {
$('#hidden-input').val(this.id);
var id = this.id + '#container';
return $( "#my-content" ).load( "/mypage/"+id );
}
});
Update:
Scenario:
This app has an external html form that the user can load as needed. As this form is dynamic and will allow the user to also update current data the form is loaded on a fly with the instance data.
As the user can close the popover at any time and return back later, the load() function should always load new data based on the instance ID or load a empty form for new entries.

TOTALLY UPDATED ANSWER
If I understood you task, I offer you not to use a bootstrap (it's not that it is designed for).
There is a snippet based on JQuery Ui. (JQuery UI Dialog docs)
There is a button that opens a dialog with an <iframe> that loading some web page each time dialog opens.
If you do not need an iframe, you could load any other contents instead.
$(function () {
// Setting up the dialog
$('#dialog1').dialog({
// Hidden for now
autoOpen: false,
// Title
title: 'My External Form',
// Width in px
width: 790,
// Dialog close event handler
close: function() {
// Looking for an iframe inside it
$(this).find('iframe').
// Clearing its contents
attr('src', 'about:blank');
}
});
// Looking for our dialog
$('#dialog1').
// Looking for JQuery UI initialized dialog (up the DOM tree)
closest('.ui-dialog').
// Looking for dialog title (down the DOM tree)
find('.ui-dialog-title').
// Prepending the title with an Font Awesome icon
prepend('<i class="fa fa-list fa-lg grey"></i>');
// Subscribing to the click on the button
$('button.show-dialog').click(function () {
// Caching the JQuery button object
var $button = $(this);
// Getting ID of the associated dialog from 'data-dialog' attribute
var dialogId = $button.data('dialog');
// If there is an ID
if (typeof(dialogId) != 'undefined')
{
// Getting a JQuery UI dialog by ID
var $dialog = $('#' + dialogId);
// Opening the dialog
$dialog.dialog('open');
// Loading a content to the iframe
$dialog.find('iframe').attr('src', 'http://apple.com');
}
});
});
.dialog
{
display: none;
}
.ui-dialog-titlebar i.fa {
margin-right: 0.75em;
}
.ui-dialog .dialog.ui-dialog-content
{
padding: 0;
overflow: hidden;
}
.dialog iframe
{
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<div class="container">
<button class="show-dialog" data-dialog="dialog1"><i class="fa fa-arrow-left fa-lg orange">My Button</i></button>
<div class="dialog" id="dialog1">
<iframe id="dialog1-frame" name="dialog1-frame" width="100%" height="100%"></iframe>
</div>
</div>

Hide existing <div> and show previous <div> in multi-branch form

I will start by telling you that this is my very first Javascript program from scratch. I am trying to make a back button that will go to the previously chosen div in a form (hide the current div and show the previous one the user chose).
The form has multiple paths to follow, paths within paths and not all selectors are buttons. There might be an onchange event or a radio button or even text input (text inputs have a next button to click).
I have had it working where it will hide the current div but show all previous chosen divs. It's now working where it hides the current div but shows nothing.
I have read a bunch of postings here and in other forums but have not found what I need yet. Any help would be greatly appreciated.
You can see the actual site here and I have put up a JSfiddle but for some reason I can't get it working there.
Here is the code from the fiddle:
<div>
<form>
<div id="uno" class="showFirst">
<button onclick="hideUno()">First Button</button>
</div>
<div id="dos" class="hideFirst">
<button onclick="hideDos()">Second Button</button>
</div>
<div id="tres" class="hideFirst">
<button onclick="hidetres()">Third Button</button>
</div>
<div id="quattro" class="hideFirst">
<button onclick="hideQuattroUno()">Fourth Button</button>
<button onclick="hideQuattroDos()">Fifth Button</button>
</div>
<div id="branchUno" class="hideFirst">
<p>First Branch</p>
</div>
<div id="branchDos" class="hideFirst">
<p>Second Branch</p>
</div>
</form>
<button id="backButton" onclick="goToPrevious" class="hideFirst">Back</button>
</div>
.hideFirst {
display: none;
}
function goToPrevious() {
var current = $(".chosen").find(":visible");
$(current).hide();
$(current).prev(".chosen").show();
}
function hideUno() {
$("#backButton").toggle();
$("#uno").toggle();
$("#uno").addClass("chosen");
$("#dos").toggle();
}
function hideDos() {
$("#dos").toggle();
$("#dos").addClass("chosen");
$("#tres").toggle();
}
function hideTres() {
$("#tres").toggle();
$("#tres").addClass("chosen");
$("#quattro").toggle();
}
function hideQuattroUno() {
$("#quattro").toggle();
$("#quattro").addClass("chosen");
$("#branchUno").toggle();
}
function hideQuattroDos() {
$("#quattro").toggle();
$("#quattro").addClass("chosen");
$("#branchDos").toggle();
}
Here are a few of the questions I've reviewed here:
retain show / hide div on multistep form
Hide and Show div in same level
how to show previous div of clicked div in angular.js
show div and hide existing div if open with jQuery?
Show one div and hide the previous showing div
I realize it's not the cleanest code, but as I said this is my first and I am trying to cleanup as I go along and learn new things.

You could make a bit of automatization instead of creating onclick events for each button/select separately.
For "Back" functionality, I'd use an array to store elements "on the fly" at each step, instead of checking visibility later on.
I'll make it this way:
Remove CSS rule display:none for hideFirst class (elements will be hidden using jQuery).
Add an class to the buttons/selects/check-boxes/etc... as event inndicator.
Add data-next attribute (to store id of the element which should be shown on click/change)
HTML:
<div id="firstDiv" class="hideFirst">
<button class="my-btn" data-next="#secondDiv" type="button">Show next<button>
</div>
<div id="secondDiv" class="hideFirst">
<select class="my-select" data-next="#thirdDiv">
<option>Helo World</option>
...
</select>
</div>
...
Script:
$(document).ready(function(){
// hide all 'hideFirst' elements, except the first one:
$('.hideFirst:not(:first)').hide();
// declare 'history' variable as an empty array (it will be used to store 'hideFirst' elements for 'Back' functionality):
var history = [];
// click event for the buttons :
$('.my-btn').click(function(e){
// as the button will submit the form if you're not using type="button" attribute, use this:
e.preventDefault();
showNext($(this));
});
// change event for selects :
$('.my-select').change(function(){
showNext($(this));
});
// Method used to show/hide elements :
function showNext(el){
// check if element has a 'data-next' attribute:
if(el.data('next')){
// hide all elements with 'hideFirst' class:
$('.hideFirst').hide();
// show 'Back' button:
$('#backButton').show();
// show the element which id has been stored in 'data-next' attribute:
$(el.data('next')).show();
// Push the parent element ('.hideFirst') into history array:
history.push(el.closest('.hideFirst'));
}
}
// click event for 'back' button:
$('#backButton').click(function(){
// hide all elements with 'hideFirst' class:
$('.hideFirst').hide();
// remove the last '.hideFirst' element from 'history' array and show() it:
history.pop().show();
// hide 'back' button if history array is empty:
history.length || $(this).hide();
}).hide(); // hide 'back' button on init
});
DEMO