For each loop pause event and resume event on submit form .I create a quiz app so i need to print only one question on each but in my for each It as multiple question.
$.each(function(index,data){
//execute first loop and pause
//i will append some form here .and when i submit this form now continue next loop
});
$.each(data.jobseek, function(index,element){
// alert(element.job_title);
$('#assessmentjoblist').append('<li><a href="#" onclick="detailviewjoblist('
+element.assessment_id
+')"<div class="col-xs-8" > <div class="row" style="margin-bottom: 0"> <div class="col-xs-4">
<div class="box" style=" text-align: center; padding-top: 14px;"><img src="img/ment.jpg" width= "72x" height="72px" ></div>
</div> <div class="col-xs-8" style="color:black">
<div class="box" style="padding-top: 10px"><i class="zmdi zmdi-card-travel"></i><span style="font-family: sans-serif;font-weight: bold;font-size: 15px;text-transform:capitalize"> '
+element.assessment_title
+'</span><br>
<span>Assessment_marks: </span><span style="color: gray; font-style: italic;">'
+element.assessment_total_marks
+'</span><br><span style=""> assessment_skills: </span><span style="color: gray">'
+element.assessment_skills
+' </span><br> </div> </div></div> </a> <hr style="margin:0"> </li>');
});
this is how my loop looks
Related
I'm trying to get the announcement index announcement[0] for each announcement in the code below but I keep getting the same index at [0] when i console.log which is 17 even if I click on a different announcement rendered from the loop. How do I capture every announcement ID [17,18,19....] separately in JavaScript?
<t t-foreach="widget.announcements" t-as="announcement">
<div class="col-sm-12 col-lg-12 hr_announcement" style="padding:0;">
<div class="text-color">
<div class="">
<div class="media">
<div class="media-body">
<h2 id="announcementID" class="text-color display-6" style="font-size: 11px; visibility: hidden;"><t t-esc="announcement[0]"/> </h2>
<h2 class="text-color display-6" style="font-size: 11px;"><t t-esc="announcement[1]"/> </h2>
<p><b><t t-esc="announcement[2]"/></b></p>
<h2 class="text-color display-6" style="font-size: 11px;"><b>Start Date:</b> <t t-esc="announcement[3]"/> - <b>End Date:</b> <t t-esc="announcement[4]"/></h2>
</div>
</div>
</div>
</div>
</div>
</t>
JavaScript Part:
hr_announcement: function(e) {
let announcementID = document.getElementById('announcementID').innerHTML;
console.log(announcementID)
e.preventDefault();
},
I have a card detail order, I want the whole card to be clickable and it will trigger a button inside the card to bring up the modal details. I've made the code as below but there is a Maximum call stack size exceeded error and also my console.log('clicked') is triggered hundred times.
how to handle this? please help me
$(document).ready(function(){
$(".order-list-detail-container").each(function() {
$(this).on("click", function() {
console.log('clicked')
$(this).find('.order-detail-trigger').click()
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-list-detail-container" style="margin-bottom:30px;">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T123456</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1200</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 6", RBG6</div>
<div class="product-catalog-code">RBG6</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">3 Product</span>
<div class="product-weight">(8 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="order-list-detail-container">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T127890</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1800</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 8", RBG8</div>
<div class="product-catalog-code">RBG8</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">2 Product</span>
<div class="product-weight">(3 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Working example. You only need to make trigger for a button when you click Container. And when you click button - it's default button behavior. In both ways you will now have hx-get working.
$(document).ready(function() {
$('.order-list-detail-container').on('click.div', function() {
$('.order-detail-trigger').trigger('click.button');
console.log('clicked');
});
Update 1: If you want different buttons and cards to do different stuff, add numbered ID's for buttons and DIV's use this code:
$('#order-list-detail-container-1').on('click.div',function(){
$('#order-detail-trigger-1').trigger('click.button' );
console.log('1 button or DIV clicked');
});
$('#order-list-detail-container-2').on('click.div',function(){
$('#order-detail-trigger-2').trigger('click.button' );
console.log('2 button or DIV clicked');
});
// duplicate the code block for amount of buttons with Divs you are going to have
Update 2: Added functionality to create ID dynamically to every button and DIV. So you won't need to add any ID's manually when you will create more cards! Also, every button or div click will be counted as individual click and button 1 click won't trigger button 2 clicks:
$('.order-detail-trigger').each(function(index) {
$(this).attr('id', 'button-' + index);
});
$('.order-list-detail-container').each(function(index) {
$(this).attr('id', 'container-' + index);
});
$( document ).ready(function() {
$('.order-list-detail-container').each(function(index) {
$('#container-' + index).on('click.div',function() {
$('#button-' + index).trigger('click.button');
let test = $('#container-' + index).attr('id');
let test2 = $('#button-' + index).attr('id');
//console.log('clicked');
console.log(test + ' clicked!');
console.log(test2 + ' AUTO clicked!');
});
});
});
Uncomment //console.log('clicked'); to see that clicking DIV or Button - it only happens 1 time:
update: made more progress to show all child elements- https://jsfiddle.net/zigzag/jstuq9ok/11/ Now just need to address this for subsecond area to display also. If you now click on Lily, shen and another shen show up but if you now click on shen to drill down, it just hides it. thoughts?
I want to be clear that in this case data is coming from a source system, so we won't want/like to hard code things. That said, here is the structure we want...
Adam
Lily
2.1 Sen
2.1.1 Tank
2.2 Another Sen
Justin
Thanks to online contributing community, I got that far . progress: https://jsfiddle.net/zigzag/jstuq9ok/10/
You will notice that when you click on Lily, you will only see Sen and not the Another Sen. I tried placing markup with 2.2 ahead of 2.1.1 and vice versa but neither worked. I'm sure i'm missing something in jQuery DOM traversal.
$('.menu-toggle').click(function(e) {
e.preventDefault(); // prevent <a> to redirect to the top of the page
$('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
$(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
var Nextrow = $(this).closest('.row').next('.row'); // get the next row
if (Nextrow.hasClass('sub')) { // if next row has class sub
$('.sub').not(Nextrow).hide(); // hide all sub but not this one
Nextrow.slideToggle(function() {
if ($(this).is(':hidden')) {
$('.subsecond').hide();
$('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
}
}); // toggle this sub row
return false;
}
if (Nextrow.hasClass('subsecond')) { // if next row has class subsecond
$('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
Nextrow.slideToggle(); // toggle this subsecond row
return false;
}
});
.pageArea {
background-color: black;
}
.orgChart {
margin: 10px;
padding: 10px;
background-color: gray;
font-family: segoe UI;
color: white;
}
.img_title {
vertical-align: middle;
}
.empDetails {
font-size: 14px;
color: white;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: white;
}
.toggle_class {
text-align: right;
}
.sub {
display: none;
margin-left: 20px;
}
.subsecond {
display: none;
margin-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pageArea">
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Adam
</h4>
<p>
Director
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
</div>
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Lily
</h4>
<p>
Project Manager
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart sub">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Sen
</h4>
<p>
Team Lead
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart sub">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Other Sen
</h4>
<p>
Team Lead
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
</div>
<div class="row orgChart subsecond">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Tank
</h4>
<p>
Designer
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Justin
</h4>
<p>
Director
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
</div>
Your are changing only "next" row. ( $(this).closest('.row').next('.row'); ) I guess you wan`t to target next AND all the siblings rows.
As Temani pointet in his comment would be easier if you make nested divs grouping the rows that should open together.
$('span').click(function(){
$('.sublevel').addClass('toClose');/*close all*/
$(this).next('.sublevel').removeClass('toClose');/*but not the one after this toggler*/
$(this).next('.sublevel').parents('.sublevel').removeClass('toClose');/*and also keep open it's ancestors*/
$('.sublevel.toClose').hide();/*hide ones to close*/
$('.sublevel:not(.toClose)').show();/*show the others*/
$('.sublevel.toClose').removeClass('toClose');/*tidy up*/
}
);
div{padding-left:2rem;}
.sublevel{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
1 Adam
</div>
<div>
2 Lily<span>[toggler]</span>
<div class="sublevel">
<div>
2.1 Sen<span>[toggler]</span>
<div class="sublevel">
2.1.1 Tank
</div>
</div>
<div>
2.2 Another Sen
</div>
</div>
</div>
<div>
3 Justin<span>[toggler]</span>
<div class="sublevel">
<div>
3.1 someone
</div>
<div>
3.2 someother<span>[toggler]</span>
<div class="sublevel">
3.1.1 this one
</div>
</div>
<div>
3.3 someother 2
</div>
<div>
3.4 someother 3
</div>
</div>
</div>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?
Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.
I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)
I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});