javascript - PHP and JS in multi-page environment -
i apologize in advance beingness bit long. i've been trying figure out while without success, wanted post of code amazing people helping me have improve thought of doing. suggested me in lastly post - cannot .js called upon form post - create new thread
i had project code taking place on single page, html, php, javascript, , bunch of sql queries. trying move away this, utilize separate pages, , incorporate ajax can update database, central page, without refreshing.
i have 2 main pages - test.php , getuser.php, 2 smaller bits, update.php , update.js.
test.php page load first. it's split 2 <div>s, top div, contains sql query database select user, , bottom div which, upon selection of user dropdown menu, launches script showuser(), , sends ajax request getuser.php load rest of page downwards below.
<?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 ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else { // code 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 study pmname <> '' order 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 name dropdown menu above...</b></div> </body> </html> getuser.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 sql command grabs right pm $sqlpm= "select * study pmname = '".$q."' , regnsb <> 0.000 order tracknumber asc limit $limitstart,$limititems"; $result = mysqli_query($con, $sqlpm); // page count total of specific pm $sqlcommand = "select count(*) study pmname = '".$q."' , 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 * study pmname = '$pmselection' , regnsb <> 0.000 order 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 * study pmname = '$pmselection' , regnsb <> 0.000 order tracknumber asc, regnsb desc limit $nextlimit,$limititems"); } if (isset($_session['page'])) { } else { $_session['page'] = 1 ; } ?> <!-- main jumbotron lists title of page 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 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 rows... </td> </tr> <?php } ?> update.js , update.php files: $(function() { // form. var form = $('#updatechanges'); // set event listener contact form. form.submit(function(event) { // stop browser submitting form. event.preventdefault(); // serialize form data. var formdata = form.serialize(); // submit form using ajax. $.ajax({ type: 'post', url: form.attr('action'), data: formdata }); }); }); and <?php include('./db.php'); $data = array(); //array pass sum of pm comments, pm recs, outcomes... etc.... ($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 study set pmcomments = '$pmcommentsvalue' , pmmrecommendations = '$pmmrecommendationsvalue' , outcome = '$outcomevalue' , newgppercent = '$newgppercentvalue', additionalgp = '$additionalgpvalue' lineid = $lineid ;"; ?> <div id="alerts"> <?php echo $sqlupdate . "<br>"; //this echos entire sql entry made ?> </div> <?php $doupdate = mysqli_query($con, $sqlupdate); if (!$doupdate) { die('could not update data: ' . mysqli_error($con)); } if ($outcomevalue <> 'null') { $sqlmove = "insert results select * study lineid = $lineid ;" ; $sqldelete = "delete study 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); ?> the issue right now, start loading test.php , selecting name dropdown menu, populates bottom half of page table generated getuser.php. issues start. on getuser.php page, have 3 buttons - start , next buttons, , submit button. start , next buttons send me start (as if load test.php scratch), , update button works, loads update.php without loading update.js, redirecting update.php , processing successfully, (which whole thing i'm trying avoid utilizing multi-page ajax environment...) if load getuser.php?q=john%20doe itself, these buttons work designed them.
i set code in origin of update.js file, since phone call both in test.php , in getuser.php:
$(document).ready(function(){ $("div").css("border", "3px solid red"); console.log("update.js loaded successfully"); }); just create sure .js file loading properly.
if load page normally, (test.php), there little reddish border around top header of page - update.js beingness called, it's not beingness called on getuser.php loads after there no little reddish borders around divs on page. if load getuser.php straight without going through test.php, borders there, , works fine.
i must have skipped on section of learning when started getting this, because have no thought going wrong, or of code works when load page straight , not "inside" of page.
the big problem html content you're loading dom not process javascript files you've included. so, should utilize jquery's .load() load page behind ajax call. load included javascript files.
this entire block:
function showuser(str) { if (str !==".pm") { if (str=="") { document.getelementbyid("txthint").innerhtml=""; return; } if (window.xmlhttprequest) { // code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else { // code 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(); } becomes:
function showuser(str) { if (str !==".pm") { if (str=="") { document.getelementbyid("txthint").innerhtml=""; return; } } $("#txthint").load( "getuser.php?q="+str ); } javascript php jquery ajax
No comments:
Post a Comment