我正在尝试将一些PHP变量传递给JavaScript函数,然后JavaScript函数更新Bootstrap模式中的元素。它在前五个传递时工作正常,但是当我尝试传递第六个时,它就好像JavaScript函数完全无法运行一样。
奇怪的是,工作版和非工作版之间的唯一区别是添加了额外参数。我不明白为什么添加该参数会导致它失败。非常感谢任何帮助!
使用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>';
非工作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>
模态代码
<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">×</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 -->
答案 0 :(得分:0)
我强烈建议将变量作为JSON对象传递:
$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>';
然后在 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>