How to use Jquery to handle dropdown implemented as a button - javascript

<div class="btn-group btn-grp-uk col-xs-12 ">
<button id="colorList" type="button" class="btn-phn btn btn-dropdown-white-
uk dropdown-toggle col-xs-12" data-toggle="dropdown">Red
</button>
<ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
<sly data-sly-list.color="${modelobj.list}">
<li>${color}</li>
</sly>
</ul>
</div>
<div>
<p><strong>MONTHLY COST</strong></p>
<h3 id="monthly-price">£35<small>.00</small></h3>
</div>
I need help in changing the price in the tag when a value from the dropdown value is selected. Since the dropdown is implemented as a button which i cannot change can someone help me achieve this.
I have tried this but it is happening on first click of the button itself not the dropdown values. I am trying to get the event trigger on the second click since the first click will open the dropdown and the second click is responsible for option selection from the dropdown.
**var count=0;
$( "#colordrop" ).click(function(event){
count++;
if(count%2==0)
var colorListData = document.getElementById("colordrop").innerHTML;
document.getElementById('monthly-price').innerHTML = colorListData;
});**
The actual HTML is:
<div class="btn-group btn-grp-uk col-xs-12 ">
<button type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default Color <span class="glyphicon glyphicon-menu-down"></span> <span class="glyphicon glyphicon-menu-up"></span>
</button>
<ul class="dropdown-menu col-xs-12 p-l-0">
<li> Color1 </li>
<li> Color2 </li>
<li> Color3 </li>
<li> Color4 </li>
</ul>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-4 text-center ">
<div class="col-xs-6 col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0 mob-cost">
<p><strong>MONTHLY COST FROM</strong> </p>
<h3>£35<small>.00</small></h3> </div>
</div>

