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
Related
I am making a custom field for the Advanced Custom Fields plugin for wordpress.
Now I have been able to allow javascript to be used inside of the field but the field has UI-sortable active which makes my anchor tag not firering but instead clicks the sortable anchor.
Is there a way to make sure that my click event gets fired inside a sortable element?
So I created this link, to be placed inside a element :
<a id="addTable" href="#">Voeg tabel toe</a>
Which gets turned into an element like this :
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<div id="acf-group_5a93d53605864" class="postbox acf-postbox seamless">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">paneel Bridge verbergen</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle ui-sortable-handle">
<span>Bridge</span>
<a href="{link}/wp-admin/post.php?post=12695&action=edit"
class="dashicons dashicons-admin-generic acf-hndle-cog acf-js-tooltip"
title="Bewerk groep">
</a>
</h2>
<div class="inside acf-fields -top">
<div class="acf-field acf-field-Bridge acf-field-5a93d538671c7"
data-name="bridge"
data-type="Bridge" data-key="field_5a93d538671c7">
<div class="acf-label">
<label for="acf-field_5a93d538671c7">Bridge</label>
</div>
<div class="acf-input">
<!-- Here is the anchor tag -->
<a id="addTable" href="#">Voeg tabel toe</a>
<div id="ContentWrapper">
<div id="North"></div>
<div id="East"></div>
<div id="Middle">
<table bgcolor="#c0c0c0">
<tbody>
<tr>
<td colspan="3" align="center"><strong>N</strong></td>
</tr>
<tr>
<td align="left"><strong>W</strong></td>
<td> </td>
<td align="right"><strong>O</strong></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Z</strong></td>
</tr>
</tbody>
</table>
</div>
<div id="South"></div>
<div id="West"></div>
</div>
</div>
</div>
<script type="text/javascript">
if ( typeof acf !== 'undefined' ) {
acf.postbox.render({
"id": "acf-group_5a93d53605864",
"key": "group_5a93d53605864",
"style": "seamless",
"label": "top",
"edit_url": "http:\/\/{link}\/wp-admin\/post.php?post=12695&action=edit",
"edit_title": "Bewerk groep",
"visibility": true
});
}
</script>
</div>
</div>
</div>
(function($) {
$("#addTable").click(function () {
alert( "Click" );
});
})(jQuery);
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 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/
I have a group of images with captions (from http://www.hongkiat.com/blog/css3-image-captions/) and would like to be able to click on them and have them overlay either a hidden div or load an external page as an overlay (I'm not fussed on either as long as it works!). I'd also like each image to link to a different page/div. I've tried lots of things without success so much help would be appreciated. Here's my code for the images (and yes one appears twice for testing purposes):
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>
per your 2nd question in the comments "I can't even get a simple a link to bring up the popup. I'm kinda new to JQuery so how should I link to JQuery, where should I put the script and how do I implement the img and attr things you're on about?", here is a screenshot that shows everything you need.
I built a fiddle for you that does what you're trying to do. Without knowing which unique values of the images you intend to use to load the related page, i provided some sample code:
working fiddle is here:
http://jsfiddle.net/acturbo/YVBpj/
javascript:
$().ready(function() {
$("#close").on("click", function(){
$("#popup").hide();
});
// uncomment this line to attach this "showWindow" to all the images
// then, use $(this) to access the specific image that was clicked
//$("img").on("click", function(){
$("#showWindow").on("click", function(){
// when you switch to images, you can access unique attributes
// of the clicked image using attr()
// this will let you load unique pages for each image
// eg. can use 1 or 2
// var value1 = $(this).attr( "src" );
// var value2 = $(this).attr( "id" );
//$("#popup").load( value1 );
$("#popup").show();
});
});
html:
<div id="popup">
<p>this is hidden until the image is clicked</p>
Close Window
</div>
<a href="#" id="showWindow">Show Window - mimic an image click</p>
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>
css
#popup{
top: 10px;
left: 10px;
width: 300px;
height: 100px;
position: absolute;
background: red;
display: none;
}
That is easy with CSS only.
Take a llok at this fiddle : http://jsfiddle.net/VgLVq/
To make the div clickable, just wrap it in a <a> tag with the URL you want.
Then make the .box in position: relative and every of his children in position: absolute. I used the selector .box>*.
Then make the .caption in display:none and add this CSS to detecte the hover :
a:hover .caption{
display:block;
}
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();