I have a table and 10 rows When I copy this image src. It copied the last src
HTML
<table class="table table-striped">
<tbody>
#foreach($medias as $media)
<tr>
<td class="align-middle">{{ $media->id }}</td>
<td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" class="image" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">del</button>
</form>
</td>
<td class="align-middle"><a onclick="copy(this)" class="btn btn-sm btn-info">copy</a></td>
</tr>
#endforeach
</tbody>
</table>
JS
<script>
function copy () {
navigator.clipboard.writeText(document.getElementsByClassName('image').src);
}
</script>
I copied undefined.
Note: This code has no errors in the output.
You cannot repeat Id inside DOM. So you can set up id dynamically, btw you need to pas the element to your copy().
Try the next code and let me know if it is working. I didn't test it, but it should work
Blade
<table class="table table-striped">
<tbody>
#foreach($medias as $media)
<tr>
<td class="align-middle">{{ $media->id }}</td>
<td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" id="image-{{$media->id}}" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">del</button>
</form>
</td>
<td class="align-middle"><a onclick="copy('image-{{$media->id}}')" class="btn btn-sm btn-info">copy</a></td>
</tr>
#endforeach
</tbody>
</table>
JS
<script>
function copy (element) {
navigator.clipboard.writeText(document.getElementsById(element).src);
}
</script>
Example A is more true to the OP layout. Example B was started before the question was updated. One important thing you should remember is that you cannot have any identical #ids they must be unique, so img#image is img.image in the examples.
Details are commented in both examples
Example A
// Bind the <tbody> to the click event
document.querySelector('tbody').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag user clicked has .copy class...
...find the closest <tr> from clk...
...then find .image in <tr>...
...get .image src value and add it to clipboard
*/
if (clk.matches('.copy')) {
const image = clk.closest('tr').querySelector('.image');
navigator.clipboard.writeText(image.src);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<section class='row'>
<div class='col'>
<table class="table table-striped">
<tbody>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=1&txt=1&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle">Copy Image Path</td>
</tr>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=2&txt=2&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle">Copy Image Path</td>
</tr>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=3&txt=3&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle">Copy Image Path</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class='row'>
<div class='col'>
<textarea class='form-control' rows='3' cols='50' placeholder='Paste Here'></textarea>
</div>
</section>
</main>
Example B
// Collect <figure> into an array
const frames = [...document.querySelectorAll('figure')];
// On each <figure>...
frames.forEach(fig => {
// Get the src of <img>
let path = fig.firstElementChild.src;
// Reference the <a>
let link = fig.lastElementChild.firstElementChild;
// Add data-src attribute with the value of path to the link
link.setAttribute('data-src', path);
});
// Bind the click event to <section>
document.querySelector('section').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag clicked has attribute [data-src]...
...add the link's data-src value to clipboard
*/
if (clk.hasAttribute('data-src')) {
navigator.clipboard.writeText(clk.dataset.src);
}
}
section {
display: flex;
justify-content: center;
align-items: center;
margin: 10px
}
figure {
margin: 0
}
figcaption {
text-align: center;
}
<h3>Click a link then right click + <u>P</u>aste or <kbd>Ctrl/⌘</kbd> + <kbd>v</kbd> to the <code><textarea></code> below:</h3>
<section>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=2&txt=2&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=3&txt=3&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
</section>
<textarea rows='3' cols='65' placeholder='Paste Here'></textarea>
Related
I want to remove class only selected row because in a laravel foreach loop I have multiple rows like this:
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
I wanted it so that if the user clicks on first row only, its class should be removed so I tried this:
$('.remove-d-none').on('click', function(){
$('.menu').removeClass('d-none');
});
But it doesn't seem to work. Does somebody know how to help?
$('.remove-d-none').on('click', function() {
$(this).siblings(".manue").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
</table>
I have written some code to convert html in a bootstrap modal to image in jpeg format.
It is working fine but in the image it is showing some scroll bar(s). In this code I didn't include any scrollbar.
How to resolve this problem. can any one please help me. example image here I have included one image, I am getting scrollbar like this when I click on the download button.
$(document).on("click", "#jpgfrmt", function() {
domtoimage.toJpeg(document.getElementById('download'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'astDetails.jpeg';
link.href = dataUrl;
link.click();
});
});
#download {
background: #fff;
color: #000;
width: auto;
height: auto
}
#buttons {
margin: 0 auto;
display: inline;
}
#jpgfrmt {
float: right;
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="content" class="content">
<div id="buttons">
<div class="action_btn">
<a href="javascript:;" id="jpgfrmt" class="btn btn-xs btn-warning m-b-10">
<i class="fa fa-download m-r-5"></i> Download
</a>
</div>
</div>
<div class="row" id="download">
<div class="col-md-8">
<div class="table-responsive">
<table class="table">
<tr>
<td style="border:none;">
<table class="table">
<tr>
<td class="field highlight" width="25%" style="border:none;">Name:</td>
<td width="75%" style="border:none;">
Name
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Description:</td>
<td width="75%" style="border:none;">
Description
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Serial No:</td>
<td width="75%" style="border:none;">
Serial Number
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
So, I have a small table with some content, which with the click of a button can be expanded to show a container div with extra content.
I'm trying to tie a function to this action, but when I do, the function seems to get fired once per number of table row.
JSFiddle:
https://jsfiddle.net/jtby9c12/
Table:
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: block;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
*The actual table contains 22 rows and descriptions, this just shows the structure sample.
Jquery:
var descriptions = $(".div-container")
var descButton = $("#toggle-descriptions-button")
descButton.click(function(){
console.log("Button Clicked!")
descriptions.toggle(400, function() {
console.log("I'm a fucntion!")
});
});
As you can see, it calls the function 22 times, and I'm trying to get it to call just once.
I'm looking to get a single call back for the function, it's one state change for all descriptions, I only need one return.
To achieve this you can use the promise() returned from the toggle() calls. Attach a done() event handler to it, which will fire after all the promises have been resolved:
var $descriptions = $(".div-container")
var $descButton = $("#toggle-descriptions-button")
$descButton.click(function() {
console.log("Button Clicked!")
$descriptions.toggle(400).promise().done(function() {
console.log("I'm a function!")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
I want to find text inside div parent with table, if i write any text inside my search bar i want to show only the result and the rest of the divs hidde, i have differents td that i want search in the four cells (left to rigth) the last cell is not important
This is my HTML:
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top">
alexis
<div>
<div class="order-details-bottom">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top">
rtynbv
<div>
<div class="order-details-bottom">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
And this is my Script:
$("#buscador").keyup(function() {
var dInput = $(this).val();
if (!this.value) {
$('div.caja-orden-curso').fadeIn();
}
else
{
$("table#perrito").each(function()
{
$(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
$(this).show() : $(this).parents('div.caja-orden-curso').fadeOut();
});
}
});
My example only work with the first cell with the other three cells i cant.
This is my fiddle
IDs in a page must be unique. So change id="perrito" to class="perrito" and do the following.
$("table.perrito").each(function() {
if ($(this).find('div:contains(' + dInput + ')').length)
$(this).parents('div.caja-orden-curso').fadeIn();
else
$(this).parents('div.caja-orden-curso').fadeOut();
});
DEMO
Here you used find funtion on "top-order" class only.if you want work with all 4 cells then you apply this class on all of three cells also. You may try this
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top top-order">
alexis
<div>
<div class="order-details-bottom top-order">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top top-order">
rtynbv
<div>
<div class="order-details-bottom top-order">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
If you want search or sort or ... on table , you can use DataTables jQuery plugins
Pagination, instant search and multi-column ordering
Supports almostany data source: Easily theme-able: DataTables, jQuery
UI, Bootstrap, Foundation
Ajax auto loading of data
and ...
$('#myTable').DataTable();
DataTables jQuery plugins
My table is built with the same ID's on every row, with a foreach loop. To find the text inside the <p class="comment" - I have to specify where ( I want to find the closest one )
My table looks like this:
<c:forEach items="${items}" var="item">
<div class="container theme-showcase" role="main">
<div class="row">
<div class="col-md-6">
<table class="table fixed">
<tbody id="extend">
<tr data-toggle="collapse123" class="clickableRow" nowrap="true" data-target=".demo${item.id}" id="${item.id}">
<td class="AMLLeft" nowrap="true">
<label for="important"style="display: inline !important">ID:</label>
<p class="important"style="display: inline !important">${item.id}</p>
</td>
<td align="right" class="AMLRight">
<pre class="thepre">Transaction sum: ${item.sum} ${item.currencyCode}</pre>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>AML ID: ${item.id}</p></div>
</td>
<td align="right" nowrap="false">
<div class="collapse123 demo${item.id}"><input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>AML Category: ${item.amlClientCategory}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"><input type="button" value="Close" class="btn btn-xs btn-primary closeButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>Client ID: ${item.clientId}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"><input type="button" value="Set Investigate" class="btn btn-xs btn-primary investigateButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="status">Status: ${item.status}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="comment">Comment: ${item.comment}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>Transaction sum: ${item.sum} ${item.currencyCode}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</c:forEach>
I want to find the text of <p class="comment">${item.comment}</p> but this time it's inside a <div>. I'm not sure how to do this but this is the code I've tried so far:
var commentValue = $(this).closest('tr.hiddenRow').siblings().find('p.comment').text();
Any help is very appreciated!
I know I've posted a similar question here but this is different because it's inside a <div>, and I can't help myself.
To save people trawling through the comments, the eventual solution is here:
https://jsfiddle.net/5nL1e31z/3
I believe this achieves what you wanted, and I've tried to break it out so it's clear what's happening: https://jsfiddle.net/5nL1e31z/ If it isn't quite right, just let me know and I can update it.
$('.test-button').click(function () {
var parentRow = $(this).parent().parent();
$(parentRow).css('background-color', 'red');
var hiddenRow = $(parentRow).siblings('.hiddenRow');
$(hiddenRow).css('background-color', 'yellow');
var commentTextP = $(hiddenRow).find('.comment');
console.log(commentTextP.text());
});
var commentvalue = $(this).parent().find('p').text();
http://jsfiddle.net/ux0a3zsx/
Because the button is what this refers to and p is not inside it
did you tried this?
var text= $(this).closest('.hiddenRow').find('.comment');