<ul class="messages">
<li class="error-msg">
<ul>
<li><span>"Product6" is available for purchase in increments of 2 only.</span></li>
<li><span>"Product3" is available for purchase in increments of 3 only.</span></li>
</ul>
</li>
</ul>
<script>
Event.observe('messages', 'click', function(event) {
this.remove();
});
</script>
I want is that when I click on first 'li' which is the children of 'li having class name error-msg only this should disappear and when I click on second 'li' then 'ul' having class message should disappear using prototype js.
Related
I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.
I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution
I would like to open specific menu item and set focus on keydown event.
I can open kendo menu by following code but can't set focus over there.
Thanks is Advance !
<ul id="menu">
<li>
Test
</li>
<li>
Master
<ul id="ulMaster">
<li>County</li>
<li>State</li>
<li>City</li>
</ul>
</li>
<li>
Transaction
<ul>
<li> Service Order </li>
<li> Technician Payment </li>
</ul>
</li>
</ul>
document.body.onkeydown = function (e) {
var event = e || window.event
var key = e.charCode || e.keyCode;
if (event.altKey) {
switch (key) {
case 68: // D
$("#ulMaster").trigger("mouseover");
break;
}
}
$("#menu").kendoMenu({});
You can attach an event handler to Menu select event like this:
$("#menu").onkeydown({ select: function (e) {
console.log(e.item);
} });
You also get the menu item in the event argument.
All The Best .
Vote if your Code Working
Is there some built in functionality to open a tab pages(kendoUI TabStrip) based on the url? or do I have to write some custom function to read the url and do some work based on that?
I think you would have to parse the URL, then call the activateTab() function on the tab strip to open the tab you want.
Check if this is what you are looking for:
HTML:
<div id="tabstrip">
<ul>
<li class="k-state-active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
JavaScript:
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
contentUrls:[
"page1.html",
"page2.html",
"page3.html"
]
});
});
It creates a 3 tabs kendoTabStrip and the content of each of the tabs is page1.html, page2.html and page3.html.
Solution if you want to set the active tab in the rendering state (not with Js at the page load)
if you use a templete system (like groovy for play framework 1.x) you can write something like this:
<ul>
<li class="#{if params.get('ref') == 'application'}k-state-active#{/if}">Application</li>
<li class="#{if params.get('ref') == 'payment'}k-state-active#{/if}">Payment</li>
</ul>
<div>
content for tab application
</div>
<div>
content for tab payment
</div>
Note: params.get('ref') means the requests's get param with the name: 'ref'
And if you open this page with the url:
someting.dev/dashboard?ref=payment
you will get the payment tab as the active
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>