Post back values using Perl and jQuery.

Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

Hi there Monks!
I am trying to use one script, that once this form gets submitted, it will update the database and post back the results to it-self. I am stuck trying to understand why once the form gets submitted and all the values get passed ( I can see all the values using firebug ) the results doesn’t show on the page like in this line: print "<br>Display Results once the submit gets done: *$user_name*$user_id*$city_from*$state_from*$checkin_comments*<br>"; What am I missing.
I have this test code that shows what I am trying to do:

#!/usr/bin/perl

use strict;
use warnings;

use CGI;
use Data::Dumper;

my $q = CGI->new();

print $q->header();

my $transac = $q->param( 'transac' ) || '';

# Get values

my $user_name        = $q->param( 'user_name' )        || '';
my $user_id          = $q->param( 'userid' )           || '';
my $city_from        = $q->param( 'city_from' )        || '';
my $state_from       = $q->param( 'state_from' )       || '';
my $checkin_comments = $q->param( 'checkin_comments' ) || '';

print "<br>Display Results once the submit gets done: *$user_name*$use
+r_id*$city_from*$state_from*$checkin_comments*<br>";



if($transac eq "checkin") {

  my $res = results();
  print "<br> *$res* $user_name*$user_id*$city_from*$state_from*$check
+in_comments*<br>";
  
}else {
    
  start_html();

}

sub results {
    
if ($user_name) {
    
  return 'success';

} else {

  return 'error';

}

} # End sub results


