Im looking for some solution to get tab label text on li ng-click. i'm using radio button for multiple options. suppose i click on local tab button and then selected poin to point radio button. im getting radio button value but i need category name also (local & outstation).
<ul class="tabs">
<li class="tab-link current" data-tab="tabs-1">LOCAL</li>
<li class="tab-link" data-tab="tabs-2">OUTSTATION</li>
</ul>
<div id="tabs-1" class="tab-content current">
<div class="tab-elements">
<div class="checkboxes-demo">
<div class="fac fac-radio fac-default"><span></span>
<input id="box1-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Point to Point')" value="Point to Point" ng-model="selectCar.platform">
<label for="box1-fac-radio">Point to Point</label>
</div>
<div class="fac fac-radio fac-default"><span></span>
<input id="box2-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Hourly')" value="Hourly" ng-model="selectCar.platform">
<label for="box2-fac-radio">Hourly</label>
</div>
</div>
</div>
</div>
<div id="tabs-2" class="tab-content">
<div class="tab-elements">
<div class="checkboxes-demo">
<div class="fac fac-radio fac-default"><span></span>
<input id="box3-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('One Way')" value="One Way" ng-model="selectCar.platform">
<label for="box3-fac-radio">One Way</label>
</div>
<div class="fac fac-radio fac-default"><span></span>
<input id="box4-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Round Trip')" value="Round Trip" ng-model="selectCar.platform">
<label for="box4-fac-radio">Round Trip</label>
</div>
</div>
</div>
</div>
Here is my app code for getting radio button value
var appModule = angular.module('cormobApp', []);
appModule.controller('selectCarCtrl', function($scope) {
$scope.radioPlatForm = function(platformChange) {
$scope.platformSelected = platformChange;
}
You can do this way.
Inside your HTML
<li class="tab-link current" data-tab="tabs-1" ng-click="TabName('Local')">LOCAL</li>
<li class="tab-link" data-tab="tabs-2" ng-click="TabName('Outstation')">OUTSTATION</li>
Inside your Controller
$scope.TabName= function(name) {
alert(name);// You can get selected tab name here
}
try to do it this way
on js
$scope.local = "LOCAL"
$scope.outstation = "OUTSTATION"
$scope.localfunction = function (local) {
$scope.platformSelected = local;
}
$scope.outstationfunction = function (outstation) {
$scope.platformSelected = outstation;
}
on html
<li class="tab-link current" data-tab="tabs-1" ng-click="localfunction('local')">{{ local }}</li>
<li class="tab-link" data-tab="tabs-2" ng-click="outstationfunction('outstation')>{{ outstation }}</li>
<span class="third-text-right" ng-if="selectCar.platform == 'Hourly' || selectCar.platform == 'Point to Point'">Local</span>
<span class="third-text-right" ng-if="selectCar.platform == 'One Way' || selectCar.platform == 'Round Trip'">Outstation</span>
I used two spans to show which tab is selected when clicking any sub option it will compare which radio button value match with condition it will show that span.
Thanks for prompt response guys. Thanks a lot
Related
I have some drop-down menus from a plugin that do not display their contents in alphabetical or an ascending/descending order.
The lists look like this in the inspector:
<ul class="options">
<li class = "opt">
<span><i></i></span>
<label> BAC </label>
</li>
<li class = "opt">
<span><i></i></span>
<label> ACD </label>
</li>
<li class = "opt">
<span><i></i></span>
<label> FBC </label>
</li>
</ul>
I would like to sort these li's by the contents of the label.
The order of the list is currently whatever was entered into a spreadsheet last is at the top.
I have attempted some solutions found here including this one Sort an html list with javascript
However, the order of my drop down remains the same.
This is my first time asking a question, let me know if I left out anything crucial. Thanks.
You can sort a jQuery collection and append that collection to parent
$('ul.options').append(function() {
return $(this).children().sort(function(a, b) {
var aText = $(a).find('label').text().trim(),
bText = $(b).find('label').text().trim();
return aText.localeCompare(bText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="options">
<li class="opt">
<span><i></i></span>
<label> BAC </label>
</li>
<li class="opt">
<span><i></i></span>
<label> ACD </label>
</li>
<li class="opt">
<span><i></i></span>
<label> FBC </label>
</li>
</ul>
I am creating a payment option buttons. The problem is the pre-made option gives no place to add payment images and descriptions. So I have made a (li) list of options using basic html and content now i want to know if we can make li to select input when pressed
HTML Code
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
Current Input Code
<div class="radio-buttons-selection">
<label>
<input name="shipping" type="radio" class="radio" id="shipping_{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true" {/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)">
<div class="shipping_{$shipping.shipping_id} box"> <span>{$shipping.shipping_name}</span> </div>
</label>
I'm unfortunately not quite sure how you have implemented your Current input code with the rest of the code. However, using the first snippet of code, something like this (using jQuery) should work:
$("li").on("click", function() {
$("input[type=radio]").each(function() {
$(this).prop("checked", false);
});
$(this).find("input[type=radio]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
<input type="radio"/>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
<input type="radio"/>
</div>
</li>
</ul></div>
Basically, if a list-item is clicked, find the input[type=radio] in that list item and check it (and before that, make sure all others are unchecked so we keep it 'valid').
If you can merge your HTML code with your Current input code I might be able to provide a better example, but nonetheless you might see what's going on and what you could do?
$(".shipping-method li").on("click", function() {
$(".shipping-method input[type=radio]").each(function() {
$(this).prop("checked", false);
$(this).children(".shipping-method .item").removeClass("on");
});
$(this).find("input[type=radio]").prop("checked", true);
$(this).find(".item").addClass("on");
});
[:I assume the 'selectShipping' method will try to extract above
values(id,value,insure,supportCod) from 'this']
'Right Click' on browser & find out the following in run time the respective values for input element '*' that you are not able to customize:
1.)$shipping.shipping_id=?? , value=??,supportCod=??,insure=?? Of first option
2.)$shipping.shipping_id=?? , value=??,supportCod=??, insure=?? Of second option
elements into elements containin as the selectShipping method expects it to be
-->
<div class="shipping-method">
<ul class="">
<li>
<div class="item"><a href="javascript:;" class="weixin_wap" id="shipping_{$shipping.shipping_id_Of_firstoption}" value="{??Of_firstoption}" insure="{$shipping.insureOf_firstoption}" onclick="selectShipping(this)>Wechat</a>
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on"><a href="javascript:;" class="alipaywap" id="shipping_{$shipping.shipping_id_Of_second_option}" value="{??Of_second_option}" insure="{$shipping.insureOf_second_option}" onclick="selectShipping(this)>AliPay</a>
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
I am new to Angular and want to set the value of scope variable from directive and access it from the template file, but it's not working.
I am using Ratchet Toggle, and want to get all toggles that the user has turned off. I was able to write to the console but was not able to read from the template file.
Here's my directive:
mobileApp.directive('whenToggled', [function() {
function linkFunction(scope, element, attr) {
scope.$watch(function() {
setTimeout(function(){
var has_class = element.hasClass('active');
var id = element.attr('id');
if(has_class==false){
scope.unwanted_ingredients += id;
}
else
scope.unwanted_ingredients = "none";
},0)
}, function(value) {
//
});
}
return {
restrict: 'A',
scope: true,
link: linkFunction,
};
}]);
and here's my template code:
Ingredients: {{unwanted_ingredients}}
<ul class="table-view">
<li class="table-view-cell">
Item 1
<div id="item1" class="toggle" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 2
<div id="item2" class="toggle active" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 3
<div id="item3" class="toggle" when-toggled ng-click="">
<div class="toggle-handle active"></div>
</div>
</li>
<li class="table-view-cell">
Item 4
<div id="item4" class="toggle" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
unwanted_ingredients is being populated on initial load as I set it on the controller as:
$scope.unwanted_ingredients = "abc";
but the value is not being changed through the directive link. I appreciate your input on this as I don't understand well how scopes works with Angular.
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
I am working on a project and facing a problem. It's a jQuery problem and I am not good in jQuery. I want when someone clicked on list item(<ul id="res-menu-filters"><li></li></ul>) the value will change on h3(<h3 id="menu-title-layout-text">Change Value</h3>) tag with the value of div#menu-extend-title (<div id="menu-extend-title">Breakfast</div>).
I tried a jQuery but it's not working.
Below is my html code and jQuery code.
How should i make this work?
Thanks in advance.
<div class="menu-title-layout-change">
<h3 id="menu-title-layout-text">Breakfast</h3>
</div>
<ul id="res-menu-filters">
<li class="filter">Category 1
<div id="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div id="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div id="menu-extend-title">
Dinner
</div>
</li>
jQuery code:
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e)
{
var value = jQuery('#menu-extend-title').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
Use common class instead if you used duplicated ids
<ul id="res-menu-filters">
<li class="filter">Category 1
<div class="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">
Dinner
</div>
</li>
jquery
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e){
var value = jQuery(this).find('.menu-extend-title').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
ID of an element must be unique, so need to use class to group similar elements, also in the click handler you need to find the title element which is a descendant of the clicked li
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e) {
var value = jQuery(this).find('.menu-extend-title').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="restaurant-menu-content-tab">
<div class="menu-title-layout-change">
<h3 id="menu-title-layout-text">Breakfast</h3>
</div>
<ul id="res-menu-filters">
<li class="filter">Category 1
<div class="menu-extend-title">Breakfast</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">Launch</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">Dinner</div>
</li>
</ul>
</div>
It doesn't work because of the following issues:
HTML menu-extend-title is an ID. It should be unique for elements.
Change menu-extend-title to class and use .menu-extend-title.
Use the following code:
<li class="filter">Category 1
<div class="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">
Dinner
</div>
</li>
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e) {
var value = jQuery('.menu-extend-title', this).text();
jQuery(this).find('div').text(value);
return false;
});
As arun pointed out, IDs should be unique. You should rather use classname. also you can use current li context to get the required div in it using current clicked context and find selector:
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e){
var value = jQuery(this).find('div').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
Do you mean something like this:
here a better html code:
<div class="menu-title-layout-change">
<h3 class="menu-title-layout-text">Breakfast</h3>
</div>
<ul class="res-menu-filters">
<li class="filter">Category 1
<div class="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">
Dinner
</div>
</li>
Make sure your html id's are unique!
And this jquery:
$(document).on('click','.res-menu-filters',function(){
$('.menu-title-layout-text').text($(this).find('.menu-extend-title').text());
})