Get id of link that opened the popup - javascript

I have a table with column that has a "view" link to view popup. On the popup,
I have a search button I want to get the id of the view link that opened the popup,
when I press search in the popup typically to get some data attributes
associated with each table link..(ex. $this.thisIdopenedMe)
<div id="popup" class="popup">
<input type="button" id="searchbtn" onclick="alert($('#smthing??').data("feature"))">
</div>
<table>
<tr> <div id="viewlink" data-feature="alfa" onclick="openPopup("popup")"></div> </tr>
<tr> <div id="viewlink" data-feature="gama" onclick="openPopup("popup")"></div> </tr>
<tr> <div id="viewlink" data-feature="bita" onclick="openPopup("popup")"></div> </tr> ...
</table>

I would just use vent delegation and assign more data listeners if you are going to follow the pattern you are using.
var table = document.querySelector("table");
var popUp = document.querySelector("#popup");
var btnSearch = document.querySelector("#searchbtn");
table.addEventListener("click", function (event) {
var target = event.target;
var elem = target.closest('[data-feature]');
if (elem) {
var selection = elem.dataset.feature;
popUp.classList.toggle("active");
btnSearch.dataset.item = selection;
}
});
btnSearch.addEventListener("click", function (event) {
console.log(btnSearch.dataset.item);
});
.popup {
display: none;
}
.popup.active {
display: block;
}
<div id="popup" class="popup">
<input type="button" id="searchbtn" value="search">
</div>
<table>
<tr> <td><div id="viewlink" data-feature="alfa">A</div></td></tr>
<tr> <td><div id="viewlink" data-feature="gama">B</div></td></tr>
<tr> <td><div id="viewlink" data-feature="bita">C</div></td></tr>
</table>

You can create a global variable selectedFeature and in your openPopup function set that variable to the value of the data attribute so you have it on hand when you need it on search button click.
To get the select element data attribute, you can pass the event from the onclick event to your openPopup function.

function openPopup(div_id, data) {
popup = document.getElementById(div_id);
popup.dataset.feature = data;
console.log(popup.dataset);
}
function showData(div_id) {
popup = document.getElementById(div_id);
console.log(popup.dataset.feature);
}
<div id="popup" class="popup" data-feature="">
<input type="button" id="searchbtn" onclick="showData('popup')" value="press me">
</div>
<table>
<tr>
<div id="viewlink" data-feature="alfa" onclick="openPopup('popup',this.dataset.feature)">
alfa
</div>
</tr>
<tr>
<div id="viewlink" data-feature="gama" onclick="openPopup('popup',this.dataset.feature)">gama
</div>
</tr>
<tr>
<div id="viewlink" data-feature="bita" onclick="openPopup('popup',this.dataset.feature)">bita
</div>
</tr>
</table>

Related

I want the table to have hidden input fields which appear only when I click on them

My table has text input fields, which should be hidden when the page load and appear when I click on them. This is what I have tried and it isn't working. But the reverse is working, i can make the field disappear when i click on it.
<div class="container-fluid">
<table id="sampleGrid" class="table">
<thead>
<tr>
<th>Fat (Z10006)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="col-xs-8" name="Fat" ng-if="visible" ng-click="hidden()"></td>
</tr>
</tbody>
</table>
</div>
var sampleApp =angular.module('sampleApp',[]);
sampleApp.controller('gridController',function($scope,$http) {
$scope.visible = false;
$scope.hidden = function () {
$scope.visible = true;
};
})
try ng-show instead of ng-if
<input type="text" class="col-xs-8" name="Fat" ng-show="visible" ng-click="hidden()">
A small change was to be made. ng-click should be inside the so that the cell would appear on click.
<td ng-click="hidden()"><input type="text" class="col-xs-8" name="Fat" ng-if="visible"></td>

Add a sample row to a table dynamically