You need to handle a click on each <li>, instead of the <ul>. I also notice in your HTML that you're missing the ID on the <ul> so make sure to add that as well.
$("#colordrop > li").click(function(event){
var colorListData = $(this).text();
console.log(colorListData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-grp-uk col-xs-12 ">
<button type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default Color <span class="glyphicon glyphicon-menu-down"></span> <span class="glyphicon glyphicon-menu-up"></span>
</button>
<ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
<li> Color1 </li>
<li> Color2 </li>
<li> Color3 </li>
<li> Color4 </li>
</ul>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-4 text-center ">
<div class="col-xs-6 col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0 mob-cost">
<p><strong>MONTHLY COST FROM</strong> </p>
<h3>£35<small>.00</small></h3> </div>
</div>
JSFiddle: https://jsfiddle.net/bf43v8vy/

Related

Dropdown submenu wont stay open

I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});

not able to get the selected tab value to the controller in angular.js

In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input

Change display and icon when click on <a> element

I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>

How to display data from another table nested ng-repeat in angular js

I can display the data from one table using ng-repeat tag. but the problem is when I am trying to display data from another table according to previous ng-repeat.
in detail I have 2 table one for sections
section_id section_name
1 php
2 java
another table is lecture
id section_id lecture_name
1 2 basics
2 1 loops
i could display sections using ng-repeat. but i cant display lecture below corresponding sections
<div class="course_curriculum " ng-repeat="section in sections">
<ul class="sections" >
<h4>Section {{$index+1}}: {{section.section_name}}</h4>
<!--<h4>Section 1: Introduction to Mobile Application Development</h4>-->
<li>
<div class="section-head" ng-click="view_lecture(section.id)" data-toggle="collapse" data-target="#section{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Course Lectures
</div>
<ul id="section{{$index+1}}" class="collapse" >
<li>
<ul ng-repeat="lecture in lectures">
<li >
<div class="section-sub-head" data-toggle="collapse" data-target="#sub1">
<i class="fa fa-bars" aria-hidden="true"></i> {{lecture.lecture_name}}
</div>
<ul id="sub1" class="collapse lecture">
<li>
<div class="col-md-5 article-show" >
<img src="html/img/file.png" style="width: 100px; background-color: black ;margin-right: 10px" />
Article<br>
<a data-toggle="modal" data-target="#text"><i class="fa fa-pencil" aria-hidden="true"></i> Edit Content</a> <br>
</i> Replace With Video <br>
</div>
<div class="col-md-5 right text-right" >
<div class="btn-group" role="group">
<button type="button" class="publish">Publish</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="Preview dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>As Instructor</li>
<li>As Student</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<button type="button" data-toggle="collapse" data-target="#Resources1" class="publish">Add Resources</button>
<button type="button" class="publish">Add Captions</button>
</div>
<div id="Resources1" class="collapse lecture">
<ul class="resouse">
<li class="active"><a data-toggle="tab" href="#Downloadable-File">Downloadable File</a></li>
<li><a data-toggle="tab" href="#from-Library">Add from Library</a></li>
<li><a data-toggle="tab" href="#External-Resource">External Resource</a></li>
<li><a data-toggle="tab" href="#Source-Code">Source Code</a></li>
</ul>
<div class="tab-content">
<div id="Downloadable-File" class="tab-pane fade in active">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload file<input type="file" style="display: none;">
</label>
</div>
<p>Tip: A resource is for any type of document that can be used to help students in the lecture.
This file is going to be seen as a lecture extra. Make sure everything is legible! </p>
</div>
<div id="from-Library" class="tab-pane fade">
<br/>
<p>Library is empty. Tip: You can use Accounts.academy File Uploader to upload several files at the same time. </p>
</div>
<div id="External-Resource" class="tab-pane fade">
<br/>
<div class="col-md-12">
<div class="form-group">
<label for="usr">Title:</label>
<input type="text" class="form-control" placeholder="A descriptive title" id="usr">
</div>
<div class="form-group">
<label for="pwd">URL:</label>
<input type="password" class="form-control" placeholder="https://example.com" id="pwd">
</div>
<button type="submit" value="Submit" class="publish">Submit</button>
</div>
</div>
<div id="Source-Code" class="tab-pane fade">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload File<input type="file" style="display: none;">
</label>
</div>
<p><B>Tip</B>: Only available for Python and Ruby for now. You can upload .py and .rb files</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<button type="button" data-toggle="modal" data-target="#saudio" class="sub-sub-section-add">Add Audio</button>
<button type="button" data-toggle="modal" data-target="#svideo" class="sub-sub-section-add">Add Video</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add Text/Article</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add File</button>
</li>
</ul>
</li>
</ul>
</li>
<li >
<div class="section-sub-head">
<form ng-submit="lecture_insert($index+1,section.id)">
<input type="text" class="form-control" id=lecture_name{{$index+1}} ng-model="section.lecture_name" placeholder="Enter a Title" required>
<!--<input type="text" ng-hide class="form-control" id=section_id{{$index+1}} ng-model="section.id" >-->
<div class="btn-group sub-section-add">
<button type="submit" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>
</div>
</form>
</div>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#faq{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> FAQ
</div>
<ul id="faq{{$index+1}}" class="collapse">
<li>
<button type="button" data-toggle="modal" data-target="#mainfaq" class="section-add">Add More Faq</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#Exam{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Exam
</div>
<ul id="Exam{{$index+1}}" class="collapse">+
<li >
<div class="section-sub-head">
fgfgh
</div>
<ul >
<li>
df
</li>
<li>
df
</li>
</ul>
</li>
</ul>
</li>
<li>
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#lecture" type="button" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#exam" type="button" style="background: rgba(0,0,0,0); border: none;">Add Exam</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#mainfaq" type="button" style="background: rgba(0,0,0,0); border: none;">Add FAQ</button>-->
<!--</div>-->
</li>
</ul>
</div>
A couple possible issues in the code provided:
Your inner ng-repeat is on the wrong element. It should be on the <li> element right above it. When nesting lists in bootstrap, you never repeat <ul> without wrapping each in atleast an <li> (usually an <a> too, which holds the dropdown text).
To achieve nested tables (a list of lectures within each section), you want the lectures variable to be on each section. This would make your inner ng-repeat something like ="lecture in section.lectures".
Here is a working JSBin where I made the changes I listed above. I omitted a lot of your HTML, because it was broken without the rest of your controller, but I left in enough to show how to get the nested repeats working.
Since you want to show the lecture conditionally, based on the above section_id, you can use ng-if for the desired result.
E.g.
<div class="section" ng-repeat="sec in sections">
<span>Section Id: <i>{{sec.section_id}}</i></span>
<span>Section Name: <i>{{sec.section_name}}</i></span>
<div class="lecture" ng-repeat="lec in lectures" ng-if="lec.section_id==sec.section_id"> <!--nested ng-repeat for lectures-->
<span>Lecture Id: <i>{{lec.lecture_id}}</i></span>
<span>Lecture Name: {{lec.lecture_name}}</span>
</div>
</div>
In JS my data is in the following format:
$scope.sections=[
{section_id:1,section_name:"php"},
{section_id:2,section_name:"java"}
];
$scope.lectures = [
{section_id:1,lecture_id:2,lecture_name:"basics"},
{section_id:2,lecture_id:1,lecture_name:"loops"}
];
I've prepared a JSBIN so you can see what's going on.

Changing <ul><li> to <div> in fineuploader

I am using http://fineuploader.com/ and Twitter bootstrap
The html code for the uploading files looks like this
<ul class="qq-upload-list-selector">
<li class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector btn-small btn-warning" href="#">Cancel</a>
<a class="qq-upload-retry-selector btn-small btn-info" href="#">Retry</a>
<a class="qq-upload-delete-selector btn-small btn-warning" href="#">Delete</a>
<a class="qq-upload-pause-selector btn-small btn-info" href="#">Pause</a>
<a class="qq-upload-continue-selector btn-small btn-info" href="#">Continue</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<a class="view-btn btn-small btn-info hide" target="_blank">View</a>
</li>
</ul>
I want to change the <ul></ul><li></li> tags to <div> because I want the result to appear in a bootstrap grid. When I change the code can't I get any upload result for my uploaded files. Looks like new li-tags generates by fineuploader javascript.
How do I use div instead and so that I can display the result in a bootstrap grid?
Tested this
<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
Rest of the code ....
</div>
Fine Uploader is expecting a container inside of the qq-upload-list-selector to to hold the file item. Consider adding another <div> as the only child of the qq-upload-list-selector.
So...
<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
<div>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
Rest of the code ....
</div>
</div>
Why do you need a <div> for this? There's nothing special about a <div>. Just modify the style of the list item/list appropriately. Fine Uploader doesn't insert <li> tags if they aren't in your template.

Categories