javascript - 当 php 变量值很大时，模态框不会打开

Question

我在表的每一行的 while 循环内使用编辑按钮，将行值传递到模态表单中。

<td><a class="custom-links" onclick='EditModal("<?php echo $data['id']; ?>","<?php echo $data['name']; ?>","<?php echo $data['price']; ?>","<?php echo $data['description']; ?>","<?php echo $data['type']; ?>","<?php echo $data['cooking_instructions']; ?>","<?php echo $data['ingredients']; ?>","<?php echo $data['allergen_warnings']; ?>","<?php echo $data['storage_instructions']; ?>","<?php echo $data['case_size']; ?>","<?php echo 'uploaded_images/'.$data['image']; ?>")'>
    <button type="button" id="<?php echo $data['id']; ?>" class='btn btn-primary glyphicon glyphicon-edit'></button></a></td>

然后我设置像这样的值

function EditModal(id,name,price,description,type,cooking_instructions,ingredients,allergen_warnings,storage_instructions,case_size,image){

document.getElementById("update_id").value = id;
document.getElementById("update_name").value = name;
document.getElementById("update_price").value = price;
document.getElementById("update_description").value = description;
document.getElementById("update_type").value = type;
document.getElementById("update_cooking_instructions").value = cooking_instructions;
document.getElementById("update_ingredients").value = ingredients;
document.getElementById("update_allergen_warnings").value = allergen_warnings;
document.getElementById("update_storage_instructions").value = storage_instructions;
document.getElementById("update_case_size").value = case_size;
document.getElementById("update_image_to_upload").src = image;

$('#update_menu_modal').modal('show');}

update_cooking_instructions、update_ingredients、update_allergen_warnings 是文本区域。

问题是当 $data['cooking_instructions'], $data['ingredients'], $data['allergen_warnings'] 包含较少单词或者我将它们从 EditModal 函数，当它们的值很大时模态不会打开。

谁能指出我的错误吗？我究竟做错了什么？当我从 EditModal

中删除这三个变量时，模态将打开

Answer 1

尝试一下，但请注意，单引号仍然会出现问题:

<td><a class="custom-links" onclick='EditModal(<?php echo json_encode($data['id']); ?>,<?php echo json_encode($data['name']); ?>,<?php echo json_encode($data['price']); ?>,<?php echo json_encode($data['description']); ?>,<?php echo json_encode($data['type']); ?>,<?php echo json_encode($data['cooking_instructions']); ?>,<?php echo json_encode($data['ingredients']); ?>,<?php echo json_encode($data['allergen_warnings']); ?>,<?php echo json_encode($data['storage_instructions']); ?>,<?php echo json_encode($data['case_size']); ?>,<?php echo json_encode('uploaded_images/'.$data['image']); ?>)'>
    <button type="button" id=<?php echo json_encode($data['id']); ?> class='btn btn-primary glyphicon glyphicon-edit'></button></a></td>

我删除了双引号，而是使用 json_encode 来发出值。 (我假设每个值都是 PHP 端的一个字符串。)

我对这个问题的猜测(尽管我对为什么它不会导致控制台错误感到困惑)是你的“大”值中有引号或换行符。这类事情:

EditModal("<?php echo foo; ?>");

如果你有换行符，就会变成这样:

EditModal("first line
second line");

这不是有效的 JavaScript。同样，双引号可以做到这一点:

EditModal("Here is a quote --> " <-- see?");

这也不是有效的 JavaScript。

用这个代替:

EditModal(<?php echo json_encode(foo); ?>);

将把这些例子变成这些:

EditModal("first line\nsecond line");

和

EditModal("Here is a quote --> \" <-- see?");

两者都很好。