Access php value from Jquery

Question

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?

ajax is just a fancy buzzword. It's really just "background http request". just because it's ajax doesn't make it magically special. it's a POST or GET request like any other POST or GET request, it just happens to occur in the background. You still pass "form" name=value pairs around like you would with a regular form, you just don't need an ACTUAL form to do so. — Marc B
– Marc B, Commented Aug 14, 2014 at 21:08
The simplest answer would be that you can't. Php variables are on the server side, while jQuery code is ran on the client. What you can do is add a data field on your html and access this via jQuery. (as @dave explained) — t.pimentel
– t.pimentel, Commented Aug 14, 2014 at 21:11

dave · Accepted Answer · 2014-08-14 21:09:39Z

2

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();
});

answered Aug 14, 2014 at 21:09

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kentor Over a year ago

Thanks so much everyone for trying to help. This works perfectly. I love this community!

Marc Anton Dahmen · Accepted Answer · 2014-08-14 21:09:21Z

0

Store your id within some data-attribute that can be accessed by JS.

answered Aug 14, 2014 at 21:09

Marc Anton Dahmen

1,0916 silver badges6 bronze badges

2 Comments

Félix Adriyel Gagnon-Grenier Over a year ago

consider updating your answer with html code sample

Marc Anton Dahmen Over a year ago

i was about to do it, but actually dave was faster. his answer is the best.

user3657302 · Accepted Answer · 2014-08-14 21:10:05Z

0

Create some hidden variable and assign value of $orderid to it.

then read same variable inside jQuery. And you are done :)

answered Aug 14, 2014 at 21:10

user3657302

3471 silver badge5 bronze badges

Comments

André Muniz · Accepted Answer · 2014-08-14 21:58:05Z

0

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.

answered Aug 14, 2014 at 21:58

André Muniz

7082 gold badges8 silver badges17 bronze badges

1 Comment

kentor Over a year ago

Thank you for the tip and your result. I wonder already about how professionals mix html and php. I will change my style :-)

Collectives™ on Stack Overflow

Access php value from Jquery

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related