Re: Using CGI::Ajax for multiple form buttons/divs simultaneously

I would like to add functionality to a separate button(s)/AJAX call that would come from a different form input, be associated to a separate Perl function, and direct its output to a different div

It's difficult to understand what you mean without a complete script so maybe this simple example will help.

#!/usr/bin/perl
use strict;
use CGI::Ajax;
use CGI;

my $cgi = new CGI();
my $pjx = new CGI::Ajax( 
  'function1' => \&myfunction1,
  'function2' => \&myfunction2,
#   'skip_header'   => 1 
);

print $pjx->build_html($cgi,\&main,
    {-charset=>'UTF-8', -expires=>'-1d'});
    
sub main {
   my $html = <<EOT;
  <HTML>
  <HEAD><title>CGI::Ajax Example</title></HEAD>
  <BODY>
  
  <div id="div1_text">Number = </div> 
  <div id="div2_text">Letter = </div>
  
  <select id="select1" onchange="function1(['select1'],['div1_text'], 
+'POST'); "> 
    <option value="">Select Number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select id="select2" onchange="function2(['select2'],['div2_text'], 
+'POST'); "> 
    <option value="">Select Letter</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  
  </BODY>
  </HTML>
EOT
  return $html;
}

sub myfunction1 { return "Number = ".shift };
sub myfunction2 { return "Letter = ".shift };
[download]

poj

Comment on Re: Using CGI::Ajax for multiple form buttons/divs simultaneously Download Code

Replies are listed 'Best First'.
Re^2: Using CGI::Ajax for multiple form buttons/divs simultaneously by Polyglot (Chaplain) on Mar 19, 2018 at 12:00 UTC
I appreciate the response, but I'm still struggling with the concepts. What you have outlined above is what I've been trying to do all along. But it just doesn't seem to work with more than one div at a time. Here's a more descriptive (I hope) explanation of what I am trying to accomplish: Create a page with seven controls Select menu with 66 books Select menu with number of chapters for book currently selected Select menu with number of verses for chapter currently selected "Previous" button to navigate back one verse "Next" button to navigate forward one verse Select menu for version comparison "Update" button to submit edited text from two textarea fields, following which all options progress to the next verse After any one of the seven controls is clicked/changed, update the respective fields accordingly. The first five controls can all form part of the "top_menu" div, and any update affecting one of the first three will affect any others in its downstream, as well as affecting the textarea fields and comparison field. Any change to the comparison field should affect it only, leaving everything else unchanged. Coding this without AJAX seems doable, but the AJAX complicates things tremendously for me. I just cannot seem to wrap my mind around how to organize the functions to accomplish it in a way that the AJAX would accept. Blessings, ~Polyglot~	[reply]
Re^3: Using CGI::Ajax for multiple form buttons/divs simultaneously by poj (Abbot) on Mar 19, 2018 at 12:33 UTC
Ok, taking just the first 2 points try this to see if I understand you correctly #!/usr/bin/perl use strict; use CGI::Ajax; use CGI; my $cgi = new CGI(); my $pjx = new CGI::Ajax( 'function1' => \&myfunction1, 'function2' => \&myfunction2, # 'skip_header' => 1 ); print $pjx->build_html($cgi,\&main, {-charset=>'UTF-8', -expires=>'-1d'}); sub main { my $html = <<EOT; <HTML> <HEAD><title>CGI::Ajax Example</title></HEAD> <BODY> <div id="div2_text">Chapter = </div> BOOK <select id="select1" onchange="function1(['select1'],['div1_text'], +'POST'); "> <option value="">Select Book</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select></br> CHAPTER <div id="div1_text"></div> </BODY> </HTML> EOT return $html; } sub myfunction2 { return "Chapter = ".shift }; sub myfunction1 { my $book = shift; my @chap = (undef,['1A','1B','1C'], ['2A','2B','2C','2D'],['3A','3B']); my $option; for (@{$chap[$book]}){ $option .= qq!<option value="$_">$_</option>!; } return qq! <select id="select2" onchange="function2(['select2'],['div2_text'], +'POST'); "> $option </select>!; }; [download] poj	[reply] [d/l]
Re^4: Using CGI::Ajax for multiple form buttons/divs simultaneously by Polyglot (Chaplain) on Mar 20, 2018 at 05:19 UTC
I have noticed that every implementation of AJAX that I have laid eyes upon has one feature in common: `print $pjx->build_html( $cgi, \&main, {-charset=>'UTF-8', -expires=>'- +1d'} );` [download] Is there some way of connecting the AJAX to more than one subroutine, rather than having only the "&main" option? Something more diversifiable may be what I need. For example, if I can succeed at having more than one option here, I could also incorporate the AJAX into the login side of the script which, for now, I have left without AJAX. Understanding this, in fact, may be key to helping me solve what I am doing now with multiple divs. I have been making more attempts to get AJAX working with multiple divs, but have yet to see success. Sometimes, "brute force" trial-and-error seems the only thing I can do, especially having never used the tool, in this case AJAX, before. Blessings, ~Polyglot~	[reply] [d/l]
Re^5: Using CGI::Ajax for multiple form buttons/divs simultaneously by dsheroh (Monsignor) on Mar 20, 2018 at 08:32 UTC


Keep It Simple, Stupid
	PerlMonks