I'm trying to get a copy-to-clipboard function to work for below HTML-code
using the Clipboard.js library:
<table id="test">
<tr><td class="c2c"><a id="1" class="btn fa fa-clipboard fa-2x" data-clipboard-action="copy" data-clipboard-target="1" data-value="http://some/link/1"></a></td></tr>
<tr><td class="c2c"><a id="2" class="btn fa fa-clipboard fa-2x" data-clipboard-action="copy" data-clipboard-target="2" data-value="http://some/link/2"></a></td></tr>
<tr><td class="c2c"><a id="3" class="btn fa fa-clipboard fa-2x" data-clipboard-action="copy" data-clipboard-target="3" data-value="http://some/link/3"></a></td></tr>
</table>
As you can see the value/ID changes for each td or a-element.
Instead of ID can I also use a class element to work with clipboard.js?
With this code I get the correct values but I cannot get it to work with clipboard.js:
$("#test").on('click', '.btn', function (e) {
e.preventDefault();
var id = $(this).data('value');
console.log(id)
});
How can I get the value of the data-value attribute for each td and have it copied with clipboard.js?
Thank you.
Related
I have images list and need to select image for album cover.
HTML:
<button type="button" id="imageCover1" class="btn btn-sm btn-success btn-image-cover" data-id="1">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover1" class="image-cover" value="">
<button type="button" id="imageCover2" class="btn btn-sm btn-success btn-image-cover" data-id="2">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover2" class="image-cover" value="">
JS:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageCover' + item_id).val('1');
$('#imageCover' + item_id).find('i').addClass('far fa-check-circle');
});
In action worked and change input value true But when i need to find i and change/add class jquery not find i. how to fix this problem?
It actually works.
The problem is that font awesome only renders one icon class. Change the addClass function to toggleClass like this:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageData' + item_id).val('1');
$('.btn-image-cover').not(this).find('i').removeClass('fa-check-circle').addClass('fa-circle');
$(this).find('i').toggleClass('fa-circle fa-check-circle');
});
JSFiddle link
The toggleClass will remove the "fa-circle" class when it is present and add the "fa-check-circle" class if it is not present, and vice-versa.
As noted by #Teemu, you also have same ids with your (button + input:hidden) pairs. I've changed the id of the input:hidden to start with "imageData" instead.
I have many <li> with specific data-id, want to get innerHtml of first <Div>
For Example on this sample, it would to be: "World"
<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>
This is my code, that doesn't help:
var target = $('[data-id="1123066248731271"]');
alert(target.firstChild.innerHTML);
document.querySelector('[data-id="1123066248731271"]').textContent
Maybe this is what you need?
Being a jquery element, you can use find() method to find all the div elements inside him, with first(), you get the first element, finally, with html(), you get its content.
var target = $('[data-id="1123066248731271"]');
alert(target.find('div').first().html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>
first problem $('[data-id="1123066248731271"]') returned a object of all elements with [data-id="1123066248731271"]. for target the first element, you need add [0] after : $('[data-id="1123066248731271"]')[0]
now if you want target the div element you need specify div into $ like: $('[data-id="1123066248731271"] div')[0]. Now you got the first div and you can get innerHTML with : target.innerHTML
The full code :
var target = $('[data-id="1123066248731271"] div')[0];
alert(target.innerHTML);
and without Jquery ( more simply i think ) :
var target = document.querySelector('[data-id="1123066248731271"] div');
alert(target.innerHTML);
Perhaps you want to use firstElementChild instead of firstChild?
Or you could use the CSS selector [data-id="1123066248731271"] > div:first-child:
var target = $('[data-id="1123066248731271"] > div:first-child');
alert(target.innerHTML);
Edit:
I noticed a translation error. I don't use jQuery myself, so instead of $ I used document.querySelector. But the behavior of $ corresponds to document.querySelectorAll instead. Sorry...
This should work fine:
var target = $('[data-id="1123066248731271"] > div:first-child')[0];
alert(target.innerHTML);
or this:
var target = document.querySelector('[data-id="1123066248731271"] > div:first-child');
alert(target.innerHTML);
As a non-jQuery user, I personally prefer the latter.
I want to open up either picture a or b (if available) with fancybox 3 from any td without a certain class. The pictures should be shown as they are when clicking on the button.
I have included bootstrap, fancybox and jquery. Also i use icons from material icons. Fancybox works perfectly when opening from button.
<table>
<tbody>
<tr>
<td style="cursor:pointer" id="abc">
abc
</td>
<td style="cursor:pointer" id="def">
def
</td>
<td class="1234">
<div class="btn-group float-right" role="group"style="display:flex;">
<#if a??>
<a type="button" class="btn btn-secondary btn-sm"
data-fancybox="test" data-type="image"
data-thumb="${a}" data caption="abc" rel="group"
href="${a}" title="View browser screenshot">
<i class="material-icons md-14"
aria hidden="true">photo_camera</i>
</a>
</#if>
<#if b??>
<a type="button" class="btn btn-secondary btn-sm"
data-fancybox="test" data-type="image"
data-thumb="${a}" data caption="abc"
rel="group" href="${a}"
title="View browser screenshot">
<i class="material-icons md-14"
aria-hidden="true">remove_red_eye</i>
</a>
</#if>`
</div>
</td>
</tr>
</tbody>
</table>
I tried this jquery code:
(Solution for another fancybox question on SO)
$(".table > tbody > tr > td").bind('click',function(e) {
e.stopPropagation();
if (!$(this).hasClass("1234")) {
$(this).find("a").trigger('click');
}
});
and (obviously for tr insted of td)
$('.table > tbody > tr').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
and
$(document).ready(function(){
$('td').on('click', function() {
if (!$(this).hasClass("1234")) {
$.fancybox();
}
});
});
Simply remove all your fancybox related tags from <a> element and add to <td> element, because it does not matter what HTML elements are you using as trigger elements for fancybox.
If some body is interested in the way i found a solution:
$(document).ready(function(){
$(".table > tbody > tr > td").bind('click',function(e) {
var name = $(this).attr('name');
e.stopPropagation();
if (!$(this).hasClass("1234")) {
$("#" + name).find("a:first").trigger('click');
}
});
});
I have a JS variable showing properly in an alert window. I am trying to place the same value in my href link on the modal that immediately follows the alert.
On the main page I have a script that shows the value in an alert box - It gets the clicked_id value from here:
<span onclick='executeChildSupport(this.id)'><a href='#' data-toggle='modal'><i class='fa fa-th' aria-hidden='true'></i></a></span>
This is the JS script that catches the clicked_id and shows in the alert box
function executeChildSupport(clicked_id) {
$(this).tooltip('hide');
event.currentTarget.innerHTML = "<i class='fa fa-th' aria-hidden='true' style='margin-left:10px'></i>";
alert(clicked_id);
$('#supportShare').modal('show');
return false
}
Following the alert, a modal is then shown, I am trying to place the "clicked_id" JS variable that was shown in the alert also in the modal's page where there is an HREF string as shown below (where it says "document.write(clicked_id)")
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK HERE <script>document.write(clicked_id);</script>
Any suggestions?
HERE IS THE MODAL CODE (BODY AREA ONLY - I believe that is all that is needed by the request)
<div class="modal-body" style="padding: 40px;color:#fff">
<table border="0" style="width:100%">
<tr>
<td colspan="3" style="padding:8px 3px 3px 2px">
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary" style="background-color:#171717;width:100%;border:none;padding:30px">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK <script>document.write(+clicked_id+);</script></a>
</td>
</tr>
</table>
</div>
What about this direction?
LINK
If I've understood your query then you can follow two ways,
(all codes below are not absolute working code, these are given for understanding, you may want to change them as you want)
not-recommended way is to use a global variable then using it in your link
example:
var current_id = null;
......
alert(clicked_id);
current_id = clicked_id;
....
Then doing
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<script>document.write(current_id);</script>
</a>
Recommended Way is to access and change the value of the dom after alert
example:
......
alert(clicked_id);
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
$('#supportShare').modal('show');
.....
or you can use a callback after the modal loads
......
alert(clicked_id);
$('#supportShare').modal('show', function(){
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
});
.....
Then changing a bit like:
<a href="#" target="_blank" class="btn btn-primary" id="dynamic_link">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<span id="clicked_id"></span>
</a>
I'm trying to make an alert set off every time a button is clicked on, which is a column in a table.
However, the alert is only working when the user clicks the button in the top row. All rows below it does not work. Why?!
<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td id ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('#Buy').click(function() {
var myPart = $('#part-name').text();
alert (myPart);
});
</script>
Note I have tried with id="Buy" in both the td tag, and also the a tag.
If you want to bind to multiple DOM elements, bind to a class that they share instead (make a new class and use that class on each element).
Your DOM structure seems somewhat confusing, but if I understand it correctly, this should work.
<span class="inline" id="part-name" class="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class="buy" id ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.buy').click(function() {
var myPart = $(this).closest('tr').children('.part-name').text();
alert (myPart);
});
</script>
Instead of ID "Buy", give class name 'Buy' then use the below code
$('.Buy').on('click',function(){
alert($('#part-name').text());
});
This is because you're selecting the s by their ids. Id's are supposed to be unique, so jQuery is grabbing the first one. If you use classes it will work better.
<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class='Buy'>
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.Buy').click(function() {
var myPart = $('#part-name').text();
alert (myPart);
});
</script>
Perhaps you might want to do something like this:
<span class="inline" id="part-name-{{partID}}" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}" partId="{{partID}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.Buy').click(function() {
var myPart = $("#part-name-"+$(this).attr("partId")).text();
alert (myPart);
});
</script>
This will break validation unless you are using HTML5.