Is it possible to pass a variable from anattribute to a modal. I need to use the value of the variable to return data from a*.php` function.enter code here
The call to the Modal with the record value in the data-id attribute.
Edit;
This will be Modal that will be displayed.
<div id="openModal" class="modalDialog">
<div>
X
<table border="1" width="600" height="500" cellpadding="5" cellspacing="0">
<tr>
<td>
$detail = Stuff->getDetails($_GET['data-id']);
</td>
</tr>
</table>
</div>
</div>
if you want access data-id you can use javascript / jquery to do that.
my suggestion is :
1. change the link to this :
Edit
2. in modal :
<tr>
<td id="place-data-id">
</td>
</tr>
3. in javascript access data id like this :
<script type="text/javascript">
$("#myModal").click(function(){
var myDataId = $(this).data('id'); // get data-id
$("#place-data-id").html(myDataId); // insert data id to td
$("#openModal").modal('show'); // showing modal
});
</script>
Related
I have this table in html, and I load it with Php Laravel
<div class="form-row col-md-12">
<table id="contacts" class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<th>Cel</th>
<th>Tel</th>
<th>Email</th>
<th>Actions</th>
</tr>
#if(isset($contacts) && count($contacts)>0)
#foreach($contacts $c)
<tr>
<td class="inf" data-id="{{ $c->id }}"> {{ $c->id }} </td>
<td class="inf" data-cel="{{ $c->cel}}"> {{ $c->cel}} </td>
<td class="inf" data-tel="{{ $c->tel}}"> {{ $c->tel}}</td>
<td class="inf" data-email="{{ $c->email }}"> {{ $c->email }} </td>
<td>
<button class='btn btn-primary btnAlterarContato' type="button">Alterar</button>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
You can see that each row has its data attribute for creating data. I made a method that I can retrieve the data from the TD and alter them, however I can not change the data of the data. how do I change how information that is without data attribute?
$('.btnAlterarContato').click(function(){
var Row= $(this).closest('tr');
var Posicao = 1;
// Switch: 1 = Id, 2 = Cel, 3 = Tel, 4 = Email
Row.find('td').each(function(){
switch(Posicao)
{
case 2: $(this).text('new value '); $(this).attr('data-cel', 'Hi');
$(this).data('data-cel','Hi') ;break;
}
Posicao++;
});
});
I have a repeat loop to walk on every table td, and in case position 2 is the value of cel, I would like to change your display item and your cell-date when I do $ (this) .text ('new value ') this works, but I can not change the mobile date, how do I do this?
For changing data attribute use .data() like below:-
$(this).data('cel', 'Hi');
Note:- Once clear your browser cache and check
I need to get the value of userid, data-attribute from a html table and put this value into a var, but I wanna to this action without click action.
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
I have tried to do this like that, but the rowId is undefined.
var rowId = $("#someTest tr").last().attr("[data-userid"]");
Simply, you can manage data attribute & value in HTML tag using data() method of jQuery. Alternatively, you can use attr() method also,
var rowId = $("#someTest tr").last().data("userid");
Alternatively
var rowId = $("#someTest tr").last().attr("data-userid");
.data() method is used to store arbitrary data associated with the matched elements or return
the value at the named data store for the first element in the set of
matched elements.
Initial HTML
<button id="mybtn">MyButton</button>
Add data-attribute with value
$('button#mybtn').data('id',10);
Alternatively
$('button#mybtn').data('data-id',10);
Reproduced HTML
<button id="mybtn" data-id="10">MyButton</button>
Get value from data-attribute
alert($('button#mybtn').data('id')); //alerts 10
Alternatively
alert($('button#mybtn').attr('data-id')); //alerts 10
Change value of data-attribute
$('button#mybtn').data('id',15);
Alternatively
$('button#mybtn').attr('data-id',15);
Reproduced HTML
<button id="mybtn" data-id="15">MyButton</button>
Remove data-attribute
You can remove data attribute using removeData() method
$('button#mybtn').removeData('id');
Alternatively
$('button#mybtn').removeAttr('data-id');
Reproduced HTML
<button id="mybtn">MyButton</button>
only Remove [] :
var rowId = $("#someTest tr").last().attr("data-userid");
Final code :
<html>
<title>This is test</title>
<head>
</head>
<body>
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var rowId = $("#someTest tr").last().attr("data-userid");
alert(rowId);
})
</script>
</body>
</html>
you just have to remove the square brackets:
var rowId = $("#someTest tr").last().attr("data-userid");
$('#rowidOutputAttr').text(rowId);
var rowId = $("#someTest tr").last().data("userid");
$('#rowidOutputData').text(rowId);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
<div id=rowidOutputAttr></div>
<div id=rowidOutputData></div>
</body>
</html>
i also added en example with .data()
I would like to get the ID of
<table id="table">
<th>Name</th>
<tr><td id="td1"><img id="img1"onload="getData(this)" aref and so on></td></tr>`
</table>
I need to get that ID.. For my function getData(this)
alert($(this).parent().attr('ID'));
alert(($(this).closest("TD").find('ID')));
alert($idd.closest('td').attr('id'));
alert($(this).parent().attr("id"));
Tried this ones but no succses get undefined in alert.
I need to make the function dynamic so it can take any element.
instead of this
document.getElementById('td1').innerHTML = data;
document.getElementById('td2').innerHTML = data;
i want to pass a variable to the
document.getElementById(VAR).innerHTML = data
data is a ajax call.
IT dosent matter if its done with JSor jquery :) thx
Use JSFiddle, It's pretty !
You have two errors :
$.ready not need to be use in function
You use getApi(this), but you need to use getApi($(this))
You must do that :
function getApi(idd) {
$.ajax({
.....
});
}
http://jsfiddle.net/vryymy8p/24/
You can use :
$(this).attr('id'); // img1
$(this).parent('td').attr('id'); // td1
$(this).parent('td').parent('tr').parent('table').attr('id'); // table
I hope it's your question because I'm french...
I thinks your html is wrong :
http://jsfiddle.net/vryymy8p/2/
<table id="table">
<tr>
<th>Name</th>
</tr>
<tr>
<td id="td1">
<img id="img1" src="http://jsfiddle.net/img/logo.png" style="background:#000" />
</td>
</tr>
</table>
How can I get the id of tbody's input when #moveToAnTable is clicked using jQuery? Thanks.
<table id="yearSectionAdd2Table">
<thead>
<tr id="columnHeader">
<th>
<div>
<input id="moveToAnTable" type="button" value="<<">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center>
<input id="moveToAnTableOne" type="button" value="<<">
</center>
</td>
</tr>
</tbody>
</table>
Use jQuery.closest to get the table of the button.
After that search for the input.
jQuery.attr will return the attribute of the first element in the match:
$("#moveToAnTable").click(function(){
var id = $(this).closest("table").find("tbody input").attr("id");
alert(id);
});
See the fiddle:
http://jsfiddle.net/URGVp/
You can also write it like this with the on method, and test out your results in a console window if that better suits you, rather than constant pop-ups.
$('#moveToAnTable').on("click",function(){
var mvalue = $(this).closest('table').find('tbody input').attr('id');
console.log('my value is: ' + mvalue);
});
I'm very new to JavaScript and I wish I could set the value of a td tag using JavaScript.
I have code like this to do so:
window.onload = function() {
document.getElementById("units").value = "122"
}
And I have a html file like this:
<table class="table" width="100%">
<caption class="bold">TNEB UnitCalculator</caption>
<tbody>
<tr>
<td>testing</td>
<td id="units"></td>
</tr>
</tbody>
</table>
But that doesn't seems to be working!
The td tag doesn't have a value attribute:
document.getElementById("units").appendChild(document.createTextNode(122));
Or if you want to set some attribute:
document.getElementById("units").setAttribute('data-value', 122);
The td element does not have a value attribute. Use innerHTML instead.
Actually your code is working correctly
<script>
window.onload = function() {
document.getElementById("units").value = "122"
}
</script>
<table class="table" width="100%">
<caption class="bold">TNEB UnitCalculator</caption>
<tbody>
<tr>
<td>testing</td>
<td id="units"></td>
</tr>
</tbody>
</table>
You can check this in your browsers developer tools. In the command line, type:
document.getElementById("units").value