We Keep Coding

Jquery and Angularjs

So I'm trying to collapse a sidebar which I have stored as an angular element. I've tried using the toggle script in the template URL and in my page code but neither are doing it. On every other page of the site, I still have the sidebar in non-angular form and it is collapsing without a problem.
heres the problem
plunkr
<div ng-app="appHeaderApp">
<div ng-controller="sidebarcon">
<div ng-repeat="stab in mySideTabs">
<app-sidebar info="stab"></app-sidebar>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>

The short answer for this is that you are not using Angular correctly. If you're using Angular, do things the Angular way :)
After inspecting your website, it looks like you are using a directive for the sidebar. The collapsing functionality is being controlled by the "toggled" class, so we can use ng-class to toggle this.
So we can do something like:
<div ng-class="{toggled: toggled}"></div>
This conditionally applies a class. Then in your button that toggles the sidebar, you can do something like:
<button ng-click="toggled = !toggled">Toggle Sidebar</button>
This button will toggled the "toggled" boolean back and forth, which will toggle the class on the sidebar.

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));
});
},
//...
}

ngInfiniteScroll Triggered Once Upon Page Loading

I am using ngInfiniteScroll on my webpage to allow for infinite scrolling. I have it working except for one thing. When the page initially loads, ngInfiniteScroll seems to get triggered and I don't know why.
I attach ngInfiniteScroll to a link which appears at the bottom of the last post.
Here is what my code looks like:
<div style="height: 100px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
<a infinite-scroll="nextPosts()" href ng-click="nextPosts()" class="show-more">Show more</a>
</div>

Toggle does not work on the same element that show works on

I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!

Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.

Defining a return-transition between page changes

I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.
$.mobile.changePage("#foo", {
transition:"slide"
});
When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.
I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.
Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.
Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.

Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.
Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.
Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.

For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"
Example:
<div data-role="page" >
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
<a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
</div>
</div>​
jsFiddle:
http://jsfiddle.net/GEDcF/
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
UPDATE
From your comment
"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
Quote:
Properties:
reverse (boolean, default: false) Decides what direction the transition will run when showing the page.

Found it.
One of our developers turned off all return transitions globally, so no wonder that it didn't work.
This is what he used. Removing that line did the trick.
$.mobile.changePage.defaults.transition = "none";