It's strange that I didn't find anything at Google but I hope you can help me. I have a Table with different accounts. When I click on one of those rows, another table for this specific account will slide in. This "specific table" for this account needs to show some account specified data and therefore I need to tell my ajax request for what account he needs those data. The problem: I don't know how I can tell this. I never used Ajax requests without a form.
My HTML Table (I need the var $orderid for my ajax request)
foreach($data as $row)
{
$orderid =$row['id'];
$username = $row['name'];
$done = $row['refsDone'];
$quantity = $row['quantity'];
$running =$row['refsRunning'];
$untouched = $quantity - ($done+$running);
echo "
<tr class='header mySlideToggler'>
<td class='align-center'>$username</td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td>$done / $quantity</td>
<td>$running</td>
<td>$untouched</td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'>
Content of the additional info is here
</div>
</td></tr>";
}
My Jquery part which handles only the slide effect of the div and its trigger function:
$('.mySlideToggler').click(function( event ){
event.preventDefault();
event.stopPropagation();
$(this).closest('tr').next().find('.slideMe').slideToggle();
});
So basically my question is: How can I access the php value $orderid from my Jquery function?
Store your id within some data-attribute that can be accessed by JS.
Put the order id in the html:
<tr class='header mySlideToggler' data-id="<?php echo $orderid; ?>">
And then:
$('.mySlideToggler').click(function( event ){
event.preventDefault();
event.stopPropagation();
var id = $(this).data('id');
$(this).next().find('.slideMe').slideToggle();
});
Create some hidden variable and assign value of $orderid to it.
then read same variable inside jQuery. And you are done :)
You can set the ordered attribute wherever you want in your HTML element, like this:
<?php
foreach($data as $row)
{
$orderid =$row['id'];
$username = $row['name'];
$done = $row['refsDone'];
$quantity = $row['quantity'];
$running =$row['refsRunning'];
$untouched = $quantity - ($done+$running);
?>
<tr class='header mySlideToggler' orderedid='<?php echo $orderedid ?>'>
<td class='align-center'><?php echo $username ?></td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td><?php echo $done / $quantity ?></td>
<td><?php echo $running ?></td>
<td><?php echo $untouched ?></td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'>
Content of the additional info is here
</div>
</td></tr>
<?php
}
?>
PHP will render the right id for you like a simple HTML attribute. After it, you can access the attribute of your element using jQuery selector inside your .click() function:
$(this).attr('orderedid');
As a good practice, do not "echo" your HTML. Instead of it, enclose plain HTML inside PHP tags. This will make your code more legible.