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

Question

sassenach 0 Junior Poster in Training

13 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

2 Contributors
3 Replies
174 Views
14 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

All 3 Replies

Airshow 416 WiFi Lounge Lizard

13 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 "http://xxx/login/full_order_list.php" 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.

see also what i wrote in:
http://forum.jquery.com/topic/sending-jquery-form-but-don-t-know-how-to-retrieve-details

since all my jquery is in "http://xxx/login/full_order_list.php", loading content from a different php page into "http://xxx/login/full_order_list.php" would mean I have to include any js of php files for that page as well. it looks heavy.

cant i do it all in the same page?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2010-10-02T23:49:19+00:00

Sassenach,

Have you tried running with $content.load(...) uncommented after removing $form.serialize() ?

Airshow

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

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers