I create a table with dynamic data from mysql. He seems to :
screen
When I click on the delete button from the second row, and make an alert js with the value of id, he save the id from the first row and not in the row where I cliqued.
My Views :
$('.Btrash').click(function() {
//var id_stream = $('#id_stream').val();
var id_stream = $('#id_stream').attr('value');
var id_compte = $('#id_compte').val();
alert(id_stream);
});
<div class="row" id="Tstream">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th>Feeds</th>
<th>Data request</th>
<th>Begin Stream</th>
<th>End Stream</th>
<th><em class="fa fa-cog"></em></th>
<th>Status</th>
<th>Access to Data</th>
</tr>
</thead>
<tbody >
<?php foreach ($aAllRequestByIdUser as $aRequestByIdUser) : ?>
<tr>
<td class="vert-align">
<input type="hidden" id="id_compte" value="<?= $iIdCompte ?>">
<input type="text" id="id_stream" value="<?= $aRequestByIdUser['id_Stream'] ?>">
...
My alert always show 74.
Can you help me to find a solution?
Thanks
First let me explain a bit about jquery selectors. This code of yours
var id_stream = $('#id_stream').attr('value');
selects all the items with the id of #id_stream, and returns the first value.
If you want to get the ID of the row clicked, then you should select the row first. But since you haven't shared the rest of your code, i can only assume the rest. There are several ways of doing so, and this is one of them.
1 ) Get the parent of $(this) >
2 ) Then get the first sibling of it
3 ) Finally find input and get val().
Or you can do it by Jquery's closest function. But as i said, first i need to see the rest of your code.
Related
I have a Json recordset, that is working perfectly, however so far I can't sort out how to place a value of the json array into an specific cell of a table.
this is my function that looks for the form and start printing the values but only if there is an input component inside the table
function process_response(response) {
var frm = document.getElementById("form-ajax");
var i;
console.dir(response); // for debug
for (i in response) {
if (i in frm.elements) {
frm.elements[i].value = response[i];
}
}
}
and this is table
form id="form-ajax" action="form-ajax.php">
<table class="table">
<thead>
<tr>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="name" name="ID" maxlength="12" size="12"></td>
<th scope="row"><input type="submit" value="1" /></th>
<td></td>
this is the place where I want to the resultset without the need of place a input
if I place something like this.
<td><input type="text" name="1" /></td>
then the javascript works and it reads whatever is in the json name with 1.
but if I do something like this.
<td name="1"></td>
then nothing prints out.
Whatever I do different than place an input type="text" then the Function doesn't work.
I need to populate the table with an specific order from the json .
TDs are not part of a form and do not have value or name attributes
You could do
var tds = document.querySelectorAll("td[name]");
for (var i=0;i<tds.length;i++) {
tds[i].innerText=response[tds[i].getAttribute("name")];
}
assuming the name attribute matches the response key
You also likely do not want to have a submit button but a type="button"
I figure out a way to print an specific value inside the table ...
var s = document.getElementById("so");
s.innerHTML =response['sort'];
this way I force td component with ID="SO" to print the value I passed over the json file.
<td id="so"></td>
I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >
I'm trying to use jQuery to capture the value of two cells from a table. My table looks like this:
<table id="searchByLocationResults" class="table table-hover table-striped" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">View Detail</th>
<th scope="col">Quantity</th>
<th scope="col" style="display:none;">Location ID</th>
<th scope="col" style="display:none;">Item Type ID</th>
</tr>
#For Each item In Model
Dim currentItem = item
#<tr>
<td><a class="btn btn-default btn-sm" onclick="viewDetails(this)">View Detail</a></td>
<td>
#Html.DisplayFor(Function(modelItem) currentItem.COUNT)
</td>
<td style="display:none;" class="locationID">
#Html.DisplayFor(Function(modelItem) currentItem.Unique_Location_ID)
</td>
<td style="display:none;" class="itemType">
#Html.DisplayFor(Function(modelItem) currentItem.Item_Type_Identifier)
</td>
</tr>
Next
</tbody>
</table>
As you can see there is a 'view details' button on each row. What I need to do is capture the display:none values in the cells with class=locationID and class=itemType when the button is clicked, only for the row that the button is clicked on. I have seen multiple solutions on stack over flow here, here and quite a few others. Most of these are dealing with capturing an entire row of values.
I have tried a few different scripts:
function viewDetails(clickedRow) {
var locationID = $(this).find(".selected td:.locationID").val();
alert(locationID);
and:
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").val();
alert(locationID);
as well as a few others.
How do you capture the values of the cells locationID and itemType for the row that 'View Details' is clicked on?
I would say to try the index. This only works if the buttons and text areas have unique classes so the count works correctly. Then once you have the index use the eq() to get the data.
var index = $(".btn-sm").index();
var locationId = $(".locationID").eq(index).text();
You are almost there. You just need to use the .text() method in Jquery
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").text();
alert(locationID);
I have form in html like this:
It has multiple values. I want to submit those values with validation. For example, If somebody enter the value of ad length then he must fill all other fields for that particular row. After that I want to submit the form and store all correct values (I mean, there won't be any conflicts in row.) in to the database.
HTML CODE:
<table border="1" style="width:300px">
<tr>
<th>Ad Length</th>
<th>Ad Type</th>
<th>Ad Location</th>
<th>Price</th>
</tr>
<?php for($i=1;$i<=5;$i++){ ?>
<tr>
<td>
<select name="ad_length[]" id="">
</td>
</tr>
And so on for other elements...
This is myPHP code:
$ad_length = $_POST['ad_length'];
$ad_type = $_POST['ad_type'];
$ad_location = $_POST['ad_location'];
$ad_price = $_POST['ad_price'];
foreach($ad_length as $al){
print_r($al." , ");
}
But, I think, I am doing wrong somewhere?
What will be the perfect solution for this?
Thanks.
This should be a place to start.
<?php
if(isset($ad_length)){
if(!isset($ad_type)){
echo 'Please enter type of advert'
}
elseif{
...
}
else{
/* Insert into database */
}
}
?>
I am using MVC3, EF Model first on my project.
I have a view with 4 tables and then I have a CustomPickedTable, whenever a user click on a row inside those 4 tables that row moves to CustomPickedTable Table this is the code for it:
<script type="text/javascript">
$(function () {
$('.questionsForSubjectType tbody tr').click(function () {
var origin = $(this).closest('table').attr('id');
$(this)
.appendTo('#CustomPickedTable tbody')
.click({ origin: origin }, function (evt) {
$(this).appendTo('#' + evt.data.origin);
});
});
});
</script>
What I am looking for is some kind of validation that when a user clicks on the submit button there should be a rule that make sures that atleast one row in each of those 4 tables must be moved to CustomPickedTable if not it should not post the form but give the user an errormessage.
This is one of my 4 tables, these get generated by a foreach loop with razor in MVC
<div class="questionsForSubjectType" id="questionsForSubjectType_1">
<table class="box-style2" id="RandomID_c5b9bc7a-2a51-4fe5-bd3a-75b4b3934ade">
<thead>
<tr>
<th>
Kompetens
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-question-id="16">Har konsulten Förmåga att lära sig nytt?</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-question-id="17">Har konsulten rätt kompetens?</td>
</tr>
</tbody>
</table>
</div>
My custom table:
<table id="CustomPickedTable" class="box-style2">
<thead><tr><th>Choosen Questions</th></tr></thead>
<tbody>
</tbody>
</table>
Thanks in advance!
There might be a better way.
But i would add a data-attribute or some class to each of the TD's you can move, and on submit check for each required value.
Created an example here: http://jsfiddle.net/y35Qf/1/
Basicly i added an attribute called data-row, and each table has its own value, on submit i require each of these values to be in the CustomPickedTable - if not i alert that something is missing - else alert success.
You could easily add so you alert which rows are misssing or any other validation you would want.
Is this what you wanted?