I have Bootstrap Table that contains an edit button on each row. I've used a data formatter to make the pass the id of the record over with a data attribute that can be extracted when clicked. When I inspect the element in the console I can see the ID is in the dataset property, but when I try to get it out using element.dataset the console contains an error telling me that the dataset is undefined. It's frustrating because I can see it's there!
Here's my click event:
$(".job-edit").click(function(event) {
var editModal = $("#jobEditModal");
var clicked = $(event.target);
var id = clicked.dataset.jobid;
console.log(id);
event.stopPropagation();
//editModal.modal();
});
And the formatter that sets the button up:
job.editFormatter = function (value) {
return "<button class='btn job-edit text-center' data-jobId='" + value + "'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit</button>";
}
So far I've tried replacing .dataset with .getAttribute(), but that didn't work either, I've also tried changing the casing of jobid to jobId, past that I'm not sure what could be causing the problem.
instead of using dataset you can directly get the jobid by using .data() method of jquery like below.you are getting undefined value for dataset as the clicked variable is a jquery object which does not have a definition for dataset
$(".job-edit").click(function(event) {
var editModal = $("#jobEditModal");
var id = $(this).data("jobid");
console.log(id);
event.stopPropagation();
//editModal.modal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn job-edit text-center' data-jobId='2'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit</button>
Your issue is because clicked is a jQuery object which has no dataset property.
To fix this you need to use the native element reference:
var id = e.target.dataset.jobid;
Alternatively, use the data() method of the jQuery object:
var id = clicked.data('jobid');
Related
In my web app, I want to be able to click on a href link within a datatable that loads a second table on a new page, which in turn filters out rows so that the table only displays rows with the same id as the id of the row I clicked on in the previous table/page.
The code below does not work. I believe this is because before it has had time to save the row data from the first table, a new web page is already being opened and it is too late to save the data as it is no longer there. Is there a way to create a callback so that my javascript function is executed before the href link is opened?
Or maybe I am doing this completely wrong?
Any help would be appreciated.
Datatable.Column() code: (the user clicks on an image/url link within the table):
"data": "ErrorCount",
"render": function (data, type, row) {
if (type === 'display') {
return (data === 0)
? data = '<span data-search="0"></span>'
: data = '<a id="errors" href="http://localhost/WTM/LogError/Index" type="hidden" class="fas fa-exclamation-triangle" style="color:red"></a>';
}
return data;
},
Javascript filter function:
var clickError = document.getElementById("errors")
var xTable = $('#TABLE_ONE').DataTable();
var yTable = $('#TABLE_TWO').DataTable();
$('clickError').click(function () {
var rowData = xTable.row(this).data();
yTable.columns(0).search(rowData.TaskSchedulerLogUid).draw();
});
Multiple issues here:
ID's can't be repeated in a page, use class instead
$('clickError') is invalid selector
The elements in question are dynamically rendered and thus won't all exist when the code is run. Use event delegation
The row is not the <a>
Fixes:
HTML
'<a ̶i̶d̶=̶"̶e̶r̶r̶o̶r̶s̶"̶ class="errors"...
JS
$('#tableID').on('click', 'a.errors', function(e){
e.preventDefault();
var row = $(this).closest('tr')[0];
var rowData = xTable.row(row).data();
yTable.columns(0).search(rowData.TaskSchedulerLogUid).draw();
})
For anyone interested. I found a different way of doing this.
First I added the search query/row ID to the url of the new page I wanted to open like this:
'
then I extracted the search query/ID from the url, and searched the table on the new page using the newly extracted search query/ID, like this:
var queryString = window.location.search;
queryString = queryString.substring(4);
if (queryString == null) {
throw "Error: id is null"
} else {
WtmDetails.vars.secondaryTable.columns(0).search(queryString).draw();
}
I have a button thats value is set based on a mysql query in php like so:
echo "<td><button class='jsontable' onclick='Copythat(this.value)' value='" . $row['json'] . "'> " . $row['name'] . "</button></td>";
the text of the button is the name row, which works currently.
and a function that i have basically in place to try and grab the string and send it to the load function. the load function needs to receive only text of that mysql row json
function Copythat(el.val) {
var jsontoload = $(el.val).html();
load(jsontoload);
}
If you pass this to your function, you get the context of the element where the event occurred. Once you've got that, you can pass it to jQuery and you can get the "value" attribute using the .val() shortcut method.
Note that function Copythat(el.val) { needs to be something simply like function Copythat(val) { - function parameters must be standalone variables, they cannot be written like object properties.
function Copythat(input) {
var attrValue = $(input).val();
alert(attrValue);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='jsontable' onclick='Copythat(this)' value='Something'>A button</button>
You could also convert the whole thing to jQuery and ditch the inline event handler:
$(function() {
$(".jsontable").click(function(event) {
var attrValue = $(this).val();
alert(attrValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='jsontable' value='Something'>A button</button>
Or it should also be noted that for something as simple as this you don't really need jQuery at all:
function Copythat(input) {
alert(input.value);
}
<button class='jsontable' onclick='Copythat(this)' value='Something'>A button</button>
Another further simplification if you literally only need the value to go into your function:
function Copythat(input) {
alert(input);
}
<button class='jsontable' onclick='Copythat(this.value)' value='Something'>A button</button>
I'm trying to work out a way so that when a string is detected in a class of html, I can get the specific ID. For example, if the string was "Action", I'd like to detect Action from the following Strings in the class "categoryCont", and then work out which ID that was. At the moment, I'm using a JQuery Method that simply checks if the class contains the text:
<button class = "categoryCont" id="1365" onclick="selection = (this.id), setupCategory()">Action and Adventure</button>
<button class = "categoryCont" id="43040" onclick="selection = (this.id), setupCategory()">Comedies</button>
<button class = "categoryCont" id="1568" onclick="selection = (this.id), setupCategory()">Sci-Fi and Fantasy</button>
<button class = "categoryCont" id="43048" onclick="selection = (this.id), setupCategory()">Thrillers</button>
The JQuery:
if($('.categoryCont:contains(text)'))
How can I adapt this code so that it searches each version of the class, and then if it matches the text, it saves the ID for use?
Thanks.
This should work.
$(".categoryCont:contains('Comedies')" ).attr('id');
This demo
Update
To hide the particular element you can do (no need to find id)
$(".categoryCont:contains('Comedies')" ).hide();
Still if you want to apply id selector do this:
var id = $(".categoryCont:contains('Comedies')" ).attr('id');
$("#" + id).hide();
You can also assign the text to a variable.
var text = "Comedies";
$(".categoryCont:contains('" + text + "')" ).attr('id');
I am trying to target an id element using a variable in jquery, like so:
var liked_artist = $('#js-helper-liked-artist').val();
var artist_id = $('#js-helper-artist-id').val();
var target = '#individual' + artist_id + '';
$(target).addClass('individual-heart-hover');
However, this is not targeting the id it should correctly. Any ideas? I've tried it without the empty string at the end as well.
EDIT:
HTML:
<i class="fa fa-heart fa-stack-1x individual-heart" id="individual-{{$artist->id}}"></i>
individual-{{$artist->id}} renders as individual-8
and artist_id is 8 (console.log shows this).
Shouldn't it be var target = '#individual-' + artist_id + '';? Unless it's a typo in your post, I think you are missing the dash.
did you enclose your code in the document ready function?
$(document).ready(function() {
// ....
});
i am trying to alert id of a button (which is generated using jquery ) but when i alert its value it not coming right. heres the code
function removeimg(name,btn12){
//make request to remove the name
// $("#" + name).closest('li').remove();
// $("#" + btn12).remove();
// document.getElementById(name).style.display = 'none';
// document.getElementById(btn12).style.display = 'none';
var str = "#" + btn12;
alert(str);
alert($(str).val());
}
here is the link
http://shri-ram.lifekloud.com/pilot/step4.php
when you uplaod a image under the tab "add delete photo" the button is generated
i am trying to alert id of a button
val() does not get the id of an element; val returns the value element.
To get the id of an element, use attr
alert($(str).attr('id'));
Just a stab in the dark from your comment well its not even returning value thts the issue. but the id name is getting displayed correctly
If you have
<input type='button' id='b' value='btn' />
then
alert($('#b').val());
will in fact display btn. That said, if you have
<button id='b'>btn</button>
then nothing will be displayed. But like I said that's just a stab in the dark. It's impossible to know better without the html available (and I'm afraid I don't have time to parse through your site)
You have one meta-character . in your id #btnheader-8878374.png, That is the problem.
Just escape like this
$('.#btnheader-8878374\\.png')
and try you will get your concept working.
Full code,
var str = "#" + btn12;
str = str.replace('.','\\\\');
alert($(str).val());
Your problem is most likely that you do not have the value attribute set on your buttons, thus calling val() returns nothing.
If you want the text of the button just call text().
See jsFiddle
HTML
<button id="btn12">Button 12</button>
JQUERY
var str = "#" + "btn12";
alert( str ); // yields #btn12
alert( $(str).val() ); // yields nothing
alert( $(str).text() ); // yields Button 12