What I want to achieve is to add checkboxes to the panel headers in a PanelBar like in the following fiddle which I have created.
Below is the html:
<ul id='panelbar'>
<li class='k-state-active'> <span class='k-link k-state-selected'>Tab 1 <input type="checkbox" class="cbSelect"/></span>
<div>Test 1</div>
</li>
<li> <span class='k-link k-state-selected'> Tab2 <input type="checkbox" class="cbSelect"/></span>
<div>Test 2</div>
</li>
</ul>
I've found that when you try to check the checkbox, that tab opens.
Is it possible to disable the onclick method for the clicked tab when clicking on the checkbox?
and if so, any ideas on how I can achieve this?
Just prevent the propagation :
$("#panelbar").on("click", "input.cbSelect", function(evt) {
evt.stopPropagation();
})
See : jsFiddle.
Related
This is my code.
<div class="tab-content">
<form>
<input type="radio" href="#tab1" name="rb-membership" data-toggle="tab" checked/><label style="font-size:15px">STARTER</label>
<input type="radio" href="#tab2" name="rb-membership" data-toggle="tab"/><label style="font-size:15px">STANDARD</label>
<input type="radio" href="#tab3" name="rb-membership" data-toggle="tab"/><label style="font-size:15px">ENTERPRISE</label>
</form>
So when I click the 2nd or 3rd button. There is not checked on it but the tab is working. But when I remove the data-toggle, the checked is working but the tab is not. I need to set checked the radio button when I click it.
you need to do just one thing remove data-toggle="tab" and add script
$('input[name="rb-membership"]').click(function () {
$(this).tab('show');
});
Check this Using radio buttons for tab control using bootstrap as a reference and
demo
I want to create dropdown with country->region->city selection.
The first ul opens from click on that span and the others set to show on hover (code at the bottom).
<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
<li class="dropdown-location-li">
<strong>Deutschland</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Brandenburg</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Oranienburg</strong>
</li>
<li class="dropdown-location-li">
<strong>Schwedt</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>Berlin</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>France</strong>
</li>
...
</ul>
$('.dropdown-location-li').hover(function(){
$(this).children('ul').css('left', $(this).parent('ul').width()+'px');
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.
$('.dropdown-location-li').click(function(){
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
console screenshot
You have nested .dropdown-location-li elements, so the click keeps propagating up to the other LI elements, firing the event handler again etc.
You should stop the propagation the first time
$('.dropdown-location-li').click(function(e){
e.stopPropagation();
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
try to use JQuery Find
$(this).find('strong').text()
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
In my asp.net mvc application I have a modal popup.In modal popup i have three divs displayed like tabs.each div has buttons "Next","Back".on click of these buttons i want to navigate between these divs
sample code
<div id="Div1">
<ul>
<li><a id="btnone" href="#OneTab">one</a></li>
<li><a id="btTwo" href="#TwoTab">Two</a></li>
<li><a id="btnThree" href="#ThreeTab">Three</a></li>
</ul>
<div id="OneTab>
<input id="btnNext Type="button/>
<input id="btnBack Type="button/>
</div>
<div id="TwoTab>
</div>
<div>
Please suggest
Thanks
using foloowing line of code on "Onclick" event of button
$('#Div1').tabs("select", tabid);
Here tabid is the id of the tab on which you want to navigate
The code change done is
as below
I am developing an application using jquery mobile where I need to display a list of records with check box and collapsible button.
By clicking the check box user can select multiple records.
By clicking collapsible button he can view record detail.
I fond below code on internet but its not working:
<ul data-role=”listview”>
<li class="ui-li-1line-check2">
<span class="ui-li-text-main">1line-check2</span>
<form><input type="checkbox" name="c1line-check2"/></form>
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"> </div>
</li>
</ul>
Thanks!