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/
Related
I have made a table to display a list of child pages in sightly. I want to work on pagination in the list. This is my slightly code snippet. I have tried different approches but still no success. I am new to javascript so I am facing issues in finding the best approach.Can please help me with the correct way to achieve this.
<tfoot>
<tr class="footable-paging">
<td colspan="5">
<div class="footable-pagination-wrapper">
<ul class="pagination" id="demo">
<li class="footable-page-nav disabled" data-page="first" aria-label="first page">
<a class="footable-page-link" href="${request.requestURL.toString}">«</a>
</li>
<li class="footable-page-nav disabled" data-page="prev" aria-label="previous" id="prev-page">
<a class="footable-page-link" href="${request.requestURL.toString}">‹</a>
</li>
<li class="footable-page visible active" data-page="1" aria-label="page 1">
<a class="footable-page-link" href="${request.requestURL.toString}">1</a>
</li>
<li class="footable-page visible" data-page="2" aria-label="page 2">
<a class="footable-page-link" href="${request.requestURL.toString}">2</a>
</li>
<li class="footable-page-nav" data-page="next" aria-label="next" id="next-page">
<a class="footable-page-link" href="${request.requestURL.toString}">›</a>
</li>
<li class="footable-page-nav" data-page="last" aria-label="last page">
<a class="footable-page-link" href="${request.requestURL.toString}">»</a>
</li>
</ul>
<div class="divider"></div>
<span class="label label-default"></span>
</div>
</td>
</tr>
</tfoot>
<tbody id="body">
<tr class="ninja_table_row_0 nt_row_id_157" id="tr" data-sly-repeat.child="${currentPage.listChildren}">
<td class="ninja_column_0 ninja_clmn_nm_logoname footable-first-visible" style="display: table-cell;">
<a href="${child.getProperties['path']}.html">
<img src="${child.getProperties['logo']}" alt="${child.getProperties['company']}">
</a>
</td>
<td class="ninja_column_1 ninja_clmn_nm_company" style="display: table-cell;">
${child.getProperties['company']}
</td>
<td class="ninja_column_2 ninja_clmn_nm_boothno" style="display: table-cell;">${child.getProperties['boothNo']}</td>
<td class="ninja_column_3 ninja_clmn_nm_country" style="display: table-cell;">${child.getProperties['country']}</td>
<td class="ninja_column_4 ninja_clmn_nm_profile footable-last-visible" style="display: table-cell;">${child.getProperties['profile']}</td>
</tr>
</tbody>
HTL/Sightly has iteration control for some time already, see the data-sly-repeat spec:
<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection # begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>
You can use that in conjunction with URL parameters to set the begin and end of your list page.
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>
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
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
I have the code:
// Get message
var PostTxt = $('#cid367', '.comment-txt').html();
PostTxt = $.trim(PostTxt);
It's trying to retrieve the comment from this structure:
<div id="cid367" class="comment-wrapper">
<div class="comment-head ch-highlight">
<div class="comment-date">
<abbr class="timeago" title="2011-04-25T15:15:52.4070000">25 April 2011 at 15:15:52</abbr>
</div>
<div class="comment-author">
Written by <a id="A1" title="Visit this game makers profile" href="../../../users/Tom">Tom</a>
</div>
</div>
<table class="comment-body" width="100%">
<tr>
<td width="100" valign="top" align="center">
<a id="A2" title="Tom makes games with Construct 2" href="../../../users/Tom"><img id="Img1" title="Tom's Gravatar" class="comment-avatar" src="http://www.gravatar.com/avatar/5271d3283db957ef3a86761ed15c1696?r=pg&s=80" /></a>
</td>
<td valign="top">
<div id="ModBox" class="comment-modbox" style="margin-left:-105px;">
<a id="CommentReportPost" title="Report this post" class="s comment-report"></a>
<a id="CommentDeletePost" title="Delete this post" class="s comment-delete" onclick="DeleteComment('367');return false;" href="JavaScript:void(0)"></a>
<a id="CommentEditPost" title="Edit this post" class="s comment-edit" onclick="EditComment('367');return false;" href="JavaScript:void(0)"></a>
<a id="CommentQuotePost" title="Quote this post" class="s comment-quote" href="JavaScript:void(0)"></a>
</div>
<div class="comment-txt">
My comment text to get
</div>
</td>
</tr>
</table>
<div class="clear"></div>
</div>
But it keeps returning null. Can anyone show me how this is done?
You have it the wrong way around. It should be
var PostTxt = $('.comment-txt', '#cid367').html();
Where the first argument is the child and the second argument is the parent container.
$(childSelector, parentSelector)
When dealing with selectors like this is often helpful to check the length to ensure the selector is working before struggling with the html method
// for debugging
alert($('.comment-txt', '#cid367').length); // if == 1 you're good
You are passing the parameters in the wrong sequence:
var PostTxt = $('#cid367', '.comment-txt').html();
It should be the other way round >
var PostTxt = $('.comment-txt', '#cid367').html();