sending jquery form, but don't know how to retrieve details

Question

sassenach 0 Junior Poster in Training

15 Years Ago

Hi,

I am using jquery to send a form:
Copy code

jQuery(document).ready(function($) { 
          //References
          var pages = $('div#paging_menu a');
          var loading = $("div#loading");
          var content = $("#print_full_list");
         
          //show loading bar
          function showLoading(){
              loading
                  .css({visibility:"visible"})
                  .css({opacity:"1"})
                  .css({display:"block"})
              ;
          }
          //hide loading bar
          function hideLoading(){
              loading.fadeTo(1000, 0);
          };
         

          //Manage click events
          pages.click(function() {   
              //show the loading bar
              showLoading();
             
              //Highlight current page number
              pages.css({'background-color' : ''});
              $(this).css({'background-color' : 'yellow'});

              //Load content
              var pageNum = this.id;   
              var targetUrl = "/login/php_conf/full_order_list.php?page=" + pageNum + "&" + $("#myForm").serialize() + " #print_full_list_php";
              content.load(targetUrl, function(response, status, xhr) {
                  hideLoading();
                  switch (xhr.status) {
                      case 200: break;
                      case 404:
                       $('#error').html('<p>404: Looks like the results have not been uploaded to the server yet. Please check back later.</p>');
                       break;
                      default:
                       $('#error').html('<p>' + xhr.status + ': ' + xhr.statusText + '. Please contact the club and let them know.</p>');
                       break;
                     };
              });
          });
         
          //default - 1st page
          $("#1").css({'background-color' : 'yellow'});
          var targetUrl = "/login/php_conf/full_order_list.php?page=1&" + $("#myForm").serialize() + " #print_full_list_php";
          showLoading();
         
          content.load(targetUrl, function(response, status, xhr) {
              hideLoading();
              switch (xhr.status) {
                  case 200: break;
                  case 404:
                   $('#error').html('<p>404: Looks like the results have not been uploaded to the server yet. Please check back later.</p>');
                   break;
                  default:
                   $('#error').html('<p>' + xhr.status + ': ' + xhr.statusText + '. Please contact the club and let them know.</p>');
                   break;
                 };
          });

      });

The PHP page "full_order_list.php" is the page where i have my paging. But it is also the same place I want to retrieve the variable "page" and do something there.
Here is my "full_order_list.php" page:
Copy code

