使用Ajax将jQuery可编辑的HTML页面加载到php页面时效果不佳

Question

My html page that has jQuery editable just working fine when open it through chrome, but when I load it from another php page using ajax, it's not well functioning. 我的具有jQuery可编辑功能的html页面在通过chrome打开它时工作正常，但是当我使用ajax从另一个php页面加载它时，它的功能却不佳。

This is my online_store.html page that runs the jQuery editable page: 这是我的online_store.html页面，它运行jQuery可编辑页面：

 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../css/bootstrap.css" rel="stylesheet"> <title>Online Store</title> <link href="../fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome-all.css" rel="stylesheet"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.js"></script> <script src="../js/jquery.tabledit.js"></script> </head> <body onload="viewdata()"> <div class="container" style="margin-top: 35px"> <h4>PRODUCT</h4> <table id="tabledit" class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>NAME</th> <th>IMAGE</th> <th>PRRICE</th> <th>DISCOUNT</th> </tr> </thead> <tbody></tbody> </table> </div> <center> <div class="container"> <button class="btn btn-outline-primary" type="button" data-toggle="modal" data-target="#adddata">ADD</button> <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#adddata">ADD</button> <!-- Modal --> <div class="modal fade" id="adddata" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="adddatalabel">Insert New Product</h4> </div> <form> <div class="modal-body"> <div class="form-group"> <label for="productname">Product name</label> <input type="text" class="form-control" id="productname" placeholder="Name"> </div> <div class="form-group"> <label for="productprice">Price</label> <input type="email" class="form-control" id="productprice" placeholder="Price"> </div> <div class="form-group"> <label for="productdiscount">Discount</label> <input type="email" class="form-control" id="productdiscount" placeholder="Discount"> </div> <div class="form-group"> <label for="exampleInputFile">Image FIle</label> <input type="file" id="imageproduct"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" onClick="insertData()" class="btn btn-primary">Insert</button> </div> </form> </div> </div> </div> </div> </center> <script> function viewdata() { $.ajax({ url:'admin_onlinestore2.php?p=view', method: 'GET' }).done(function(data){ $('tbody').html(data) tableData() }) } function tableData() { $('#tabledit').Tabledit({ url: 'admin_onlinestore2.php', eventType:'dbclick', eventType: 'dblclick', editButton: true, deleteButton: true, buttons: { edit: { class: 'btn btn-sm btn-default', html: '<span class="glyphicon glyphicon-pencil">EDIT</span>', action: 'edit' }, delete: { class: 'btn btn-sm btn-default', html: '<span class="glyphicon glyphicon-trash">DELETE</span>', action: 'delete' }, save: { class: 'btn btn-sm btn-success', html: 'Save' }, restore: { class: 'btn btn-sm btn-warning', html: 'Restore', action: 'restore' }, confirm: { class: 'btn btn-sm btn-danger', html: 'Confirm' } }, columns: { identifier: [0, 'id'], editable: [[1, 'name'],[2, 'image'], [3, 'price'], [4, 'discount']] }, onSuccess: function(data, textStatus, jqXHR) { viewdata() }, onFail: function(jqXHR, textStatus, errorThrown) { console.log('onFail(jqXHR, textStatus, errorThrown)'); console.log(jqXHR); console.log(textStatus); console.log(errorThrown); }, onAjax: function(action, serialize) { console.log('onAjax(action, serialize)'); console.log(action); console.log(serialize); } }); } function insertData(){ var productname = $('#productname').val(); var productprice = $('#productprice').val(); var productdiscount = $('#productdiscount').val(); var imageproduct = $('#imageproduct').val(); $.ajax({ type:"POST", url:"insertproduct.php?p=add", data:"productname="+productname+"&productprice="+productprice+"&productdiscount="+productdiscount+"&imageproduct="+imageproduct, success: function(msg){ alert('Success insert data'); clearForm(this.form); } }) } </script> </body> </html>

