Я заранее извиняюсь за то, что это немного длиннее. Я пытался понять это ненадолго, поэтому я хотел опубликовать большую часть своего кода, чтобы удивительные люди, помогающие мне, могли лучше понять, что я делаю. Это было предложено мне в моем последнем посте – Невозможно получить .js для вызова формы POST – что я создаю новый поток
У меня был проект, где весь код выполнялся на одной странице, html, php, javascript и кучке SQL-запросов. Я пытаюсь отойти от этого, использовать отдельные страницы и включить AJAX в это, чтобы я мог обновить базу данных, которая является центральной для страницы, без обновления.
У меня есть две основные страницы – test.php и getuser.php , а также два младших бита, update.php и update.js .
test.php – это страница, которую я загружаю первым. Он разделен на два <div> s, верхний div, который содержит SQL-запрос к моей базе данных для выбора пользователя, а нижний div, который после выбора пользователя из выпадающего меню запускает скрипт showUser (), и отправляет запрос AJAX на getuser.php для загрузки остальной части страницы ниже.
<?php session_start(); ?> <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="/bootstrapstyle.css"> <link rel="stylesheet" href="/toastr.css"> <script type="text/javascript" src="/toastr.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 50px; padding-bottom: 20px; } </style> <script type="text/javascript" src="/update.js"></script> <script> function showUser(str) { if (str !==".PM") { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a class="navbar-brand" href="home.php">HOME</a> </div> <div class="navbar-collapse collapse"> <form> <ul class="nav navbar-nav"> <li> <a> <?php include('./db.php'); $PM = mysqli_query($con, "SELECT DISTINCT PMName FROM report WHERE PMname <> '' ORDER BY PMName ASC"); ?> <span class="custom-dropdown custom-dropdown--red"> <select class="navbar-inverse" placeholder="PM Name" name="PMName" onchange="showUser(this.value)"> <?php while ($row = mysqli_fetch_row($PM)) { $selected = array_key_exists('PMName', $_POST) && $_POST['PMName'] == $row[0] ? ' selected' : ''; printf(" <option value='%s' %s>%s</option>\n", $row[0], $selected, $row[0]); } ?> </select> </span> </a> </li> </ul> </form> </div> </div> </div> <div id="txtHint"><b>Select a name from the dropdown menu above...</b></div> </body> </html>в<?php session_start(); ?> <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="/bootstrapstyle.css"> <link rel="stylesheet" href="/toastr.css"> <script type="text/javascript" src="/toastr.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 50px; padding-bottom: 20px; } </style> <script type="text/javascript" src="/update.js"></script> <script> function showUser(str) { if (str !==".PM") { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a class="navbar-brand" href="home.php">HOME</a> </div> <div class="navbar-collapse collapse"> <form> <ul class="nav navbar-nav"> <li> <a> <?php include('./db.php'); $PM = mysqli_query($con, "SELECT DISTINCT PMName FROM report WHERE PMname <> '' ORDER BY PMName ASC"); ?> <span class="custom-dropdown custom-dropdown--red"> <select class="navbar-inverse" placeholder="PM Name" name="PMName" onchange="showUser(this.value)"> <?php while ($row = mysqli_fetch_row($PM)) { $selected = array_key_exists('PMName', $_POST) && $_POST['PMName'] == $row[0] ? ' selected' : ''; printf(" <option value='%s' %s>%s</option>\n", $row[0], $selected, $row[0]); } ?> </select> </span> </a> </li> </ul> </form> </div> </div> </div> <div id="txtHint"><b>Select a name from the dropdown menu above...</b></div> </body> </html>
<?php session_start(); ?> <!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="/bootstrapstyle.css"> <link rel="stylesheet" href="/toastr.css"> <script type="text/javascript" src="/toastr.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 50px; padding-bottom: 20px; } </style> <script type="text/javascript" src="/update.js"></script> </head> <body> <?php $q = $_GET['q']; include('./db.php'); $LimitStart = 0 ; $LimitItems = 10 ; //THIS IS THE SQL COMMAND THAT ACTUALLY GRABS THE CORRECT PM $sqlPM= "SELECT * FROM report WHERE PMName = '".$q."' and REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems"; $result = mysqli_query($con, $sqlPM); // THIS IS FOR THE PAGE COUNT TOTAL OF THAT SPECIFIC PM $sqlCommand = "SELECT COUNT(*) FROM report where PMName = '".$q."' AND REGNSB <> 0.000"; $query = mysqli_query($con, $sqlCommand) or die(mysqli_error()); $pages = mysqli_fetch_row($query); $totalPages = round($pages[0] / 10); mysqli_free_result($query); if (isset($_POST['previous'])) { $postedLimit = (isset($_POST['previous']) ? (int) $_POST['previous'] : 0); $prevLimit = 1; $_SESSION['page'] = ((int) $nextLimit / 10)+1; $result = mysqli_query($con, "SELECT * FROM report WHERE PMName = '$PMSelection' AND REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems"); } if (isset($_POST['next'])) { $postedLimit = (isset($_POST['next']) ? (int) $_POST['next'] : 0); $nextLimit = $postedLimit + 10; $_SESSION['page'] = ((int) $nextLimit / 10)+1; $result = mysqli_query($con, "SELECT * FROM report WHERE PMName = '$PMSelection' AND REGNSB <> 0.000 ORDER BY TrackNumber ASC, RegNSB DESC Limit $nextLimit,$LimitItems"); } if (isset($_SESSION['page'])) { } else { $_SESSION['page'] = 1 ; } ?> <!-- MAIN JUMBOTRON THAT LISTS THE TITLE OF THE PAGE AS WELL AS THE PAGE 1 OF X THING... --> <div class="jumbotron"> <div class="container"> <h1 class="pull-left">DW1 Invoice-Backlog Report</h1> <h2 class="pull-right"><?= $q ?></h2> </div> <div class="container"> <div class="test"> <div class="inner"> <form method="POST" action=""> Page <?= $_SESSION['page'] ?> of <?= $totalPages ?> : <input class="button" type="submit" name="previous" value="START" onclick="this.value=<?php echo $prevLimit; ?>"> <input class="button" type="submit" name="next" value="NEXT" onclick="this.value=<?php echo $nextLimit; ?>"> </form> </div> </div> </div> <div class="container pull-right"> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3 col-lg-12"> <form id="updateChanges" method="POST" action="update.php"> <div class="container pull-right"> <h2 class="pull-left"> <input class="button" name="update"<?= $LineID ?>" type="submit" id="update" value="UPDATE"> </h2> </div> <div id="tableRefresh"> <table id="box-table-a"> <tr> <th> ..all my headers.......... </th> </tr> <?php while ($row = mysqli_fetch_array($result)) { $LineID = $row['LineID']; $trackNumber = $row['TrackNumber']; $PMName = $row['PMName']; $RegNSB = number_format($row['RegNSB'], 0); $TrackCount = $row['TrackCount']; $TrackNSB = number_format($row['TrackNSB'], 0); $TotalBacklog = number_format($row['TotalBacklog'], 0); $AverageBacklog = number_format($row['AverageBacklogTrackMargin'] * 100, 2); $RGPPercent = number_format($row['RGPPercent'] * 100, 2); $PMComments = $row['PMComments']; $PMMRecommendations = $row['PMMRecommendations']; $Outcome = $row['Outcome']; $NewGPPercent = $row['NewGPPercent']; $AdditionalGP = $row['AdditionalGP']; $PMM = $row['PMM']; $NEDA = $row['NEDA']; $InvoiceNumber = $row['InvoiceNumber']; $InvCustEB = $row['InvCustEB']; ?> <tr> <td> ....all my rows... </td> </tr> <?php } ?>в<?php session_start(); ?> <!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="/bootstrapstyle.css"> <link rel="stylesheet" href="/toastr.css"> <script type="text/javascript" src="/toastr.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 50px; padding-bottom: 20px; } </style> <script type="text/javascript" src="/update.js"></script> </head> <body> <?php $q = $_GET['q']; include('./db.php'); $LimitStart = 0 ; $LimitItems = 10 ; //THIS IS THE SQL COMMAND THAT ACTUALLY GRABS THE CORRECT PM $sqlPM= "SELECT * FROM report WHERE PMName = '".$q."' and REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems"; $result = mysqli_query($con, $sqlPM); // THIS IS FOR THE PAGE COUNT TOTAL OF THAT SPECIFIC PM $sqlCommand = "SELECT COUNT(*) FROM report where PMName = '".$q."' AND REGNSB <> 0.000"; $query = mysqli_query($con, $sqlCommand) or die(mysqli_error()); $pages = mysqli_fetch_row($query); $totalPages = round($pages[0] / 10); mysqli_free_result($query); if (isset($_POST['previous'])) { $postedLimit = (isset($_POST['previous']) ? (int) $_POST['previous'] : 0); $prevLimit = 1; $_SESSION['page'] = ((int) $nextLimit / 10)+1; $result = mysqli_query($con, "SELECT * FROM report WHERE PMName = '$PMSelection' AND REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems"); } if (isset($_POST['next'])) { $postedLimit = (isset($_POST['next']) ? (int) $_POST['next'] : 0); $nextLimit = $postedLimit + 10; $_SESSION['page'] = ((int) $nextLimit / 10)+1; $result = mysqli_query($con, "SELECT * FROM report WHERE PMName = '$PMSelection' AND REGNSB <> 0.000 ORDER BY TrackNumber ASC, RegNSB DESC Limit $nextLimit,$LimitItems"); } if (isset($_SESSION['page'])) { } else { $_SESSION['page'] = 1 ; } ?> <!-- MAIN JUMBOTRON THAT LISTS THE TITLE OF THE PAGE AS WELL AS THE PAGE 1 OF X THING... --> <div class="jumbotron"> <div class="container"> <h1 class="pull-left">DW1 Invoice-Backlog Report</h1> <h2 class="pull-right"><?= $q ?></h2> </div> <div class="container"> <div class="test"> <div class="inner"> <form method="POST" action=""> Page <?= $_SESSION['page'] ?> of <?= $totalPages ?> : <input class="button" type="submit" name="previous" value="START" onclick="this.value=<?php echo $prevLimit; ?>"> <input class="button" type="submit" name="next" value="NEXT" onclick="this.value=<?php echo $nextLimit; ?>"> </form> </div> </div> </div> <div class="container pull-right"> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3 col-lg-12"> <form id="updateChanges" method="POST" action="update.php"> <div class="container pull-right"> <h2 class="pull-left"> <input class="button" name="update"<?= $LineID ?>" type="submit" id="update" value="UPDATE"> </h2> </div> <div id="tableRefresh"> <table id="box-table-a"> <tr> <th> ..all my headers.......... </th> </tr> <?php while ($row = mysqli_fetch_array($result)) { $LineID = $row['LineID']; $trackNumber = $row['TrackNumber']; $PMName = $row['PMName']; $RegNSB = number_format($row['RegNSB'], 0); $TrackCount = $row['TrackCount']; $TrackNSB = number_format($row['TrackNSB'], 0); $TotalBacklog = number_format($row['TotalBacklog'], 0); $AverageBacklog = number_format($row['AverageBacklogTrackMargin'] * 100, 2); $RGPPercent = number_format($row['RGPPercent'] * 100, 2); $PMComments = $row['PMComments']; $PMMRecommendations = $row['PMMRecommendations']; $Outcome = $row['Outcome']; $NewGPPercent = $row['NewGPPercent']; $AdditionalGP = $row['AdditionalGP']; $PMM = $row['PMM']; $NEDA = $row['NEDA']; $InvoiceNumber = $row['InvoiceNumber']; $InvCustEB = $row['InvCustEB']; ?> <tr> <td> ....all my rows... </td> </tr> <?php } ?>
$(function() { // Get the form. var form = $('#updateChanges'); // Set up an event listener for the contact form. form.submit(function(event) { // Stop the browser from submitting the form. event.preventDefault(); // Serialize the form data. var formData = form.serialize(); // Submit the form using AJAX. $.ajax({ type: 'POST', url: form.attr('action'), data: formData }); }); });
<?php include('./db.php'); $data = array(); //array to pass back the sum of PM Comments, PM Recs, Outcomes... etc.... for ($n = 0, $t = count($_POST['PMComments']); $n < $t; $n++) { $UpdateValue = $_POST['Update'][$n]; $PMCommentsValue = $_POST['PMComments'][$n]; $PMMRecommendationsValue = $_POST['PMMRecommendations'][$n]; $OutcomeValue = $_POST['Outcome'][$n]; $NewGPPercentValue = $_POST['NewGPPercent'][$n]; $AdditionalGPValue = $_POST['AdditionalGP'][$n]; $LineID = $_POST['LineID'][$n]; $sqlUPDATE = "UPDATE report SET PMComments = '$PMCommentsValue' , PMMRecommendations = '$PMMRecommendationsValue' , Outcome = '$OutcomeValue' , NewGPPercent = '$NewGPPercentValue', AdditionalGP = '$AdditionalGPValue' WHERE LineID = $LineID ;"; ?> <div id="alerts"> <?php echo $sqlUPDATE . "<br>"; //this echos back the entire SQL entry that will be made ?> </div> <?php $doUPDATE = mysqli_query($con, $sqlUPDATE); if (!$doUPDATE) { die('Could not update data: ' . mysqli_error($con)); } if ($OutcomeValue <> 'null') { $sqlMOVE = "INSERT INTO results SELECT * FROM report WHERE LineID = $LineID ;" ; $sqlDELETE = "DELETE FROM report where LineID = $LineID ;" ; $doMOVE = mysqli_query($con, $sqlMOVE); if (!$doMOVE) { die('Could not MOVE data: ' . mysqli_error($con)); } $doDELETE = mysqli_query($con, $sqlDELETE); if (!$doDELETE) { die('Could not DELETE data: ' . mysqli_error($con)); } } } mysqli_close($con); ?>в<?php include('./db.php'); $data = array(); //array to pass back the sum of PM Comments, PM Recs, Outcomes... etc.... for ($n = 0, $t = count($_POST['PMComments']); $n < $t; $n++) { $UpdateValue = $_POST['Update'][$n]; $PMCommentsValue = $_POST['PMComments'][$n]; $PMMRecommendationsValue = $_POST['PMMRecommendations'][$n]; $OutcomeValue = $_POST['Outcome'][$n]; $NewGPPercentValue = $_POST['NewGPPercent'][$n]; $AdditionalGPValue = $_POST['AdditionalGP'][$n]; $LineID = $_POST['LineID'][$n]; $sqlUPDATE = "UPDATE report SET PMComments = '$PMCommentsValue' , PMMRecommendations = '$PMMRecommendationsValue' , Outcome = '$OutcomeValue' , NewGPPercent = '$NewGPPercentValue', AdditionalGP = '$AdditionalGPValue' WHERE LineID = $LineID ;"; ?> <div id="alerts"> <?php echo $sqlUPDATE . "<br>"; //this echos back the entire SQL entry that will be made ?> </div> <?php $doUPDATE = mysqli_query($con, $sqlUPDATE); if (!$doUPDATE) { die('Could not update data: ' . mysqli_error($con)); } if ($OutcomeValue <> 'null') { $sqlMOVE = "INSERT INTO results SELECT * FROM report WHERE LineID = $LineID ;" ; $sqlDELETE = "DELETE FROM report where LineID = $LineID ;" ; $doMOVE = mysqli_query($con, $sqlMOVE); if (!$doMOVE) { die('Could not MOVE data: ' . mysqli_error($con)); } $doDELETE = mysqli_query($con, $sqlDELETE); if (!$doDELETE) { die('Could not DELETE data: ' . mysqli_error($con)); } } } mysqli_close($con); ?>
Прямо сейчас, я начинаю с загрузки test.php и выбора имени из раскрывающегося меню, которое заполняет нижнюю половину страницы таблицей, сгенерированной из getuser.php. Вот где мои проблемы начинаются. На странице getuser.php у меня есть 3 кнопки – start и next кнопки и кнопка submit . start и next кнопки возвращают меня в начало (как если бы я загружал test.php с нуля), а кнопка update WORKS, но загружает update.php без загрузки update.js, перенаправление на update.php и обработку (это все, чего я пытаюсь избежать, используя многостраничную среду AJAX …) Если я загружу getuser.php? q = John% 20Doe сам, эти кнопки работают точно так же, как я спроектировал их.
Я помещаю этот код в начало моего файла update.js, так как я называю его как в test.php, так и в getuser.php:
$(document).ready(function(){ $("div").css("border", "3px solid red"); console.log("update.js loaded successfully"); });
просто чтобы убедиться, что мой .js-файл загружен правильно.
Если вы загружаете страницу в обычном режиме (test.php), на верхнем заголовке моей страницы есть небольшая красная рамка – так вызывается update.js, но она не вызывается на getuser.php, который загружается после этого, поскольку там не являются маленькими красными границами вокруг разделов на этой странице. Если я загружаю getuser.php напрямую, не проходя через test.php, границы там, и все работает нормально.
Я, должно быть, пропустил какой-то раздел обучения, когда начал заниматься этим, потому что я понятия не имею, что происходит не так, или какой-то из моего кода работает, когда я загружаю страницу напрямую, а не «внутри» другой страницы.