Develop Reference

Hide div on click with Javascript (a click that already show other div)

I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.
The function works, but I want the question and the answer buttons to disappear after the visitor has voted, I.e. hide the div #pagefeedback.
I've tried all my tools, but I cant get this to work.
Help would be very much appreciated!
This is the JavaScript used:
function showFeedback1() {
document.getElementById('feedbackDiv1').style.display = "block";
function showFeedback2() {
document.getElementById('feedbackDiv2').style.display = "block";}
This is the HTML used:
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>
Kind regards,
Pete

Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.
function showFeedback(feedback) {
document.getElementById(feedback).style.display = "block";
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>

If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.
function showFeedback(feedback) {
if (feedback == 'yes') {
document.getElementById('feedbackDiv1').style.display = "block";
} else {
document.getElementById('feedbackDiv2').style.display = "block";
}
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">
Was this information useful to you?
</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center">
<a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
</a>
</td>
<td align="center">
<a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
POSITIVE FEEDBACK
</div>
</div>
<div align="center">
<div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
NEGATIVE FEEDBACK
</div>
</div>
</div>

Displaying a section of a HTML page in another HTML page

I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.

http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]

Append multiple link-turned-variables once per section

The title is not really clear, but I'm not sure how to phrase it. I'm working on an ecommerce site with uneditable HTML, and I'm trying to add an additional links to each product that is displayed in a page that lists multiple products. I want to move ONE link per ONE product, each one unique to it's own product. I'm trying to do this via jQuery. Here is the relevant HTML:
<tr>
<td valign="top" width="33%">
<div>
**<a href="http://www.site.com/Prodcut1.htm" class="productnamecolor colors_productname" title="Product 1">**
<span itemprop='name'>
Product 1 </span>
</a>
<br/>
<div>
<div>
**<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$16.00</span></font></b>**
</div>
<img src="Shipping_Small.gif">
</div>
</td>
</td>
<td valign="top" width="33%">
<div>
<a href="http://www.site.com/Product2.htm" class="productnamecolor colors_productname" title="Product 2">
<span itemprop='name'>
Product 2 </span>
</a>
<br/>
<div>
<div>
<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$9.00</span></font></b>
</div>
<img src="Shipping_Small.gif">
</div>
</td>
</td>
<td valign="top" width="33%">
<div>
<a href="http://www.site.com/Product3.htm" class="productnamecolor colors_productname" title="Product 3">
<span itemprop='name'>
Product 3 </span>
</a>
<br/>
<div>
<div>
<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$8.00</span></font></b>
</div>
<img src="Shipping_Small.gif">
</div>
</td>
</td>
</tr>
This is essentially displaying a row of three products' essential information. Im trying to take the link at the top of each and append it next to where the price is shown. Ive added asterisks around the two relevant lines for the first product. These asterisks are NOT in the code.
Here's the jQuery i've tried to accomplish this:
$(function() {
$('.productnamecolor').each(function() {
var clicky = $(this).attr('href');
$("<a href='" + clicky + "'>click here</a>").insertAfter($(".pricecolor"));
});
});
This code is inserting EVERY link on the page after EVERY products' price. I've also tried adding .first() to the end of .pricecolor, but this just adds EVERY link to ONE product. Does anyone have any insights or clarification as to what I'm doing wrong here?

You need to target specific element. Try:
$('.productnamecolor').each(function () {
var $anchor = $('<a/>', { //construct anchor
href:this.href, //get href of current item
text: "click here"});
//now target to insert only to the pricecolor of its own
$anchor.insertAfter($(this).closest('td').find(".pricecolor"));
});
Fiddle
when you just do $(".pricecolor") it inserts the same anchor to all of the pricecolor's

Check if tag/class exists several tags down?

I have this layout, and I want to check the innerHTML of the .pricecolor class while cycling through each .productnamcolor class:
<tr>
<td valign="top" width="33%">
<div>
**<a href="http://www.site.com/Prodcut1.htm" class="productnamecolor colors_productname" title="Product 1">**
<span itemprop='name'>
Product 1 </span>
</a>
<br/>
<div>
<div>
**<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$16.00</span></font></b>**
</div>
<img src="Shipping_Small.gif">
</div>
</td>
</td>
<td valign="top" width="33%">
<div>
<a href="http://www.site.com/Product2.htm" class="productnamecolor colors_productname" title="Product 2">
<span itemprop='name'>
Product 2 </span>
</a>
<br/>
<div>
<div>
<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$9.00</span></font></b>
</div>
<img src="Shipping_Small.gif">
</div>
</td>
</td>
<td valign="top" width="33%">
<div>
<a href="http://www.site.com/Product3.htm" class="productnamecolor colors_productname" title="Product 3">
<span itemprop='name'>
Product 3 </span>
</a>
<br/>
<div>
<div>
<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$8.00</span></font></b>
</div>
<img src="Shipping_Small.gif">
</div>
</td>
</td>
</tr>
There are 3 repetitions here, and I've put asterisks around the two relevant lines of the first one. These asterisks are not in the real code.
Here's the jQuery I've tried:
$(document).ready(function() {
$('.productnamecolor').each(function() {
var test = $('.pricecolor').innerHTML;
console.log(test);
});
});
I've also tried:
$(document).ready(function() {
$('.productnamecolor').each(function() {
var test = $(this).closest('b').innerHTML;
console.log(test);
});
});
Both of these always tell the console it's undefined.
What I really need is, sometimes in one of these HTML product blocks, the <span class="PageText_L483n">$8.00</span> is entirely missing from the <b><font class="pricecolor colors_productprice"> </font></b>. THAT'S what I need to check with the jQuery.

Your selection is incorrect, you need to look for pricecolor of the respective productnamecolor section.
try
$('.productnamecolor').each(function() {
var test = $(this).closest('div').find('.pricecolor').html();
console.log(test);
});
Confused reading your last statement, if you want to find all .productnamecolor that doesn't have the span with the classname you can do:
$('.pricecolor:not(:has(".PageText_L483n"))')
.closest('td')
.find('.productnamecolor');
Demo

JQuery. Send ajax query for each row in table

I have found many answers about my problem, but problem not resolved
I have table, with data, example:
<table>
<tr>
<td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a id="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a id="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a id="bar" href="#"> Data 4 </a> </td>
</tr>
<tr>
<td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a id="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a id="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a id="bar" href="#"> Data 4 </a> </td>
</tr>
</table>
I need:
For each row in this table, get values of links with id="query" and id="foo" in current row and send ajax query
I try to do this:
$("#detect_rel").click(function(){
$('tr').each(function() {
// ajax to: ajax.php?query=xxxx&data=&xxxxx
});
});
But i cant get inner text of <a id="query"... and <a id="foo"... both, for current row
I tried something like this:
$('tr').each(function() {
var cols = $('.1, .2', this);
// do something with cols
});
But it doens't help, because i cant (mb not enough js knowledges) get inner text of <a id="query"... and <a id="foo"... both, for current row
Pseudocode:
get row
get value of link in column_one and column_two
send ajax query
get next row
etc
NOTE: <a href... at each cell, needed for 'bootstrap x editable', and cuz of it, i need use id at each link
PROBLEM RESOLVED, thanks guys

In HTML ID's must be unique whereas classes can occur multiple times in the page. To do what you ask, your HTML should look like this:
<table>
<tr>
<td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a class="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a class="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a class="bar" href="#"> Data 4 </a> </td>
</tr>
<tr>
<td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a class="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a class="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a class="bar" href="#"> Data 4 </a> </td>
</tr>
</table>
And your jQuery code should do something like this:
$('#detect_rel').click(function() {
$('tr').each(function(i, el) {
var query = $(el).children('td').children('.query').text();
var text = $(el).children('td').children('.text').text();
//$.ajax (do your AJAX call here using values of query and text
});
});
I tested this code on JSFiddle just now and it works.
Demo: http://jsfiddle.net/Pt2Vd/