and this is their php code online_store.php 这是他们的php代码online_store.php

 <?php $mysqli = new mysqli('localhost', 'root', '', 'register'); if (mysqli_connect_errno()) { echo json_encode(array('mysqli' => 'Failed to connect to MySQL: ' . mysqli_connect_error())); exit; } $page = isset($_GET['p'])? $_GET['p'] : ''; if($page =='view') { $result = $mysqli->query("SELECT * FROM tbl_product ORDER BY id ASC"); while ($row = $result->fetch_assoc()){ ?> <tr> <td><?php echo $row['id'] ?></td> <td><?php echo $row['name'] ?></td> <td><?php echo $row['image']?></td> <td><?php echo $row['price'] ?></td> <td><?php echo $row['discount'] ?></td> </tr> <?php } } else { header('Content-Type: application/json'); $input = filter_input_array(INPUT_POST); if ($input['action'] == 'edit') { $mysqli->query("UPDATE tbl_product SET name='" . $input['name'] . "', image='" . $input['image'] . "', price='" . $input['price'] . "', discount='" . $input['discount'] . "' WHERE id='" . $input['id'] . "'"); } else if ($input['action'] == 'delete') { $mysqli->query("DELETE from tbl_product WHERE id='" . $input['id'] . "'"); } mysqli_close($mysqli); echo json_encode($input); } ?>

This is my main.php page that load the online_store.html into div using ajax 这是我的main.php页面，它使用ajax将online_store.html加载到div中

 <?php include("authadmin.php"); ?> <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Admin Page</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/adminstyle.css"> <link href="../css/bootstrap.css" rel="stylesheet"> <link href="../fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome-all.css" rel="stylesheet"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.js"></script> <script src="../js/jquery.tabledit.js"></script> <script type="text/javascript"> function onlinestore() { alert("test"); $.post('admin_onlinestore.html', function(output) { $('#main_ajax_page').html(output).show(); }); return false; } </script> </head> <body> <header role="banner"> <h1>Admin Panel</h1> <ul class="utilities"> <li> <p>Welcome <?php echo $_SESSION['username']; ?></p></li> <li class="users"><a href="#">My Account</a></li> <li class="logout warn"><a href="logout.php">Log Out</a></li> </ul> </header> <nav role='navigation'> <ul class="main"> <li class="dashboard"><a href="#" onclick="onlinestore();" >Online Store</a></li> <li class="edit"><a href="#" id="myLink" >Proofreader Services</a></li> <li class="write"><a href="#" onclick="adminforum();" >Forum</a></li> <li class="users"><a href="#" onClick="adminmanager();">Manage Users</a></li> <li class="edit"><a href="#" onClick="salesrecord();">Sales Record</a></li> </ul> </nav> <main role="main" id="main_ajax_page1"> <section class="panel important"> <div class="twothirds" id="main_ajax_page"> </div> </form> </section> </main> </body> </html>

Answer 1

When you view the page in Chrome, the Chrome is executing all the javascript appended to it, thus rendering the page with additional elements. 当您在Chrome浏览器中查看页面时，Chrome浏览器将执行附加到该页面的所有JavaScript，从而用其他元素呈现该页面。 When you retrieve the page through php (ajax), then all you get is raw html that hasn't been altered by javascript. 当您通过php（ajax）检索页面时，您得到的只是未被javascript更改过的原始html。

I know of no posibility to apply javascript rendering in php though. 我不知道在php中应用javascript渲染的可能性。

Edit: 编辑：

There might be a way: https://sebastiandedeyne.com/server-side-rendering-javascript-from-php 可能有一种方法： https : //sebastiandedeyne.com/server-side-rendering-javascript-from-php

使用Ajax将jQuery可编辑的HTML页面加载到php页面时效果不佳

问题描述

1 个解决方案

解决方案1
0 2018-05-18 07:30:16

使用Ajax将jQuery可编辑的HTML页面加载到php页面时效果不佳

问题描述

1 个解决方案

解决方案1 0 2018-05-18 07:30:16

解决方案1
0 2018-05-18 07:30:16