First, I am not using jQuery, Catalyst, or similar tools because of their bloated nature. I require a bandwidth-efficient solution due to poor internet access among the primary clients of the web tool. AJAX has shown itself to work acceptably in my case with a single <div>, but I need more than one and have found no examples of such anywhere. Experimentation has yielded no success either.

Here's what I have that works:

my $cgi = new CGI;
my $pjx = new CGI::Ajax( 
                'getBibCompare' => \&comparisonBible_function,
                'skip_header'   => 1,
                 );
    $pjx->skip_header(1);
    $pjx->cgi( $cgi );
    print $pjx->build_html( $cgi, \&main, {-charset=>'UTF-8', -expires
+=>'-1d'} );
    $pjx->JSDEBUG(1);

sub main {
#. . .
$html = &editScreen;
return $html;

} # END SUB main
[download]

Accompanied by the HTML…

<div>
  <h3>SCRIPTURE COMPARISON</h3>
  <div id="dcomparison_text" name="dncomparison_text" style="border: 1
+px solid gray; width:300px; min-height:150px; background-color: #ffff
+cc">
  
  $compare_verse
  
  </div>
  
  <div id="Bible_Version_Menu" name="nBible_Version_Menu">

  <select id="comparison_text" name="ncomparison_text"  onchange="getB
+ibCompare(['comparison_text'],['dcomparison_text'], 'POST'); ">

. . .
[download]

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>, as shown below.

my $cgi = new CGI;
my $pjx = new CGI::Ajax( 
                'getBibCompare' => \&comparisonBible_function,
                'processFormInputs'    => \&processFormInputs,
                'editScreen'    => \&editScreen,
                'skip_header'   => 1,
                 );
    $pjx->skip_header(1);
    $pjx->cgi( $cgi );
    print $pjx->build_html( $cgi, \&main, {-charset=>'UTF-8', -expires
+=>'-1d'} );
    $pjx->JSDEBUG(1);
[download]

<div id="top_menu" name="ntop_menu" class="flex-container topnav">

$TOP_MENU_OPTIONS

</div>

<select id="chapter" name="nchapter" onchange="processFormInputs(['boo
+k'],['top_menu'], 'POST'); this.form.submit();">
<option value="">Chapter</option>

$bookchaptercountoptions

</select>

<select id="verse" name="nverse" onchange="processFormInputs(['verse']
+,['top_menu'], 'POST'); this.form.submit();" />
<option value="">Verse</option>

$chapterversecountoptions

</select>

<input type="submit" id="prev_verse" name="nprev_verse" value="<-- Pre
+v Verse" $pv
    onclick="processFormInputs(['prev_verse'],['top_menu'], 'POST'); t
+his.form.submit();" />
    
<input type="submit" id="next_verse" name="nnext_verse" value="Next Ve
+rse -->" $nv 
    onclick="processFormInputs(['next_verse'],['top_menu'], 'POST'); t
+his.form.submit();" />
[download]

When I have managed to get any output from this at all to appear on the screen, it appears in the <div> for the comparison text, and not in the one for the menu as it should. (The menu is updating its own options based on queries to the database to populate the option lists.) Any ideas for how to proceed would be much appreciated.