When "reply" link is clicked it open all the input tags associated with ng-show. How can I change it to just open the adjacent input tag of "reply" link? Example as in Facebook when a reply is clicked it open only the adjacent input tag. The number of blockquote is infinite as data is going to come from backend. so how can we dynamically manage the blockquote?
angular.module("myDiscuss", [])
.controller("TabController", function() {
this.tab = 0;
this.subTab = 0;
this.like = 0;
this.selectLike = function(setTab) {
this.like = setTab;
};
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.selectSubTab = function(setTab) {
this.subTab = setTab;
};
this.isSelected = (function(checkTab) {
return this.tab === checkTab;
});
this.isSelectedSub = (function(checkTab) {
return this.subTab === checkTab;
});
this.isSelectedLike = (function(checkTab) {
return this.like === checkTab;
});
});
<div class="thumbnail" style="border-radius: 0px;" ng-controller="TabController as tabs">
<ul class="nav nav-pills">
<li role="presentation" ng-class="{ active:like === 1 }">
<a href ng-click="tabs.selectLike(1)" class="glyphicon glyphicon-thumbs-up">Helpful</a>
</li>
<li ng-class="{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)" class="glyphicon">Comment</a>
</li>
</ul>
<div class="panel" ng-show="tabs.isSelected(2)">
<blockquote>
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<div style="overflow: hidden;">
<h4>Name</h4>
<p>.......</p>
</div>
<div ng-show="tabs.isSelectedSub(3)">
<small>....</small>
</div>
<ul class="nav nav-pills">
<li ng-class="{ active:subTab === 3 }">
<a href ng-click="tabs.selectSubTab(3)" class="glyphicon ">Helpful</a>
</li>
<li ng-class="{ active:subTab === 4}">
<a href ng-click="tabs.selectSubTab(4)" class="glyphicon">Reply</a>
</li>
</ul>
<div style="overflow:hidden" ng-show="tabs.isSelectedSub(4)">
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<input class="col-sm-8 col-md-8 col-lg-11" type="text">
</div>
</blockquote>
<blockquote>
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<div style="overflow: hidden;">
<h4>Name</h4>
<p>.......</p>
</div>
<div ng-show="tabs.isSelectedSub(3)">
<small>....</small>
</div>
<ul class="nav nav-pills">
<li ng-class="{ active:subTab === 3 }">
<a href ng-click="tabs.selectSubTab(3)" class="glyphicon ">Helpful</a>
</li>
<li ng-class="{ active:subTab === 4}">
<a href ng-click="tabs.selectSubTab(4)" class="glyphicon">Reply</a>
</li>
</ul>
<div style="overflow:hidden" ng-show="tabs.isSelectedSub(4)">
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<input class="col-sm-8 col-md-8 col-lg-11" type="text">
</div>
</blockquote>
</div>
Image when "reply" link is clicked:
This problem is screaming for a directive for two reasons. 1) Reusable component 2) Provide isolate scopes which will help contain each of those replies. The isolate scopes will make it much easier to keep each component self-contained.
Related
My question is, is there a possibility with ASP.NET Core MVC to put all data from my database in a foreach loop in different bootstrap cards with navigation?
I've already tried this and found that it works partially. But as soon as I click on a navigation tab from the second card, the tabs are only changed on the first card.
That's my index.html:
<div class="row">
#foreach (var q in Model.Question)
{
<div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
<div class="card ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#frage" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#antwort" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3 mt-sm-3">
<div class="tab-pane active" id="frage" role="tabpanel">
<h5 class="card-title text-center">#q.Question</h5>
</div>
<div class="tab-pane" id="antwort" role="tabpanel" aria-labelledby="history-tab">
<p class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort1</p>
<ul>
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example1 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example1</li>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example2 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example2</li>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example3 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example3</li>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example4 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example4</li>
}
</ul>
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2 != null)
{
<p class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2</p>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3 != null)
{
<p class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3</p>
}
</div>
</div>
</div>
<div class="card-footer text-center">
<p class="card-text small text-black-50">Ausbildungsfach: #q.Category | Prüfungsfach: #q.ExamCategory | Schulfach: #q.SubjectCategory </p>
</div>
</div>
</div>
}
</div>
And here is my small javascript file:
$('#fragen-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
Card Nav Header:
As soon as I click on "Answer" on my card 2, my card 1 changes to the "Answer" page and not my card 2
Change your code like below:
<div class="row">
#{var i = 0; } //add this...
#foreach (var q in Model.Question)
{
<div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
<div class="card ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
<li class="nav-item"> //change here..
<a class="nav-link active" href="#frage_#i" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
</li>
<li class="nav-item"> //change here...
<a class="nav-link" href="#antwort_#i" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3 mt-sm-3">
//change here...
<div class="tab-pane active" id="frage_#i" role="tabpanel">
<h5 class="card-title text-center">#q.Question</h5>
</div>
//change here...
<div class="tab-pane" id="antwort_#i" role="tabpanel" aria-labelledby="history-tab">
//...
</div>
</div>
</div>
//...
</div>
</div>
i++; //add this...
}
</div>
I'm trying to make my button functional on my website but for some reason it isn't working. I have been working on it endlessly and need some outside. If you could help with figuring out what I am doing wrong I would really appreciate it. I am still learning JavaScript and JQuery so all of this is new to me.
HTML Code:
<div id="portfolio">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><button class="btn active" data-filter="all">ALL</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li>
<div class="item" div class="column apps">
<img src="triviastartthumbnail.jpg">
<h4>Movie Trivia App</h4>
<p>This app was created to test users knowledge on how well they know their movies
and actors/actresses</p>
</div>
<ul class="img-list">
<span class="link">
<a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link">
</i></a></span>
<span class="search">
<a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i
class="fa fa-search"></i></a>
</span>
<li class="img-item">
<img class='item-img' src="html5-logo.png" alt="HTML icon" />
</li>
<li class="img-item">
<img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
</li>
<li class="img-item">
<img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
</li>
<li class="img-item">
<img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
</li>
</li>
</ul>
CSS code:
/*for filtered buttons*/
li{
display: inline;
list-style: none;
}
JavaScript code:
$("button").click(function(){
$("button").removeClass("btn active");
$(this).addClass("btn active");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".filter ul").show();
}
else
{
$(".filter ul").hide();
$("." + dataFilter).show();
}
});
I have created a jquery menu as I have links in my li, which is generated by a framework and can not have control over it.
I have created the snippet for my code. It works fine on document load. No issues.
I have another bootstrap button for sign in and sign up.
As i click on button it breaks my menu which created with jQuery and show all links without nesting. It seems like it calls another event and it breaks it.
It will be great help if some one help to tackle this sort of issue.
Thanks.
V
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
var listItems = $("ul.nav li div");
listItems.each(function() {
var contentIds = $(this).attr("id");
if(contentIds != 'homeLink' &&
contentIds != 'jobBoardLink' &&
contentIds != 'contentLink10000001' &&
contentIds != 'contentLink20000002' &&
contentIds != 'contentLink30000003' &&
contentIds != 'contentLink40000004'){
$(this).parent().appendTo('#contentLink10000001');
if(contentIds.indexOf('contentLink2') !== -1){
$(this).parent().appendTo('#contentLink20000002');
}
if(contentIds.indexOf('contentLink3') !== -1){
$(this).parent().appendTo('#contentLink30000003');
}
if(contentIds.indexOf('contentLink4') !== -1){
$(this).parent().appendTo('#contentLink40000004');
}
}
});
$('#contentLink10000001 > a,#contentLink20000002 > a,#contentLink30000003 > a,#contentLink40000004 > a').removeAttr('href');
var liCount = $('#contentLink10000001 li,#contentLink20000002 li,#contentLink30000003 li,#contentLink40000004 li').length;
$("#contentLink10000001 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink20000002 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink30000003 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink40000004 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
});
.navbar-nav> li{
float: left;
position:relative;
}
.navbar-nav> li:hover{
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<div class="container">
<center>
<button class="btn btn-primary btn-lg" href="#signup" data-toggle="modal" data-target=".bs-modal-sm">Sign In/Register</button>
</center>
</div>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
<li class="">Why?</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p></p><br> Please contact <a mailto:href="JoeSixPack#Sixpacksrus.com"></a>JoeSixPack#Sixpacksrus.com</a> for any other inquiries.</p>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
<ul class="nav navbar-nav">
<li>
<div class="link" id="contentLink10000001"><ins> </ins>Parent Link 1</div>
</li>
<li>
<div class="link" id="contentLink20000002"><ins> </ins>Parent Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000006"><ins> </ins>Child Link 1</div>
</li>
<li>
<div class="link" id="contentLink1000002"><ins> </ins>Child Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000003"><ins> </ins>Child Link 3</div>
</li>
<li>
<div class="link" id="contentLink1000004"><ins> </ins>Child Link 4</div>
</li>
</li>
<li>
<div class="link" id="contentLink2000014"><ins> </ins>Child Link 5</div>
</li>
<li>
<div class="link" id="contentLink2000015"><ins> </ins>Child Link 6</div>
</li>
<li>
<div class="link" id="contentLink2000016"><ins> </ins>Child Link 7</div>
</li>
<li>
<div class="link" id="contentLink30000003"><ins> </ins>Parent Link 3 </div>
</li>
<li>
<div class="link" id="contentLink3000001"><ins> </ins>Child Link 8</div>
</li>
<li>
<div class="link" id="contentLink40000004"><ins> </ins>Parent Link 4 </div>
</li>
<li>
<div class="link" id="contentLink4000001"><ins> </ins>Child Link 9</div>
</li>
</ul>
document.ready is called when the DOM is loaded, not when the modal is opened.
You want to bind to the modal open event.
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
I have got my code working by adding this function to my jQuery
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
buildNavMenus();
$( document ).ajaxComplete(function() {
buildNavMenus();
});
});
in buildNavMenus(); I have added my code to create nested menu.
I have a some code that allows a user to enter a data into a bootstrap datepicker and then click the submit button and date is shown inside a navpanel. On button click I have a javascript function that will determine which tab the user is on, and will run a C# function in an MVC controller. I currently have two functions DelayedSpiffDate, InstantSpiffDate. For some reason it will only load the DelayedSpiffDate function even if the instantspiff tab is selected. I'm not sure what I'm doing wrong? Here's my html:
<div class="row-fluid 1">
<div class="col-lg-12 delayed_spiff_body">
<div class="row spiff-datepicksection">
<div class="col-lg-6 pull-right">
<div class="col-sm-5 col-lg-offset-4">
<div class="form-group">
<div class="input-group date">
<input type="text" id="startDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3">
<input class="spiffdate-btn" type="button" value="Submit" />
</div>
</div>
</div>
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
And here's my javascript:
$(".spiffdate-btn").click(function(){
var correctid = $(".tab-content .active").attr("id");
var startDate = $("#startDate").val();
if (correctid == "delayedspiff")
$.get("#Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
else
$.get("#Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
});
Updated javascript:
$(".spiffdate-btn").click(function(){
var correctId = $("ul.spiff_tabs li.active a").attr('data-id');
console.log(correctId);
var startDate = $("#startDate").val();
if (correctId == "delayedspiff")
{
$.get("#Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
} else if (correctId == "instantspiff") {
$.get("#Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
}
});
You are targeting the wrong item if you want it based on the clicked tab... Try this as your 'getter':
var correctId = $("ul.spiff_tabs li.active a").attr('data-id');
Change your code in this point, your second param in FormGet is wrong, change it from delayedspiff to instantspiff:
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current.
Here is my html -
<header>
<div class="content-wrapper">
<div class="user-menu-wrapper">
<div class="hsn-logo"></div>
<div class="user-greeting-wrapper">
<div class="user-greeting">Hi, Abraham</div>
</div>
<div class="user-menu">
<ul class="user-menu-items">
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-account" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-favorites" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-bag" })</li>
</ul>
</div>
</div>
<div class="hsn-nav-wrapper">
<div class="hsn-nav">
<ul class="hsn-nav-items">
<li style="width: 25%">
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 15%">
<a href=""><span class="hsn-search-icon"></span>
</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>
</header>
<subnav id="shop" class="shop-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Deals</span></li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Clearance</span></li>
</ul>
</div>
</div>
</div>
</subnav>
<subnav id="watch" class="watch-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
</div>
</div>
</subnav>
Here is my Jquery / JS -
$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
});
});
Just glancing through your html - you have duplicate IDs. Your 'a' that links to 'play' also has an ID of 'play' - that element will be selected, not the subnav!
Also, two of your links are classed watch, none shop.
The simplest way to approach this is to hide all the <subnav> on each click. All your existing code will work just fine which already takes care of toggling the relevant <subnav>.
var $subNavs = $('subnav');
$subNavs.hide();
$('ul.hsn-nav-items li a').click(function () {
$subNavs.hide();
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
return false;
});
I also added a return false; to stop the default click event on the <a> being executed, which could result in a page load since href="#".
That said, <subnav> is a non-standard element and you would be better off using a simpler markup to describe the data. It may also prove useful to give the each subnav a common class which makes finding them via jQuery simpler.
I have also made a small demo using the following simplified code
HTML
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
<div id="shop" class="shop subnav">
shop
</div>
<div id="watch" class="watch subnav">
watch
</div>
<div id="play" class="play subnav">
play
</div>
JavaScript
var $subNavs = $('.subnav');
$subNavs.hide();
$('a').click(function () {
var $subNavToToggle = $('#' + ($(this).attr('class').split(' ')[0]));
var doToggle = $subNavToToggle.is(':not(:visible)');
$subNavs.hide();
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$subNavToToggle.toggle(doToggle);
return false;
});