I have this code that is a couple of links with divs inside them. When i click on one of the links it pops another div up that fills out using the "Case No" and "Type". However it only uses the data from the first link, not any other that i click.
HTML
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
and the javascript is
$('.plu-view-data a').click(() => {
$("#pedlookup-overlay").css('display','block')
var type = $(this).find('#type').text()
var caseno = $(this).find('#case_no').text()
$('#plu-overlay-headbar').find('p').html(type+" || "+caseno)
})
Any idea as to why when i click the link it only uses the first link information?
The one tradeoff with using arrow functions is that there is no binding of this. To get it's context back you unfortunately have to go back to using the traditional function syntax (as it currently stands).
$('.plu-view-data a').click(function() {
...
});
You have duplicated id 'type' in your html. please change it.
$('.plu-view-data a').click(function() {
$("#pedlookup-overlay").css('display', 'block')
var type = $(this).find('#type').text();
var caseno = $(this).find('#case_no').text();
if (type && caseno) {
console.log(caseno);
$('#plu-overlay-headbar').find('p').html(type + " || " + caseno)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
Related
My issue is I am only able to toggle "active" class on my first "side-menu" div and not the others. Please take a look at my codes and let me know what is wrong.
When active, there will be a span on the left showing that it is the current selection, refer to the attached image.
HTML SCRIPT
<div class="sidebar">
<div class="side-menu">
<a class="side-option" href="#beverages"><img src="images/beverage.png" alt=""></a>
<p>Beverages</p>
</div>
<div class="side-menu">
<a class="side-option" href="#burger"><img src="images/burger2.png" alt=""></a>
<p>Burger</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pizza"><img src="images/pizza1.png" alt=""></a>
<p>Pizza</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pasta"><img src="images/pasta2.png" alt=""></a>
<p>Pasta</p>
</div>
<div class="side-menu">
<a class="side-option" href="#sides"><img src="images/sides1.png" alt=""></a>
<p>Sides</p>
</div>
<div class="side-menu">
<a class="side-option" href="#desserts"><img src="images/desserts1.png" alt=""></a>
<p>Desserts</p>
</div>
</div>
CSS SCRIPT
.side-menu.active p::after{
content: '';
background-color: var(--clr-primary);
width: 10px;
height: 100px;
position: absolute;
left: 0px;
top: 5px;
JS SCRIPT
let sidemenu = document.querySelector('.side-menu')
let fbg = document.querySelector('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.classList.toggle('active')
fbg.classList.toggle('active')
}
I can toggle active class on the "beverages" but not on the other options such as burger, pizza...
According to MDN
querySelector() returns the first Element within the document that matches the specified selector
You want to use querySelectorAll(), then iterate through the output and toggle the class for each element.
Something like this
let sidemenu = document.querySelectorAll('.side-menu')
let fbg = document.querySelectorAll('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.forEach((i) => {
i.classList.toggle("active")
})
fbg.forEach((i) => {
i.classList.toggle("active")
})
}
How can I make a div tag stay the same location with the same size? I have the following code to display information using left and right pane called group-left and group-right. When the content of group-right changes the group-left height changes. I want a fixed size and fixed position if the content grows.
<div class="pane even">
<div class="group-left bg-highlight" style="top: 0px;">
<div class="pane-content">
<p class="m-t-md">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul class="list-unstyled m-x-md m-b-md">
<li data-expanded="true"> <i class="fas fa-check-circle">
</i> #item.ContactName </li>
</ul>
</li>
}
</p>
</div>
</div>
<div class="group-right" style="top: 0px;">
#foreach (var item in rpInfo)
{
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div
}
</div>
</div>
Here is what the CSS section looks like:
.group-left, .group-right {
float: none;
min-height: 320px;
vertical-align: middle;
position: relative;
margin: 0;
padding: 0;
}
I have this javascript code to make a treeview and to handle the Onclick event:
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView();
$(".panel-handler ").click(function () {
let id = $(this).data("id");
if ($("#" + id).css('display') === 'none') {
$(".rpspanel ").slideUp();
$("#" + id).slideDown();
}
});
});
</script>
You have only set a min height on the divs, you need to specify a height if you want it to remain the same size, eg: "height: 300px". If you want the divs to be fixed on the page, meaning locked to that position and won't move even if you scroll, you need to apply "position: fixed".
I am trying to create a comparison overlay that shows items selected by users when they 'add to compare' link.(like one in flipkart that appears on top when you hit add to compare). Here is my code:
<div class="college-list-container">
<div class = "individual-college-container" id="text1">
<div class="image-header"><h3>text1</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison" id="comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container">
<div class="image-header"><h3>text2</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container" id="itm">
<div class="image-header" ><h3>text3</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
Javascript
/show overlay when one checkbox is checked and add its name/image to the empty space
$('.comparison').click(function(e){
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
e.preventDefault();
var clg = $("<li></li>")
clg.text(clgId);
var removeLink = $("<a href=''>(Remove)</a>");
clg.append(removeLink)
$('.comparison-colleges').append(clg);
$('.add-to-compare-overlay').show("slide", { direction: "up" }, 300);
});
I want the text in the div containing class 'image-header' to be assigned to the variable clgId. The problem that i am facing with my code is that it is adding the text of all the divs containing class 'image-header'. Ex i want the value text1 to be assigned on clicking add to compare of the div with id text1. However it assigns 'text1 text2 text3' to clgId.
Please help
I've created a JSFiddle with what I think is your desired functionality (I included a console log output in the script of the clgId variable):
http://jsfiddle.net/py38kuvv/
I replaced the parentsUntil function with the closest function (and replaced the individual-clg-container class selector):
var clgId = $(e.target).closest('.individual-college-container').find('.image-header').text();
and also updated your click handler:
$('.comparison').on( "click", function(e) {
In order to get a quicker response in future, posting a JSFiddle of what you have so far makes it easier for others to help :)
It is adding all of them because
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
should be
var clgId = $(this).parentsUntil('.individual-college-container').find('.image-header').text();
can anyone please tell me why i'm getting undefined in javascript when i run the below code.
its a simple code for getting the parent div id. All div's are closed properly but still getting undefined.
html
<div id="ricolaId_2" class="ricMo ricIndex ricBlocking ricInline" style="width: 730px; left: 309px; top: 144px; z-index: 13000; display: block;">
<div class="ricTitle">
<a class="ricClose">
<span class="ui-icon ui-icon-close" title="Close">
</span>
</a>
<span class="ricTitle">Manage</span>
</div>
<div class="ricModal ng-scope" style="height: auto;">
<div>
<div>
<div ng-controller="Manage" class="ng-scope">
<div class="ricCenter">
<div class="ricport">
<div class="ricWr">
</div>
</div>
</div>
</div>
<br style=""></br><br style=""></br>
<div align="center" class="row btn-group">
<button onclick="cancel(this)" class="ricSmall" type="button" id="sss" ric:loaded="true">Close</button>
</div>
</div>
</div>
</div>
</div>
script
function cancel(btn)
{
try{
ricId_1 = $(btn).parent().parent();
alert(ricId_1.attr("id"));
}catch(a){alert(a);}
}
To target that id you need:
$(btn).parent().parent().parent().parent().parent();
or:
$(btn).closest('.ricModal').parent();
Demo
Use parents instead of .parent()
function cancel(btn)
{
try{
ricId_1 = $(btn).parents('#ricolaId_2');
alert(ricId_1.attr("id"));
}catch(a){alert(a);}
}
parent method only travels a single level up the DOM tree and parents method travels through multiple level up the DOM tree.
I changed a few things, and look: It's working! You should add an id to ng-scope So, http://jsfiddle.net/8F8Mr/7/
Update
http://jsfiddle.net/8F8Mr/9/
I want to insert a span with a class using javascript inside this h5 tag which will apply to the first word:
<div class="container_skitter" style="width: 715px; height: 230px;">
<div class="image">
<a href="#">
<div class="label_skitter" style="width: 715px; display: block;">
<h5>Increase knife life</h5>
</div>
</div>
</div>
After
<div class="container_skitter" style="width: 715px; height: 230px;">
<div class="image">
<a href="#">
<div class="label_skitter" style="width: 715px; display: block;">
<h5><span class="firstword">Increase</span> knife life</h5>
</div>
</div>
</div>
Is it something like this?
<script>
$('h5').html(function (i, html) {
return html.replace(/(\w+\s\w+)/, '<span>$1</span>')
});
</script>
Can't seem to get it to work.
Thanks
Add this under document.ready. Your script runs too early before DOM has been loaded completely. Also you need to match only the first word so this is enough to select it. /(\w+\s)/
$(document).ready(function(){
$('h5').html(function (i, html) {
return html.replace(/(\w+\s)/, '<span class="test">$1</span>')
});
});
Fiddle
You are on the right track. Let's try and do this without JQuery!
<script>
Array.prototype.slice.call (document.querySelectorAll ('h5')).forEach
function (h5el) {
// we will come here with h5el referencing an h5 of the document
h5el.innerHTML = h5el.innerHTML.replace (/^(\w+)\s/,
'<span class="firstword">$1</span> ';
});
</script>
Place this script just before or just after the tag and presto, all your h5 elements will be modified.