Passing PHP Variables to JavaScript Function

Question

I'm attempting to pass some PHP variables to a JavaScript function, which then updated elements in a Bootstrap Modal. It works fine when the first five are passed, but when I attempt to pass the 6th it acts as if the JavaScript function completely fails to run.

What's odd is that the only difference between the working and non-working versions is the addition of the extra parameter. I don't understand why adding that parameter would cause it to fail. Would really appreciate any help!

Working PHP:

echo '<td><a data-toggle="modal" href="#myModal" onclick="updateModal('.$order_id.','.$order_placed.','.$order_payout.','.$order_due.','.$order_pages.')" class="btn btn-primary btn-lg">View</a></td>';

Non-Working PHP:

echo '<td><a data-toggle="modal" href="#myModal" onclick="updateModal('.$order_id.','.$order_placed.','.$order_payout.','.$order_due.','.$order_pages.','.$order_level.')" class="btn btn-primary btn-lg">View</a></td>';

JavaScript

<script type="text/javascript">
function updateModal(the_id, date_placed, payout, due_date, req_pages, o_level,
subject, spacing, sources, format, c_name, c_email, c_phone){

 $("#order_num").text(the_id);
$("#order_placed").text(date_placed);
$("#order_payout").text("$" + payout);
$("#order_due").text(due_date);
$("#order_pages").text(req_pages);
$("#order_level").text(o_level);
$("#order_subject").text(subject);
$("#order_spacing").text(spacing);
$("#order_sources").text(sources);
$("#order_format").text(format);
$("#customer_name").text(c_name);
$("#customer_email").text(c_email);
$("#customer_phone").text(c_phone);

}
</script>

Modal Code

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3 class="modal-title">Order <span class="color" id="order_num">x</span></h3>
      <p><small><strong>Order Placed:</strong><span id="order_placed">n/a</span></small></p>
    </div>
    <div class="modal-body">
      <h3>You Recieve: <span class="color" id="order_payout">n/a</span></h3>
      <h4>Due Date: <span class="color" id="order_due">n/a</span></h4>
      <h4>Pages Required: <span class="color" id="order_pages">n/a</span></h4>  
      <hr>
      <p><strong>Academic Level: </strong><span id="order_level">n/a</span></p>
      <p><strong>Subject: </strong><span id="order_subject">n/a</span></p>
      <p><strong>Spacing: </strong><span id="order_spacing">n/a</span></p>
      <p><strong>Sources: </strong><span id="order_sources">n/a</span></p>
      <p><strong>Format: </strong><span id="order_format">n/a</span></p>
      <hr>
      <h3>Customer Details</h3>
      <p><strong>Customer Name: </strong><span id="customer_name">n/a</span></p>
      <p><strong>Customer Email: </strong><span id="customer_email">n/a</span></p>
      <p><strong>Customer Phone Number: </strong><span id="customer_phone">n/a</span></p>
      <hr>
      <h3>Additional Info</h3>


    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

If the echo string is surrounded by double-quotes instead of single, you don't need to break the string to insert variables. (Cool huh?) `echo "alert(This $variable works '$fine');";` — CP510, Sep 24 '13 at 18:38
I have three entries in a test database, this populates the table that the PHP code echos to. In each case the value of $order_level is "Undergraduate" — Arw50452, Sep 24 '13 at 18:38
Your javascript isn't checking if all variables are properly used, you can employ default parameters as such... `o_level = typeof o_level !== 'undefined' ? o_level : 'default';` — CP510, Sep 24 '13 at 18:41

score 0 · Answer 1 · answered Sep 24 '13 at 18:45

0

I strongly suggest passing the variables as an JSON object:

$parameters = array(
    'id' => $order_id,
    'placed' => $order_placed,
    'payout' => $order_payout,
    'due' => $order_due,
    'pages' => $order_pages,
    'level' => $order_level,
    // and so on
);

echo '<td><a data-toggle="modal" href="#myModal" onclick="updateModal('.json_encode($parameters).')" class="btn btn-primary btn-lg">View</a></td>';

And then in JS:

<script type="text/javascript">
function updateModal(parameters) {
    $("#order_num").text(parameters.id);
    $("#order_placed").text(parameters.placed);
    $("#order_payout").text("$" + parameters.payout);
    $("#order_due").text(parameters.due);
    $("#order_pages").text(parameters.pages);
    $("#order_level").text(parameters.level);
    $("#order_subject").text(parameters.subject);
    $("#order_spacing").text(parameters.spacing);
    $("#order_sources").text(parameters.sources);
    $("#order_format").text(parameters.format);
    $("#customer_name").text(parameters.c_name);
    $("#customer_email").text(parameters.c_email);
    $("#customer_phone").text(parameters.c_phone);
}
</script>

answered Sep 24 '13 at 18:45

matewka

9,912
2
32
43

I just tried implementing this, with and without $order_level as part of the array. It isn't working in both cases – Arw50452 Sep 24 '13 at 18:51
It should work. Can you give some more details? Can you paste the HTML rendered by PHP? – matewka Sep 24 '13 at 19:09
When I implement the code as you posted, the modal comes up correctly but the value in each span tag is "n/a". This is also what happens when I add $order_level as mentioned in the original question. I defined the array right after the php variables, which are defined in a while loop that uses them to output each row in the database into the table. Maybe this has something to do with it? – Arw50452 Sep 24 '13 at 19:48
In your example `span`'s html is already "n/a" so I guess the `updateModal` function is not firing. – matewka Sep 24 '13 at 19:53
Yeah that's whats so strange. When I try passing the 5 variables in the "working php" it fires and works fine, when I add one more (tried others besides $order_level), or when I try your method... nothing. – Arw50452 Sep 24 '13 at 20:04
Can you `var_dump($order_level);` and paste the result? – matewka Sep 24 '13 at 20:16
The results are as follows: string(13) "Undergraduate" string(13) "Undergraduate" string(13) "Undergraduate" I don't think it's a problem with the variable itself, as any 6th variable I add causes the problem, regardless of what it is. – Arw50452 Sep 24 '13 at 20:20
@Arw50452 I reviewed your code a few times and can't find the problem. It must be somewhere outside the code you presented above. One more thing - can you paste the content of what's inside `updateModal` function call after its rendered by PHP (between the brackets)? You can check it in browser's object inspector or in source (Ctrl + U). – matewka Sep 24 '13 at 20:27
Thanks for all your help, I believe this is what you requested. Each of these should be passed when the corresponding button in the table is pressed. onclick="updateModal({"order_id":"3","order_placed":"2013-09-06","order_payout":150,"order_due":"2013-09-21","order_pages":"3"})" onclick="updateModal({"order_id":"1","order_placed":"2013-09-12","order_payout":12.85,"order_due":"2013-10-01","order_pages":"4"})"" onclick="updateModal({"order_id":"2","order_placed":"2013-09-15","order_payout":50.25,"order_due":"2013-10-03","order_pages":"7"})" – Arw50452 Sep 24 '13 at 23:21

Passing PHP Variables to JavaScript Function

1 Answers1