<?php
      include ('header.php');
      include ('header_params.php');
      if(!isLogged()){ echo 'You are not logged in'; } else {
          include ('left_side.php');
         
          $per_page = 10; //rows per page
          $order_by = "tdate DESC, ttime DESC"; //sorting column - as in the table   
         
          $page = ($_POST['page']) ? $_POST['page'] : $_GET['page'];
         
          echo 'page-->'.$page;
         
          $start = ($page-1)*10;   
      ?>
            <script type="text/javascript" language="javascript">
            jQuery(document).ready(function($) {
                $("#mainTitle").html("Work List");
                $("#accordion_tbl").accordion();
                $('#accordion_tbl > UL').attr('style', 'clear:left;float: left;width:740px;');
                $('#accordion_tbl > DIV').attr('style', 'clear:left;float: left;width:740px;');
                $('#paging_menu > A').attr('style', 'padding:5px; text-transform: uppercase;cursor: pointer;color: #c2c2c2;');
                /*$('#paging_menu > A:hover').attr('style', 'color: #6fa5fd; cursor: pointer;');*/         
              });
            </script>     
                 
            <div class="full-col" id="mid-col">
               <div class="box">
                    <h4 class="white rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;">Work List</h4>
                    <div class="box-container rounded_by_jQuery_corners" style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;">                                              
                    <style>
                      #loading { width: 100%; position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
                      </style>
                        <?php       
                          checkIsJobID();                                       
                          if(isset($_GET['getstatus']) && $_GET['getstatus'] > 0){$getstat = $_GET['getstatus'];} else {$getstat = NULL;}
                          $wherec1 ='';
                          if($_SESSION['custadmin'] == 1){    //is admin           
                              if($getstat != NULL){
                                  $wherec1 .= " WHERE status='".$getstat."'";
                              } else {
                                  $wherec1 .= " WHERE status!='4Completed'";
                              }
                          } else {    //is not admin
                              $wherec1 = "WHERE cust_id=".$_SESSION['custid']."";
                              if($getstat != NULL){
                                  $wherec1 .= " AND status='".$getstat."'";
                              } else {
                                  $wherec1 .= " AND status!='4Completed'";
                              }
                          }
                         
                          $selectQ1 = mysql_query("SELECT job_id, cust_id, status, CONCAT_WS('<br/>', prop_name, address) AS prop_details ,  DATE_FORMAT(tdate, '%b. %d, %y') AS newdate, DATE_FORMAT(ttime, '%l:%i %p') AS newtime, DATE_FORMAT(edate, '%b/%d/%y') AS enddate, DATE_FORMAT(etime, '%l:%i %p') AS endtime FROM job_item ".$wherec1."") or trigger_error("Query: $selectQ1 <br />MySQL Error: " .mysql_error());           
                          if(mysql_affected_rows() > 0){    //if not empty, show table
                              $count = mysql_num_rows($selectQ1);
                              $pages = ceil($count/$per_page);
                              $numJobs = mysql_num_rows(mysql_query("SELECT job_id FROM job_item ".$wherec1.""));                                                     
                                echo '<div id="paging_menu">';
                                  //Show page links
                                  for($i=1; $i<=$pages; $i++){echo '<a href="#" id="'.$i.'"> '.$i.' </a>';}
                                echo '</div>';
                               
                                echo '                  
                                <div id="loading" style="position: absolute;">LOADING...</div>      
                                <form id="myForm">
                                  <input type="hidden" name="page" id="page" value="'.$page.'" />
                               </form>
                              
                                <div id="print_full_list" style="clear:both;width:100%;float:left;height:500px;border:1px solid red;">';
                                      $selectQ = mysql_query("SELECT job_id, cust_id, status, CONCAT_WS('<br/>', prop_name, address) AS prop_details ,  DATE_FORMAT(tdate, '%b. %d, %y') AS newdate, DATE_FORMAT(ttime, '%l:%i %p') AS newtime, DATE_FORMAT(edate, '%b/%d/%y') AS enddate, DATE_FORMAT(etime, '%l:%i %p') AS endtime  
                                                              FROM job_item ".$wherec1." ORDER BY ".$order_by." limit ".$start.",".$per_page." ") or trigger_error("Query: $selectQ <br />MySQL Error: " .mysql_error());                                   
                                      echo '<div id="print_full_list_php">';
                                          if(mysql_num_rows($selectQ) > 0){    //if not empty, show table
                                              echo '
                                              <ul id="accordion_head">
                                              <li id="title_id">ID</li>
                                              <li id="title_status">Status</li>';
                                              if(isset($_SESSION['custadmin']) && $_SESSION['custadmin'] == 1){echo '<li id="title_sub">Submitter</li>';}
                                              echo '<li id="title_prop">Property</li>
                                              <li id="title_date">Date</li>
                                              <li id="title_action">Actions</li></ul>
                                             
                                              <div id="accordion_tbl">';
                                              while ($selectRow = mysql_fetch_array($selectQ, MYSQL_ASSOC)) {   
                                                    echo '
                                                    <ul>
                                                        <li id="data_id">'.$selectRow['job_id'].'</li>
                                                        <li id="data_status">'.substr($selectRow['status'],1).'</li>';
                                                        if(isset($_SESSION['custadmin']) && $_SESSION['custadmin'] == 1){echo '<li id="data_sub">'.getCustName($selectRow['cust_id']).'</li>';}
                                                        echo '<li id="data_prop">'.$selectRow['prop_details'].'</li>
                                                        <li id="data_date">'.$selectRow['newdate'].'<br/>'.$selectRow['newtime'].'</li>
                                                        <li id="data_action"><a href="#" class="table-edit-link">Edit</a></li>
                                                    </ul>
                                                    <div>my content here</div>';                                      
                                              }
                                              echo '</div>';
                                          } else {
                                              echo '<br/>You current do not have any orders on file.';
                                          }  
                                      echo '</div>';
                                echo '</div>
                                <div id="error"></div>

                                ';
                               
                          } else {
                              echo '<br/>You current do not have any orders on file.';
                          }
                        ?>                 
                <script type="text/javascript" src="js/jquery_paging.js"></script>
                </div><!-- end of div.box-container -->
                </div> <!-- end of div.box -->
            </div>    <!-- end of mid-col -->
      <?php
      } //close if(isLogged()){
      include ('footer.php');
      ?>

$page is empty.
Where am i going wrong?

thanks
S

javascript:jquery

2 Contributors
3 Replies
183 Views
14 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Dani AI

Generated 6 Months Ago

Short version: the PHP is simply not seeing a valid page number when it runs. Two reliable fixes — and the debugging steps to prove which one you hit — will get you working quickly.

Checklist to debug (start here)

As suggested, printing the composed URL is useful, but the next step is to open the browser DevTools Network panel and inspect the actual AJAX request. Confirm the Request URL contains the query string (e.g. ?page=7), confirm the response code is 200 (not a 3xx redirect) and check any Location header if there is a redirect. A redirect or a wrong path (php_conf vs login) will drop the query string and leave your PHP with no page value.
Avoid HTML-encoded ampersands in JS strings; better yet, send the page as request data rather than manually concatenating an encoded query string.

Safe, practical changes

Always give the server a sane default and cast to an integer to avoid SQL errors and injection:

$per_page = 10;
$page = isset($_REQUEST['page']) ? (int) $_REQUEST['page'] : 1;
if ($page < 1) $page = 1;
$start = ($page - 1) * $per_page;

On the client, let jQuery build the query for you instead of concatenating strings (this avoids & issues and keeps the URL cleaner):

$content.load('/login/full_order_list.php #print_full_list_php', { page: pageNum }, function(resp, status, xhr){
  // handle status / errors
});

Other tips and cautions

If your server is rewriting or redirecting requests, fix the redirect so the query string is preserved. If you keep JS and PHP in the same file, avoid returning duplicate script tags inside the fragment you inject; keep JS in an external file. Finally, migrate away from old mysql_* calls and use prepared statements (mysqli/PDO) to prevent SQL injection and hard-to-debug errors.

Progress notes: , your target-URL debug was the right move; the Network tab will tell you whether the page parameter is actually reaching the server.

All 3 Replies

Airshow 425 WiFi Lounge Lizard

15 Years Ago

Sassenach,

It's not obvious where it's breaking down. Code looks pretty good to me.

It can be simplified to avoid repetition. See below, including (commented out) suggested debug statements to allow you to inspect the composed URL without issuing the .load() command.

jQuery(document).ready(function($) { 
  //References
  var $pages   = $('div#paging_menu a');//$ prefix indicates instance of jQuery.
  var $loading = $("div#loading");
  var $content = $("#print_full_list");
  var $form    = $("#myForm");

  //show loading bar
  function showLoading() {
    $loading
      .css({visibility:"visible"})
      .css({opacity:"1"})
      .css({display:"block"})
    ;
  }
  //hide loading bar
  function hideLoading() {
    $loading.fadeTo(1000, 0);
  };

  //define reusable full_order_list loader (complete with response handler)
  var full_order_list_loader = function($p, pageNum) {
    showLoading();
    $pages.css({'background-color' : ''});
    $p.css({'background-color' : 'yellow'});

    //Load content
    var targetUrl = "/login/php_conf/full_order_list.php?page=" + pageNum + "&" + $form.serialize() + " #print_full_list_php";
/*
    //suggested debug statements to inspect targetUrl without issuing the .load() command.
    $('#error').html('targetUrl = ' + targetUrl);
    return;
*/
    $content.load(targetUrl, function(response, status, xhr) {
      hideLoading();
      switch (xhr.status) {
        case 200: break;
        case 404:
          $('#error').html('<p>404: Looks like the results have not been uploaded to the server yet. Please check back later.</p>');
        break;
          default:
          $('#error').html('<p>' + xhr.status + ': ' + xhr.statusText + '. Please contact the club and let them know.</p>');
        break;
      };
    });
  };

  //Manage click events
  $pages.click(function() {   
    full_order_list_loader($(this), this.id);
  });

  //default - 1st page
  full_order_list_loader($("#1"), 1);
});

If the URL looks OK, then I guess the problem is in the php. But I think you will find the problem is in the composition URL - for example, does "page=..." appear in the form serailization?

Good luck.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sassenach 0 Junior Poster in Training · Answer 1 · 2010-10-02T23:05:21+00:00

since i dont need anything from the form, i changed the code a bit to.

jQuery(document).ready(function($) { 
  //References
  var $pages   = $('div#paging_menu a');//$ prefix indicates instance of jQuery.
  var $loading = $("div#loading");
  var $content = $("#print_full_list");
  var $form    = $("#myForm");

  //show loading bar
  function showLoading() {
    $loading
      .css({visibility:"visible"})
      .css({opacity:"1"})
      .css({display:"block"})
    ;
  }
  //hide loading bar
  function hideLoading() {
    $loading.fadeTo(1000, 0);
  };

  //define reusable full_order_list loader (complete with response handler)
  var full_order_list_loader = function($p, pageNum) {
    showLoading();
    $pages.css({'background-color' : ''});
    $p.css({'background-color' : 'yellow'});

    //Load content
    var targetUrl = "/login/php_conf/full_order_list.php?page=" + pageNum + " #print_full_list_php";

    /*//suggested debug statements to inspect targetUrl without issuing the .load() command.
    $('#error').html('targetUrl = ' + targetUrl);
    return;*/
    
    $('#error').html('targetUrl = ' + targetUrl);
    /*
    $content.load(targetUrl, function(response, status, xhr) {
      hideLoading();
      switch (xhr.status) {
        case 200: break;
        case 404:
          $('#error').html('<p>404: Looks like the results have not been uploaded to the server yet. Please check back later.</p>');
        break;
          default:
          $('#error').html('<p>' + xhr.status + ': ' + xhr.statusText + '. Please contact the club and let them know.</p>');
        break;
      };
    });*/
  };

  //Manage click events
  $pages.click(function() {   
    full_order_list_loader($(this), this.id);
  });

  //default - 1st page
  full_order_list_loader($("#1"), 1);
});

the error div shows:
targetUrl = /login/php_conf/full_order_list.php?page=7 #print_full_list_php

this looks fine, but in my actual "" page, i get an error in my sql query statement because it is looking for $page and $page is empty.

my main problem is that i am trying to retieve $page from targetUrl.

sending jquery form, but don't know how to retrieve details

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers