I have a while loop in php like this:
<?php
while($row=mysql_fetch_array($query)){
?>
<tr>
<td><?php echo $row['user_id']?></td>
<td><?php echo $row['username']?></td>
<td><?php echo $row['reg_phone']?></td>
<td><?php echo $row['provider_id']?></td>
<td><?php echo $row['trans_id'] ?></td>
<td><input type='button' class='<?php echo $row['trans_id']?>' id="yes" value ='Yes' ></td>
</tr>
<?php
}
?>
and here is javascript code:
<script>
$('#yes').click(function() {
var trans_id=$(this).attr("class");
$.ajax({
url: 'infomation/gc_details_2.php',
data: {'id':trans_id},
success: function(result) {
$('#result').html(result);
}
});
});
</script>
When I click on button Yes, it request to gc_details_2 and result is showing trans_id of row I clicked. But it does not show like that. It showing trans_id of first row. And when I click on button of other row it does not work, and does not showing anything. Am I doing something wrong? Help me
In HTML, an id is a unique identifier. That means you can only use it once on a page.
Because only one can exist, when you're attaching the click handler, the this portion of the click handler is referencing the first element found with the unique identifier.
Change the id to a class if you want to use it multiple times on the same page.
<td><input type='button' class='yes <?php echo $row['trans_id']?>' value ='Yes' ></td>
and
$('.yes').click(function() {...}
Related
I have some php/html that creates a dynamic table with a set of links. When the link is clicked it loads a page $url1 and called a function called 'update' which makes a mysql call.
I am removing the table and modifying the mysql to return a single row. I want the code to 1)load the linked page ($url1) 2)run the update function that is called by onclick.
Original Table
<tr>
<td><?php echo $i; ?></td>
<td><a href="<?php echo $url1; ?>" target="_blank" class="url" onclick="update('<?php echo $row['node']; ?>');"/>Run</td>
<td><?php echo $row['level1_text']." - ".$row['level2_text']." - ".$row['level3_text']." - ".$row['level4_text'] ?></td>
<td><?php echo $row['last_run_date']; ?><input type="text" class="node" value="<?php echo $row['node']; ?>" hidden></td>
<td id="cnt"><?php echo $row['run_count']; //$idate=explode(" ",$row['insertdate']); $bdate=explode("-",$idate[0]); echo $bdate[2]."-".$bdate[1]."-".$bdate[0]; ?></td>
</tr>
I started with the 'update' function, i figured I could reduce the sql statement to return only 1 row and call the update function with this code.
<script type="text/javascript">update('<?php echo $row['node']; ?>');</script>
That doesn't seem to work so I further simplified the code for testing but my update function is not being called.
<script type="text/javascript">update('525');</script>
Any pointers? Is there a good way call this function on page load and then load the page at $url?
i have three buttons (view,update,delete) , the view button is an href that goes to another page and brings an id with it, while my update triggers a modal. my problem is that when i click the view button it goes to the other page but it also triggers the update modal.
home.php
<?php
foreach($schedRow as $row)
{
?>
<tr>
<td><?php echo $row['subject_db']; ?></td>
<td><?php echo $row['section_db']; ?></td>
<td><?php echo $row['sched_day']; ?></td>
<td><?php $stime=$row['start_time'];
$etime=$row['end_time']; echo "".date('h:i a',strtotime($stime))." ~ ".date('h:i a',strtotime($etime))."";?></td>
<td>
View
<a href="#" class="btn btn-warning" data-toggle="modal"
data-target="#updateModal-<?php echo $row['sched_id']; ?>">Update</a>
Delete
<?php include'modal_update_sched.php'; ?>
</td>
</tr>
<?php
}
?>
heres the id of my modal
id="updateModal-<?php echo $row['sched_id']; ?>"
i solved it, the problem is that i called the modal in my view.php thats why it keeps triggering, note that i separated the code for my modal in another php file named modal_update_sched.php , i somewhat had an include 'modal_update_sched.php'; in my view.php, deleting it solved my problem.
I want to get dynamic values from php in js in a dynamic manner...Let me elaborate: First I show the image then code:
<div id="">
<table border="1" width="820" style="margin-left:15px;">
<tr>
<th>Sr #</th>
<th>Commented Post</th>
<th>Commenter Name</th>
<th>Commenter Email</th>
<th>Comments</th>
<th>Status</th>
</tr>
<?php
$values = array();
while($row= mysqli_fetch_assoc($res)) {
$values[] = $row['comment_id'];
?>
<tr align="center" style="height:50px;">
<td><?php echo $row['comment_id']; ?></td>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['comment_name']; ?></td>
<td><?php echo $row['comment_email']; ?></td>
<td><?php echo $row['comment_text']; ?></td>
<td>
<?php
if($row['status']==0) { ?>
<div class="status_<?php echo $row['comment_id']; ?>" id="status_<?php echo $row['comment_id']; ?>">Unapproved</div>
<?php } else { ?>
Approved
<?php } ?>
</td>
</tr>
<?php }
?>
</table>
</div>
And Js here's:
<script type="text/javascript">
$(document).ready(function(){
var values = <?php echo json_encode($values); ?>;
var id = values[0];
$('.status_'+id).click(function(){
$("#status_"+id).html("<b>Test</b>");
});
var i = values[1];
$('.status_'+i).click(function(){
$("#status_"+i).html("<b>Test</b>");
});
});
</script>
I want to get all comment id's in js dynamically, so that on clicking each row link, it changes to text "Test"...As I have written the js code manually...how we obtain all the comment_id's dynamically in js..I hope you got the idea what I am trying to do...
There's no point in assigning unique ids to each of your elements. Why not do something like:
<tr>
<td>...</td>
<td><a href="#" onclick="toggle(this, <?php echo $id ?>)">Unapproved</td>
</tr>
then something like
function toggle(node, id) {
node.parentNode.innerHTML = '<b>test</b>';
... do something with "id" value? ...
}
No need for getElementById, assigning a massive pile of repetitive ids, etc.. just a single function call and a bit of DOM tree traversal.
Try to add a class to your status TD, like <td class="status" data-id="<?php echo $row['comment_id'] ?>">// your inital value</td>.
Using jQuery you can easily listen for events which are attached to a an event listener:
$(document).on('click', '.status', function() {
var id = $(this).attr('data-id');
$(this).html('<strong>Test</strong>');
// maybe to something with ajax?
$.ajax({
url: 'yourfile.php?call=doSomething&id=' + id,
type: 'post'
}).done(function(response) {
// console.log(response);
});
});
You dont appear to actually use the ids.
All you need to do is ascertain the clicked element, which use can do using this
html:
<div class="status">Unapproved</div>
js:
$(document).ready(function(){
$('.status').click(function(){
$(this).html("<b>Test</b>");
});
});
I have a table that displays all the data from my database and I've added a new column for edit button on each row so that this would update the data from my database when the user click a certain button he wants to update.
I have this code to loop through the data and display in a tabular format in my page:
<!--############## TABLE HEADER ##############-->
<thead>
<tr>
<th>Dummy ID</th>
<th>Date</th>
<th>NCA Balances</th>
<th>Account</th>
<!-- Update Button on each row -->
<th style="text-align:center;">Update</th>
</tr>
</thead>
<!--##########################################-->
<!--############# TABLE CONTENT ##############-->
<tbody>
<?php
$s1 = mysql_query("SELECT * FROM nca_totals");
while($row = mysql_fetch_array($s4)) {
$db_id = $row['total_id'];
$db_date = $row['nca_date'];
$db_balance = $row['nca_total'];
$db_account = $row['account_type'];
?>
<tr>
<!-- Input fields to be hidden just to get the ID value -->
<td><input type="text" id="total_id" value="<?php echo $db_id ?>"></td>
<td><?php echo $db_date ?></td>
<td><?php echo number_format($db_balance,2) ?></td>
<td><?php echo $db_account ?></td>
<td style="text-align:center;">
<button type="button" id="btn-update">Update</button>
</td>
</tr>
<?php } ?>
</tbody>
<!--##########################################-->
I want to use Ajax in jQuery so that when the user click the button update, the page does not have to reload. But first, I want to confirm that I get exactly the ID on each row and pass it to my jquery function like this:
update_nca.js
$(document).ready(function(){
// Get the values
$("#btn-update").click(function(){
var total_id = $("#total_id").val();
alert(total_id);
});
});
When I click the first button on the first row, It gets the ID from my table. But on the next row as well as the other row, no ID has been pass into my jquery. It doesn't get any value from my dummy textbox. Please help me improve my codes. Any help would be appreciated. Thanks
you are sharing the same ID to multiple inputs which makes a problem! I think you better use a class instead or remove it.
<tr>
<!-- Input fields to be hidden just to get the ID value -->
<td><input type="text" class="total_id" value="<?php echo $db_id ?>"></td>
<td><?php echo $db_date ?></td>
<td><?php echo number_format($db_balance,2) ?></td>
<td><?php echo $db_account ?></td>
<td style="text-align:center;">
<button type="button" class="btn-update">Update</button>
</td>
</tr>
$(".btn-update").click(function(){
var total_id = $(this).closest('tr').find('.total_id').val();
alert(total_id);
});
Id should be unique in any HTML document. You can use classes to represent the identity. Change id="total_id" to class="total_id". And id="btn-update" to class="btn-update".
Then, use this code to get the value from the total-id input.
$(".btn-update").click(function(){
var total_id = $(this).parent().parent().find(".total_id").val();
alert(total_id);
});
BTW way, $(this) represented the element that's taking the event, in this case the update button.
I suggest you pass the db_id value to a data- attribute, perhaps named data-db-id. Since each <tr> represents a record, place the data-db-id attribute on each <tr> element. Then with jQuery, retrieve the value of the data- attribute with the .data method: var id = $(this).data('db-id'). See complete example below:
<?php
$s1 = mysql_query("SELECT * FROM nca_totals");
while($row = mysql_fetch_array($s4)) {
$db_id = $row['total_id'];
$db_date = $row['nca_date'];
$db_balance = $row['nca_total'];
$db_account = $row['account_type'];
?>
<tr data-db-id="<?= $db_id ?>">
<td><?= $db_date ?></td>
<td><?= number_format($db_balance,2) ?></td>
<td><?= $db_account ?></td>
<td style="text-align:center;">
<button class="btn-update">Update</button>
</td>
</tr>
<?php } ?>
</tbody>
<script>
$('table').on('click', '.btn-update', function() {
var id = $(this).closest('tr').data('db-id');
// do something with the id....
});
</script>
Note a few changes:
This example uses the short PHP echo syntax (<?= $foo ?>).
Event delegation is used here. Read more here.
As others have already said, keep your id attribute values unique. (i.e., switch id="btn_update" in your loop to `class="btn_update")
I got the following php foreach loop in the A page of my web appliation. And i want to use the $watson variable which is inside this loop in an other php B page. What i did is used this variable as a value in an extra input button:<input type="button"/ value="<?php echo $watson; ?>,so to be able to capture this var in javascript like you see below.
<tbody>
<?php
foreach($records as $r) {
$watson = $r->case_reference;
?>
<tr>
<td><?php echo escape($r->user); ?></td>
<td><?php echo escape($r->customer); ?></td>
<td><?php echo escape($r->vessel); ?></td>
<td><?php echo escape($r->country); ?></td>
<td><?php echo escape($r->port); ?></td>
<td><?php echo escape($r->eta); ?></td>
<td><?php echo escape($r->service_station); ?></td>
<td><?php echo escape($r->type_of_service); ?></td>
<td><?php echo escape($r->case_reference); ?></td>
<td><?php echo escape($r->status); ?></td>
<td><input type="button" value="<?php echo $watson; ?>" onclick="popEdit(this.value);" /></td>
</tr>
<?php
}
?>
</tbody>
The code for the onclick="popEdit(this.value);"function which pops up the B page mentioned above is :
function popEdit(str) {
window.open("example.php?watson="+str, "pop_edit_jobs",
"width=400,height=350,scrollbars=no,left=460,top=400")
}
And the php B page code starts as $ref_num = $_GET['watson']; so i can use the variable.
My problem is that i dont want the input/button in the A page to show the variable on it instead i want it to just show the word EDIT.But to do that i ll have to change its value and then i wont be able to capture this $watson var in javascript.
Any suggestions regarding how to achieve the above effect?
<td><input type="button" value="EDIT" onclick="popEdit('<?php echo $watson; ?>');" /></td>
should achieve the desired effect.
Wrap a form around your entire table, then use submit buttons:
<input type="submit" name="watson" value="<?php echo htmlspecialchars($watson); ?>" />