I have a table as follows:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Remove">Remove</a>
</td>
</tr>
</table>
And I have a hyperlink:
<a class="Clone">Add</a>
What I need to do is to add the <tr class="Sample"> into the table each time I click on the
<a class="Clone">
and remove a row when I click on the <a class="Remove"> corresponding to that row.
I tried as follows :
<script>
$(document).ready(function(){
$('.Clone').click(function(){
$('#shipping').append('.Sample');
});
});
</script>
But on clicking the hyperlink the text ".sample" gets written into the table. How can I do it ?
Try:
$('a.Clone').click(function () {
$('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
$(this).closest('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td> <a class="Remove">Remove</a>
</td>
</tr>
</table> <a class="Clone">Add</a>
The first part clones the input and appends it to the table. The second part handles removing the rows (leaving the top row).
When add button is clicked call this function:
function myAddFunction(){
var html = "<tr class=Sample><td><input type=text></td><td><a class=Remove>Remove</a></td></tr>"
$('#shipping').append(html);
}
When remove button is clicked call this function:
function myRemoveFuncion(){
$(this).closest('tr').remove();
}
Hopre it helps.
I've just wrote a script for you
$( document ).ready(function() {
$(".Remove").on("click", function() {
$(this).parent().parent().remove();
});
$(".Clone").on("click", function() {
var row = $('#shipping tr:last').clone(true);
row.insertAfter('#shipping tr:last');
});
});
try this fiddle
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#shipping').on('click', 'a.Clone', function(e){
e.preventDefault();
$('table#shipping').append( $(this).closest('tr').clone() );
});
$('#shipping').on('click', 'a.Remove', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
</script>
HTML:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Clone" href="#">Clone</a>
<a class="Remove" href="#">Remove</a>
</td>
</tr>
</table>

showing and hiding div on mouse over n mouse out in javascript

i have 3 divs with id 1,2,3 , all i want is to show div with id 2 when mouse over on div with id 1 and show div 1 when mouse out event on div 2. and along with that div 3 appears when a button is clicked on div 2 with id btn n if we mouse out of the div 3 again div 1 appears and and we again mouseover the div 1 div 3 appears. n they must appear at the same place...use javascript plz...here is simple html code...
<div id="1" style="position:absolute; height:200px; width:200px;">
<table width="100%" border="01">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="2" style="position:absolute; height:200px; width:200px;">
<table width="100%" border="01">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="button" id="btn"></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="3" style="position:absolute; height:200px; width:200px;">
<table width="100%" border="01">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
Something in Pure Javascript:
<script>
var div_one = document.getElementById("1")
var div_two = document.getElementById('2');
var div_three = document.getElementById('3');
var button = document.getElementById('btn');
var common_div = 2;
div_one.onmouseover=function(){
if(common_div==3)
div_three.style.display = 'block';
else
div_two.style.display = 'block';
div_one.style.display = 'none';
};
div_two.onmouseout=function(){
div_one.style.display = 'block';
div_two.style.display = 'none';
};
div_three.onmouseout=function(){
common_div = 3;
div_one.style.display = 'block';
div_two.style.display = 'none';
div_three.style.display = 'none';
};
button.onclick = function(){
div_three.style.display = 'block';
}
</script>
try
$( "#div2" ).mouseover(function() {
$("#div1").hide();
$("#div2").show();
});
More Info: LINK
EDIT: additional info LINK2
You need to include jquery first.
Then try
$('#div1').mouseover(function() {
$('#div1').style.display='none';
$('#div2').style.display='block';
});
$('#div2').mouseout(function() {
$('#div1').style.display='block';
});
$('#btn').onclick(function() {
$('#div3').style.display='block';
});
I hope, this works ;)
You could also try to use
$('#div1').style.visibility='hidden';
instead of
$('#div1').style.display='none';

How to select col id using jquery to hide via css

I have a table (and couldn't use because the header is offset by 1 when trying to hide the column) with each column having its own col id="". I want to use jquery in the following code to select the columns within the table and toggle them off and on.
Here is the table :
<article class="technical">
<div id="technical-container">
<h1><span id="technology">Technologies</span> / <span id="compliance">Compliance</span> / <span id="certification">Certification</span></h1>
<table id="tech-table" cellspacing="0">
<colgroup>
<col>
<col id="type" class="type">
<col id="name">
<col id="startdate">
<col id="currentenddate">
<col id="elapsed">
<col id="version">
<col id="rating">
<col id="project">
</colgroup>
<tbody>
<tr>
<td>type</td>
<td>Name</td>
<td>Start Date</td>
<td>Current/End Date</td>
<td>Elapsed</td>
<td>Version(s)</td>
<td>Personal Rating</td>
<td>Project</td>
</tr>
<tr>
<td>technology</td>
<td>J2EE</td>
<td>November, 2011</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>1.5, 1.6, 1.7</td>
<td>2</td>
<td>Contractor Optimization</td>
</tr>
<tr>
<td>technology</td>
<td>JS</td>
<td>April, 2012</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>?</td>
<td>1</td>
<td>Resume Builder</td>
</tr>
<tr>
<td>compliance</td>
<td>CIP</td>
<td>May, 2008</td>
<td>August, 2011</td>
<td>TODO, 3 years, 4 mos</td>
<td>n/a</td>
<td>2</td>
<td>Protection</td>
</tr>
<tr>
<td>certification</td>
<td>Red Cross</td>
<td>May, 2007</td>
<td>April, 2013</td>
<td>TODO, 6 years</td>
<td>n/a</td>
<td>3</td>
<td>Life Saving</td>
</tr>
</tbody>
</table>
</div>
</article>
here are the buttons that get clicked to do the hiding:
<article>
<header>
<h1>What</h1>
<div class="mydiv">
<p1>this sections involves what I work with</p1>
</div>
</header>
<section>
<div class="mydiv">
<span id="what1"><button type="button" class="button" id="clickTech">Technologies</button></span> <span id="what2"><button type="button" class="button" id="clickComp">Compliance</button></span> <span id="what3"><button type="button" class="button" id="clickCert">Certifications</button></span>
<!-- <input type="button" class="btn" value="Technologies" id="clickTech" / -->
</div>
</section>
<section>
<h3><span id="whatsel2"><button type="button" class="button-vert" id="clickStart">Start Date</button></span></h3>
<h3><span id="whatsel3"><button type="button" class="button-vert" id="clickEnd">Current/End Date</button></span></h3>
<h3><span id="whatsel4"><button type="button" class="button-vert" id="clickElapsed">Elapsed Time</button></span></h3>
<h3><span id="whatsel5"><button type="button" class="button-vert" id="clickVersion">Version(s)</button></span></h3>
<h3><span id="whatsel6"><button type="button" class="button-vert" id="clickRating">Personal Rating</button></span></h3>
<h3><span id="whatsel7"><button type="button" class="button-vert" id="clickProject">Project</button></span></h3>
</section>
<!-- <footer>
<h2>footer</h2>
<p>footer</p>
</footer> -->
</article>
here is the working selector for hiding the rows:
var rowSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table tr").each(function(){
if ($($(this).children()[0]).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var hiders = {"#clickTech":"technology", "#clickComp":"compliance", "#clickCert":"certification"};
for (var id in hiders) {
$(id).click({type:hiders[id]}, rowSelector);
}
and this is what I have so far with the column selector, but need help with lines 3, 4, and 5:
var colSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table col").each(function(){
if ($($(this)).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in hiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
I appreciate your guidance and help.
Here's a javascript answer for you though if you don't want to use #jatrim's css solution
var colSelector = function (args) {
var num = 0;
var i = 0;
$($("#tech-table tr")[0]).find('td').each(function(){
if ($(this).text() == args.data.type)
num=i;
i++;
});
if (num!=0){
$("#tech-table tr").each(function(){
var tds = $(this).find('td');
$(tds[num]).toggle();
});
}
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in colHiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
Also the fiddle to test is here http://jsfiddle.net/ueKcL/
I think what you want is here: show/hide html table columns using css.
I particularly like this: $('td:nth-child(2)').hide(); Where 2 is the index of the column you'd like to hide.
You can probably do something like - add title (or another attribute to col tag) to col tag, and the value of title is the index of the column. So col id="name" would be
<col id="name" title="2">
ignoring the first empty col tag. then you will have to target the td using :nth-child (the title attribute) and hide them all.
You don't need to add title and still be able to figure out the index of the col but it simplifies the script using an attribute
OR
you can even pass the column index on the click of the buttons, there are a number of ways to do that as well. But eventually you still need to use :nth-child to hide the td

HTML input popup calendar issue

I am trying to pop a calendar control when a user clicks on an input field. The calendar control is actually a div section for calendar which I am trying to toggle the display. The issue is when I click on the input, the calendar does not show up. But the catch is, when I change the position property of input from "relative" to "fixed", then the calendar shows up but relative to the browser. I want it to be displayed relative to the input field.
<script>
function showCalendar(startDate)
{
try{
//var inputElement = document.getElementById(startDate);
var inputElement = document.getElementsByName(startDate)[0];
var divCalendar = document.getElementById('calendar');
var divContent = document.getElementById('content');
if(divCalendar.style.display == 'block')
{
divContent.appendChild(divCalendar);
//inputElement.style.position='fixed';
//divCalendar.style.position='fixed';
divCalendar.style.display = 'none';
//divCalendar.style.zindex = 0;
}
else
{
divCalendar.parentNode.removeChild(divCalendar);
inputElement.appendChild(divCalendar);
inputElement.style.position='relative';
divCalendar.style.position='absolute';
divCalendar.style.top=30;
divCalendar.style.left=30;
//divCalendar.style.zindex = 100;
divCalendar.style.display = 'block';
}
}
catch(e)
{
alert(e);
}
}
</script>
<body>
<div id="content">
<table id="bookingTable">
<tr>
<th colspan="4">Book Rentals</th>
</tr>
<tr>
<th colspan="4"><%=fileService.title%></th>
</tr>
<tr>
<td style="text-align:right;">Start Date</td>
<td style="text-align:left;">
<input style="cursor:pointer;" type="text" name="startDate" value="" onclick="showCalendar('startDate')">
</td>
<td style="text-align:right;">Start Time</td>
<td style="text-align:left;"><input type="text" name="startTime" value=""></td>
</tr>
<tr>
<td style="text-align:right;">End Date</td>
<td style="text-align:left;">
<input style="cursor:pointer;" type="text" name="endDate" value="" onclick="showCalendar('endDate')">
</td>
<td style="text-align:right;">End Time</td>
<td style="text-align:left;"><input type="text" name="endTime" value=""></td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">
<input type="submit" class="button" name="submit" value="Add" />
</td>
</tr>
</table>
<div id="calendar" style="display: none;">
Here is create a table dynamically which represent a calendar and which I am trying to toggle the display.
</div>
</div>
Try using this Javascript:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
And this HTML on your button that is toggling the calendar:
onClick="toggle_visibility('calendar');"
This simply displays/hides the div container with the ID of 'calendar'. You might have to put the calendar script itself inside your div, given that you don't need to pass variables to it via a control.

Categories