We Keep Coding

JS menu stops working when navigating to a different page

I'm having some issues with my JS menu. When the page loads the menu work great, and as expected. You click the option, then it displays the menu items.
However, once I click one of the menu items and navigate to a different page the menu stops working! When you click on the icon, the menu no longer appears. The page just sits there. When i look try debug in chrome it no longer "hits" the code.
I have noticed that if i refresh that page, the menu works again as expected :/
My JS code is below, what am I missing for this kind of issue to arise?
I have created a pen for this - http://codepen.io/alr3id/pen/bwdKxL
function MyMenus(jQuery) {
$(".p-menu-icon").on("click", function(event) {
var e = $(this).next(".p-menu");
e.hasClass("p-menu_open") || $(document).trigger("click"),
$(".p-modal-bg").toggleClass("p-modal-bg_active"),
e.toggleClass("p-menu_open"),
event.stopPropagation()
});
// Removes the menu open class.
$(document).on("click", function(t) {
var e = $(t.target)
, i = 1 === e.closest("p-menu").length;
i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"),
$(".p-modal-bg").removeClass("p-modal-bg_active"))
});
}
// Load
$(document).ready(MyMenus);
Below is the HTML for the Menu
<nav class="p">
<div class="p-modal-bg"></div>
<div class="p-property">
<a class="p-property-name" href="/">
Logo Here
</a>
</div>
<div class="p-user">
<a class="p-menu-icon">
<div class="icon icon-navigator-toggle"></div>
</a>
<div class="p-menu p-menu_navigator">
<a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a>
<a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a>
<a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a>
</div>
<a class="p-menu-icon p-menu-icon_account">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="{image here}">
</div>
</a>
<div class="p-menu p-menu_account">
<div class="p-menu-item_account-details">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}">
</div>
<div class="p-account-details-name">
Example User
</div>
<div class="p-account-details-email">example#example.com</div>
</div>
<a class="p-menu-item p-menu-item_settings" href="account">Account settings</a>
<a class="p-menu-item p-menu-item_messages" href="#">Messages</a>
<a class="p-menu-item p-menu-item_logout" href="#">Sign out</a>
</div>
</div>
</nav>

Well, this is something I didn't even consider, it turns out this issue is down to Rails and Turbolinks!
Due to the way Turbolinks loads pages it screws up
$(document).ready
to fix this you need to use...
$(document).on "turbolinks:load"
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

Have you imported the JS file you are using in this page (new page where it stuck) too ? Try adding the code on another file also or move your js code to another js file and import it on that page.

Since it works at freshly loaded page the code itself shouldn't be a problem.
What comes to mind are class changes. Open up your browser's inspector and check if there are any class name changes that would resolve in loosing a listener.
Also try putting some console.log() inside each function so you are sure that both events aren't getting fired one after another.

JS - How to make Boxes collapsable in AdminLTE ( is using Bootstrap) when Content dynamical loaded

I'm using the AdminLTE Skin from https://almsaeedstudio.com/
I want to load the page content dynamically when clicking on the menu on the left side. I made this via jQuery:
<li><i class="fa fa-circle-o"></i>Test</li>
But when in Test.php is a collapsable box like this:
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-medkit"></i>
<h3 class="box-title">Test Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">TestContent</div>
</div>
The box is not collapsable when I click on the button nothing happens.
When I don't load the Content dynamically the button is usable. What is the matter here?
Thanks for your help.

I'm facing the same situation.
When I was looking for a workaround I've managed to discover what seems to be the real problem.
If you take a good look at app.js you'll see that there are many activate methods that scan the page to find out if a component is been used and then transforms or injects the behavior for the component.
That seems to be the case to boxes (Collapsable and closeable ones at least).
If you reload the script ($.getScript(app.js)) the box will work, but unfortunately other components will stop working (sidebar and control-sidebar).
If you want just the boxes to work inside de content-wrapper, one way is to call:
$.AdminLTE.boxWidget.activate();
You can do this on the $(document).ready() function of your content.
I'm still finding a better way to do this, but as far as boxes go, this should do the work.
Regards,
Jonatan Neves

I ran into the same issue, and ended up changing app.js so that the box widget listeners are on the document instead of the actual elements found when activate() is called. This guarantees dynamically added elements will be found:
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
activate: function () {
var _this = this;
//Listen for collapse event triggers
$(document).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(document).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
},
//...
}

appendChild not working on some elements

I'm working on a vanilla javascript project so I cannot use jQuery. I'm trying to use the following to move some HTML from one placement to another:
parent.appendChild(element);
I'm trying to place the forms into a different placement as I placed in the comment in my HTML code. I'm trying this but it's not working at all.
Javascript:
var loginButton = document.querySelector('[data-login-header-button]');
var loginDropdown = document.querySelector('[data-login-dropdown]');
var shopCartButton = document.querySelector('[data-shopping-cart-header-button]');
var shopCartDropdown = document.querySelector('[data-shopping-header-cart]');
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
HTML:
<header>
<nav data-nav-services>
<ul class="nav-services">
<li data-test>
<a class="icon icon-shopping-cart icon-arrow-down" href="#" data-shopping-cart-header-button>
shopping cart
</a>
<!-- PLACEMENT FOR data-shopping-header-cart -->
</li>
<li>
<a class="icon icon-user icon-arrow-down" href="#" data-login-header-button>
Login
</a>
<!-- PLACEMENT FOR data-login-dropdown -->
</li>
</ul>
</nav>
<form class="login-dropdown" data-login-dropdown>
...CONTENT...
</form>
<form class="shopping-cart" data-shopping-header-cart>
..CONTENT..
</form>
</header>
The strange thing is that if I turn around the selectors (as here below) it does work and I cannot explain why...
shopCartDropdown.parentNode.appendChild(shopCartButton);
shopCartDropdown.parentNode.appendChild(loginButton);