sub start_html {

 my $html_code = qq (
 <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charse
+t=utf-8" />
<meta http-equiv="Content-language" content="en-gb" />
<title>jquery from hell</title>
<script type="text/javascript" src="/jquery/1.10.2/jquery.min.js"></sc
+ript>
<script type="text/javascript">
  
  \$(function () {
  
    \$('.reply-comment').on('click', function (e) {
        
      e.preventDefault();
      
      var form = \$('.reply-form');

      var CommentID = \$(this).attr('id');

      //alert(CommentID);
      
      if (form.is(':visible')) {

        // hide it
        form.hide(function () {
            
          \$('#' + CommentID).html('<a href="" class="reply-comment" i
+d="reply-comment-' + CommentID + '"> [ Check-In ] </a>');
          
        });
        
      }else{
          
        // show it
        form.show(function () {
            
                \$('#' + CommentID).html('<a href="" class="reply-comm
+ent" id="reply-comment-' + CommentID + '">[ Cancel ]</a>');
                
         });
         
      }
      
    });
    
 });
 
</script>
<style>
 
 .reply-form {
     
             display:none;           
 }
 
</style>

<script type="text/javascript" >

 function onSuccess(data, status) {
             
   data = \$.trim(data);
  
   alert(data);
   
      var form = \$('.reply-form');
      var CommentID = 1;
      
      \$("form#reply-form").trigger('reset');
     
      if (data) {

        // hide it
        form.hide(function () {
            
          \$('#' + CommentID).html('<a href="" class="reply-comment" i
+d="reply-comment-' + CommentID + '"> [ xCheck-In ] </a>');
          
        });
        
      }else{
          
        // show it
        form.show(function () {
            
                \$('#' + CommentID).html('<a href="" class="reply-comm
+ent" id="reply-comment-' + CommentID + '">[ xCancel ]</a>');
                
         });
         
      }
  }
  
  function onError(data, status, e) {
      
    alert( "Sorry, there was a problem!" );
    alert(data);
    console.log(e);
 
  }  

 \$(document).ready(function(){
    
   \$("form#reply-form").submit(function() { // reply-form is submitte
+d
 
     var formData = \$("#reply-form").serialize();
    // alert(formData);

     \$.ajax({
       
       type: "post",
       url: "pjtest.pl",
       cache: false,
       data: formData,
       success: onSuccess,
       error:   onError
     
     });
   
    // return false to prevent normal browser submit and page navigati
+on 
    return false;

   });

 });

</script>

</head>
<body bgcolor="#ffffff">
<table width="500" border="1" bgcolor="#ffffff" cellpadding="5" cellsp
+acing="0">
                   <tr>
                       <form name="postItem" action="test.pl" method="
+post" STYLE="margin: 0px; padding: 0px;">

                     <td align="center" width="33%" valign="bottom">
                       <input type="submit" id="submitLink" value="[ P
+ost ]">
                     </td></form>
                     
                     <td align="center" width="34%" valign="middle">
                       <a href="" class="reply-comment" id="1"> [ Chec
+k-In ] </a>
                     </td>

                       <form name="postItem" action="test.pl" method="
+post" STYLE="margin: 0px; padding: 0px;">
                                
                     <td align="right" width="33%" valign="bottom">
                        <input type="submit" id="submitLink" value="[ 
+Log out ]">&nbsp;&nbsp;
                     </td>
                      </form>
                   </tr>
                  </table>
                  <!-- Check in stuff -->
                  <div class="reply-form well">

                  <table width="100%" border="0" bgcolor="#1A1A1A" cel
+lpadding="5" cellspacing="0">
                   <tr><form name="reply-form" id="reply-form" method=
+"post" style="margin: 0px; padding: 0px;">
                           <input id="transac" type="hidden" name="tra
+nsac" value="checkin">
                           <input id="user_name" type="hidden" name="u
+ser_name" value="theusername">
                           <input id="userid" type="hidden" name="user
+id" value="923">
                           <input id="city"  name="city_from" type="hi
+dden" value="Boston" />
                           <input id="state" name="state_from" type="h
+idden" value="MA" />
                     <td align="center">
                           <textarea id="checkin_comments" name="check
+in_comments" rows="4"  cols="40" class="span10"></textarea>
                     </td>
                   <tr>
                     <td align="center">
                           <!--input type="submit" id="submitLink" val
+ue="[ Submit ]" /-->
                           <input type="image" src="/images/check.png"
+ alt="Submit button" width="50" height="33" class="submit" id="send_c
+omments">
                         </form>
                       
                       </td>
                    </tr>
                    </table>
</body></html>);

print $html_code;

#return $html_code;

 } # End start_html sub
[download]

Comment on Post back values using Perl and jQuery. Select or Download Code

Replies are listed 'Best First'.
Re: Post back values using Perl and jQuery. by Corion (Patriarch) on Jan 02, 2014 at 21:55 UTC
Are you certain that the problem is with the Perl side of things? Does your page work without Javascript and does it output the expected HTML then? I suggest you first debug the Perl side of things until your program outputs the appropriate headers and the appropriate HTML. You can greatly clean up your returned Javascript by putting it into a separate file or at least using single quoted strings to eliminate all the backslashitis you need whenever a dollar sign is used. Then I suggest that you investigate the `$.load()` method if Jquery, which would seem to do what your code does, replace some HTML by some other HTML returned from the server.	[reply] [d/l]
Re: Post back values using Perl and jQuery. by Anonymous Monk on Jan 02, 2014 at 21:45 UTC
This smells of jquerymonks.org to me, but either your `$q->param( 'transac' )` isn't set to `'checkin'`, or your `onSuccess()` javascript sub isn't doing anything with the `data` it receives. Also, please use a here-doc so you don't have to have all those unsightly `\$`s all over the place, or even better, store all that html in a separate file. `# a here-doc approach my $html_code = <<'EOF'; <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE> <html> ... the rest ... EOF <html>` [download]	[reply] [d/l] [select]
Re^2: Post back values using Perl and jQuery. by Anonymous Monk on Jan 02, 2014 at 23:36 UTC
I can do that on the code, but I still can understand why the results I want is getting passed but I still cant get the code to print them after the submit.	[reply]
Re: Post back values using Perl and jQuery. by locked_user sundialsvc4 (Abbot) on Jan 03, 2014 at 15:59 UTC
I strongly agree. Start by using a debugger in your web-browser to definitively observe what actually is being passed between the host and your client. Don’t “assume” anything. There are just too many places (on both sides) where a problem could be cropping up, such that the otherwise-observable symptoms of the problem really don’t point to it at all. A debugger will quickly remove all doubts: “Here is what the host sent, and here is what the client POSTed back (and it was a POST ... don’t assume ...), and here is what the host returned. Then, as necessary, insert logging-messages into your Perl (server-side) code, so that (over and above what the web server already records ...) it also documents exactly what it is seeing and doing. I use server-side debug messages a lot ... both “verbose” messages (which can be turned-off unless needed), in which the server positively “blabs” about what a wonderful day it’s having today, and “warning” messages when something appears to be wrong or questionable. Once you can clearly see the (often, well hidden) evidence of a problem, its solution is usually obvious and straightforward. Aye, there’s the rub ...