We Keep Coding

cannot run function click with multilevel push menu in meteor

I am a newbie in meteor and also in jQuery.
I am trying to explore meteor with multi level push menu from http://tympanus.net/Development/MultiLevelPushMenu/ ..
The scenario is simple, so I have a navigation menu (ex: Home, About Me, etc) on the left side and a container in right side. When I click the navigation menu, I want to show a template in my container side.
Just an example if I click "Home" in my navigation menu, then the container side will display Home Template. Or, if I click "About Me" menu, then the container side will display AboutMe Template.
I want to make it with a reactive menu using meteor session.
I can't give all my code here because it's too long, so here is my essential code:
.html:
<template name="MainTemplate">
<div class="container">
<div class="mp-pusher" id="mp-pusher">
<h2 style="margin-left: 20px">Open/Close Menu</h2>
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<ul>
<li><a class="icon icon-shop" href="/MainTemplate">Home</a></li>
<li><a class="icon icon-search" href="#" id="ViewGrid">View in Grid</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
{{>scroller}}
</div><!-- /pusher -->
</div><!-- /container -->
</template>
<template name="scroller">
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
{{#if currentViewIs "GridHeroes"}}
{{>GridHeroes}}
{{else}}
{{>logo}}
{{/if}}
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</template>
<template name="logo">
<div>
<img src="../marveldc.jpg"/>
</div>
</template>
.js :
Template.scroller.currentViewIs = function(view) {
if(Session.get('currentView') == view)
return true;
return false;
};
Template.MainTemplate.events() ({
'click #ViewGrid':function(event, template){
alert('ab');
Session.set('currentView', 'GridHeroes');
}
});
My problem is when I click the link on navigation menu, it cannot render a new template in container side. Even my alert can't show too.
Any idea how to make it work?

AngularJS toggling header works only if changed in directive

I have the following markup:
<div class="schedule">
<!-- Header info -->
<div class="row">
<!-- Schedule title -->
<div class="title" ng-click="toggleHeader()">
<span ng-hide="isScheduleVisible">{{ schedule.name }} (Open to View)</span>
<input ng-model="schedule.name" class="schedule-name" ng-show="isScheduleVisible"/>
</div>
<!-- Action menu items go here -->
<div class="actions" ng-show="isScheduleVisible"></div>
</div>
<!-- Schedule Info -->
<div class="row" ng-show="isScheduleVisible">
<!-- This is the time on the left of the table -->
<div id="times"></div>
<!-- Conditions for the Schedule -->
<div id="conditions"></div>
<!-- Shifts of the Schedule -->
<div class="shifts"></div>
</div>
</div>
I want to toggle the content by clicking the "title" (see below for the open/close state snapshot). Right now, as you can see, I call a function toggleHeader() in my controller, and all it does is:
$scope.toggleHeader = function()
{
$scope.isScheduleVisible = ! $scope.isScheduleVisible;
}
I want to replace it with ng-click="isScheduleVisible = !isScheduleVisible". However, this does not work. This will only toggle the header (the grey banner) and not the actual content (the schedule).
Why?!

Cannot select the last element with class name : JQuery

In my webpage I have divs with same class name message_box vlistngbox item. I am calling an ajax function in the scroll event of page and I want to append the response after the last div with class message_box vlistngbox item.
I tried with,
$("#masnrycontainer .message_box vlistngbox item:last").after(response);
But it is not getting appended as it failed to choose the last div with class name message_box vlistngbox item. Can anyone help me to select the last div ?
I am sharing the part of my HTML code below:
<div class="main_content_wrapper">
<div class="mainpading">
<div class="mainwraper main_msnry">
<div class="left_wrapper">
<div class="inside_left_wrapper">
<div class="user_accountlinks">
<!-- I have menus in my page here -->
</div>
<div class="useracntmenuresponsive"><i class=" ico_color2 fa fa-list"></i></div>
<!-- for Responsive Menu Ends -->
</div>
</div>
<div class="main_content_wraper">
<div class="inside_mainconatinerwrap">
<div class="msnry" id="masnrycontainer">
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.

You have multiple classes in same element.selector for last item would be .message_box.vlistngbox.item:last.You need to use:
$("#masnrycontainer .message_box.vlistngbox.item:last").after(response);

You probably missed . before item and vlistngbox for class selector. Also remove remove the space between these classes to select element with all these classes.
$("#masnrycontainer .message_box.vlistngbox.item:last").after(response);

use last
$('.message_box').last().html();
this will select last div html ....you can do any thing with this div now

jquery slidetoggle hide previous element

I'm working on a slideToggle function on click, I want to hide the previous element that was clicked when a new one is clicked, I've used this same set of code previously and its worked however it's no longer working now and I'm stumped at why its no longer works:
My code is as below or view a jsfiddle
js/js.js
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
index.html
<div class="mostpopular">
<h4>Nokia:</h4>
<h5>3100</h5>
<p>Most popular mobile phone of the year</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia (Data Source)</p>
<p class="source">GSM Solution (Image Source)</p>
</div><!-- End Toggle Sources -->
</div><!-- End Sources -->
</div>
<!-- END MOST POP -->
<div class="mostpopular">
<h4>Lord of the Rings:</h4>
<h5>Return of the King</h5>
<p>Highest Grossing Film</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia</p>
<p class="source">IMDB (Image Source)</p>
</div> <!-- End Toggle Sources -->
</div> <!-- End Sources -->
</div>
would appreciate some help in regards to this.
Why aren't the other '.togglesources' divs closing when I open a new one?

Try this:
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).closest('.mostpopular').siblings().find('.togglesources').slideUp();
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
Working Fiddle

Scroll top function doesn't perform as expected

I'm using dragscroller plugin to make a div scrollable with mouse move! There are around 100 sub elements inside the scrollable div. These elements have a click event binded. What I'm trying to do is when a sub element is clicked it should get scrolled to the top of the div. I use the following function to get this but the problem is when I manually scroll to a element in the bottom and click, it get's scrolled to a position that's not expected.
function billScroller(elem){
var parentTopCoordinate = $('#bill-list').offset().top;
var elementCoordinate = $(elem).parent().offset().top;
var scrollPosition = ( elementCoordinate - parentTopCoordinate ) - 2;
$('#bill-list').animate({ scrollTop: scrollPosition },1000);
}
$(document).on('click',".bill-description",function()
{
//close all bills
$(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600);
billScroller(this);
//open the clicked bills
$(this).next(".bill-item-list")
.slideToggle(600);
});
How can i fix this issue. I tried to create a fiddle but it was too much code and some of the elements are drawn using ajax responses.
Update : This is the element hierarchy.
<div id="bill-list">
<div id="bill-panel">
<!-- Bill -->
<div class="bill">
<!-- Bill description - Holds Bill details -->
<div class="bill-description">
<div class="bill-info bill-number"><span>000A</span></div>
<div class="bill-info table-name"><span>TABLE 78</span></div>
<div class="bill-info room-number"><span>A678</span></div>
<div class="bill-info amount"><span>76.00</span></div>
<div class="bill-remove-icon"></div>
</div>
<!-- Bill Item list -->
<div class="bill-item-list">
<!-- Item : This is a sample element & will be cleared when system loads -->
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
<!-- Remove bill link -->
<div class="item-drop-point"></div>
</div>
</div>
</div>
</div>
Bill Panel is scrollable and Bills are generated using ajax calls. A bill can contain multiple items and toggle slide function is used to open and close item list.