When you do:
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
It actually works. It is just not showing anything since the forms are empty. Check your Dev Tools and inspect your HTML.

For anybody who wish to know, the code was perfect. The issue was that I was appending this form elsewhere of my code. So there was a conflict as one had a priority over the other. I could use .cloneNode(true) as a solution. I ended transforming that appending to my new goal and solved the issue.
Anybody out there... check all the code for any other appending of the same element. Good advice ;)

Why doesn't my jQuery click event fire on my WordPress site

In my fiddle I have a simple bootstrap nav tab group in which the tabs do 2 things:
Display the corresponding tab pane
Change the value of an input to that defined by the tab anchor's data-payment_method attribute.
Here is the code:
<ul class="payment_methods methods nav nav-pills">
<li class="payment_method_bacs active"> <a href="#payment_method_bacs_desc" data-toggle="pill" data-payment_method='bacs' class='payment_method_choose'>Direct Bank Transfer </a>
</li>
<li class="payment_method_cheque "> <a href="#payment_method_cheque_desc" data-toggle="pill" data-payment_method='cheque' class='payment_method_choose'>Cheque Payment </a>
</li>
<li class="payment_method_paypal "> <a href="#payment_method_paypal_desc" data-toggle="pill" data-payment_method='paypal' class='payment_method_choose'>PayPal <i class = 'fa fa-credit-card'></i></a>
</li>
</ul>
And the panes and the input:
<input type="text" name="payment_method" id="payment_method" value="bacs">
<div class="panel panel-default top-buffer">
<div class="tab-content panel-body">
<div class="tab-pane fade active in" id="payment_method_bacs_desc">
<p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won't be shipped until the funds have cleared in our account.</p>
</div>
<div class="tab-pane fade " id="payment_method_cheque_desc">
<p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
</div>
<div class="tab-pane fade " id="payment_method_paypal_desc">
<p>Pay via PayPal; you can pay with your credit card if you don't have a PayPal account</p>
</div>
</div>
</div>
When I copy/paste my code into jsFiddle it works fine but I'm having trouble in my WordPress site (running WooCommerce), loading the standard scripts associated with both (too much to post here!).
The nav tabs work fine and the tab panes switch without issue. But my own jQuery which is used to update the input doesn't work. I added some console.logs to see how far it gets:
jQuery(document).ready(function ($) {
console.log('actived the payment chooser');
var payment_method_input = $('input#payment_method');
$(".payment_method_choose").click(function () {
var payment_method = $(this).data('payment_method');
console.log('you selected ' + payment_method);
payment_method_input.val(payment_method);
});
});
I get the 'actived the payment chooser' in the console but the 'you selected...' doesn't appear on clicks suggesting the click event isn't firing properly. Something must be conflicting with the event but I don't think it's the bootstrap nav tabs as it all works fine in the fiddle.
No other error messages are in the console. Any idea how I can track down this conflict?
Edit:
After extensive testing I'm completely stumped.
The code works fine standalone in a fiddle
The element selector works fine as demonstrated in this code in my page just before my click event code:
$('.payment_method_choose').each(function(index){
mydata = $(this).data('payment_method');
console.log('This is element ' + index + ' containing data: ' + mydata);
});
Which outputs the relevant info to the console, confirming that the jQuery events do fire in this location and the selector works.
I've tried using .on('click', function() {... to no avail.
Woocommerce loads quite a few JS scripts but I can't see a way to discover what or if is interfering with my click event. The <a> elements were added my me in the template so shouldn't be referenced by any existing scripts. Is there a way to debug this?
Any help greatly appreciated; it is obviously quite difficult to post a web page this extensive for inspection as it's on my local dev server but any suggestions to remove ambiguity please let me know.

You could try the Chrome debugger. Look in the chrome debugger elements panal at the object that you have put the click event on and see if there is an event defined on that object. (I am not sure where jQuery actually puts the evens since I have stopped using jQuery for html5.)
If there are any events on the object just put some break points in the debugger source panel.

How to avoid firing an onclick() event fired when clicking a link in AngularJS

First of all, I want to say that I have seen some topics already with similar question. I have tried withe the responses of these topics, but I have not been able to find a solution for my problem. Maybe the difference is that I am using AngularJS
(HTML)
<li class="article-list_item" ng-repeat="noticia in news" >
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
(JS)
$(document).ready(function () {
$(".article_news").click(function (event) {
$(this).addClass("approved");
});
});
What I am trying to do is to add the class "Approved" to the object I am clicking.
But when I click the link inside the <article> , I dont want to add the Class. Instead, I want the browser to open the URL.
How can I do this? Must I use stopPropagation(), preventDefault() or similar? How should I use them?
Thanks in advance

Well, Angular automatic filter link action if you implement it in angular way. For implementing it in angular way you should create directive to bind click event which handles your issue. Still you can solve it like this.
ng-click="$event.stopPropagation()"
Your HTML
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a ng-click="$event.stopPropagation()" href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>