AJAX/JQuery + Perl database query help

[Hybride]

Am working on a project that am teaching myself JQuery for the first time, integrating it with Perl (am trying to advance my abilities in Perl, which is why I chose that instead of PHP, so bear with me, please.) I've got the query working almost how I want it, except... not exact. Basically what happens is, I have the following JQuery:

 

This guy is in folder /js_jquery/lament_functions.js

function chooseDeg() {
$(".msg_body").hide(); //will keep it from appending 2x
var under_or_grad  = $('input[name=select_degree]:checked').val();  
	$('.msg_body').toggle('slow', function() {
		$.ajax({
    	    type: "POST",
     	   	url: "../../functions.pl", // URL of the Perl script
        	contentType: "application/json; charset=utf-8",
        	dataType: "json",
        	data: "select_degree=" + under_or_grad,
        	// script call was *not* successful
        	error: function(XMLHttpRequest, textStatus, errorThrown) { 
    			alert("Failed query.");
        	}, // error 
        // script call was successful 
        // data contains the JSON values returned by the Perl script 
        success: function(data){
     	$('.msg_body').text(under_or_grad);

        } // success
      }); // ajax
	});
}

 

Which queries the database correctly, but only if you type in through the URL the actual ID number. So, if you go to http://lament.anekyu.com and click on either two radio buttons, it will correctly display either 1 or 2 (undergrad/graduate), but not query the database. If you go to http://lament.anekyu.com/index.pl?select_degree=1 or http://lament.anekyu.com/index.pl?select_degree=2, the correct result will show. I would like to have the index page able to do that without having to add the GET query.

 

This is my index page:

print $q->header,  
$q->start_html(
   		-title=> "LAMENT:: LOCUS, A Monstrously Exhausting Non-working Tripe",
	-base=> "true",
   		-style=>{'src'=>'../style.css'},
	#-script=>$JSCRIPT,
	-script=>[ { -type => 'text/javascript',
				 -src => 'jquery_js/jquery-1.5.1.min.js'},
			   { -type => 'text/javascript',
				 -src => 'jquery_js/lament_functions.js'}]),
	h1('Choose your (CS) destiny.'),br,
	start_form(-name=>'choosedestiny', -id=>'choosedestiny');


print "<div id='box'>";

&chooseDegree;

print "<div class='msg_body'>";
 my $which_degree = param('select_degree');  #choose which program under under/graduate
chooseProgram($dbc,$tbl_prog,$which_degree);	

 

And the functions page, in same folder as index.pl (called "functions.pl"):

################################################################################
# Undergrad, Graduate or PhD;
# 1 & 2 are selectable now.
#################################################################################

sub chooseDegree{
print radio_group(
	-name=>'select_degree',
	-values=>[qw/1 2/],
	-labels=>{'1'=>'Undergraduate','2'=>'Graduate'},
	-default=>'-',
	-onClick=>"chooseDeg()", #this is for the JQuery drop-down
),br, br;

}


#######################################################
# SHOW ALL AVAILABLE PROGRAMS RELATED TO DEPARTMENT
#######################################################

sub chooseProgram {
my ($dbc,$tbl_prog,$choose_degree) = @_;
my $sth = $dbc->prepare("select * from $tbl_prog where dept_program=?") or die "Select statement failed: $DBI::errstr\n";
$sth->execute($choose_degree);

print "<div id='choose_degree'>";
while (my @data = $sth->fetchrow_array()) {
	print radio_group(
		-name=>'select_program',
		-values=> $data[0], #this is the program's unique id
		-labels=> {$data[0]=>$data[3]}, #map the value/id to the this is the program name, ie: 1=>Software Development
		-default=>'',
		-linebreak=>'yes',
		-onClick=> ""
	);		
    };

print $choose_degree;
print "</div>";
}

[JustLikeIcarus]

You have two functions in your functions.pl script but you have nothing in there that is actually calling the functions.  So when you load call functions.pl?select_degree=<whatever> nothing is actually happening since those sub's are just defining functions.

[Hybride]

The two functions in functions.pl are called straight in the index,

&chooseDegree;

print "<div class='msg_body'>";
 my $which_degree = param('select_degree');  #choose which program under under/graduate
chooseProgram($dbc,$tbl_prog,$which_degree); 

 

Would it be possible to return the value from the JQuery call and automatically plug it into the Perl function?

[JustLikeIcarus]

Yes theyre called in index but you are not calling index when you submit your ajax call.  if you call index instead of functions.pl in the ajax request I think you will get back something more desirable since index returns the correct information if you call it directly with the variable.

 

Since you are concentrating on perl I'll try to target my help there.  in your perl code you could try doing something like this.

 

if(param('select_degree'))

{

    my $which_degree = param('select_degree');  #choose which program under under/graduate

    chooseProgram($dbc,$tbl_prog,$which_degree);

}

else

{

    print "<div id='box'>";

    &chooseDegree;

    print "<div class='msg_body'>";

}

 

That way your only returning the content you want to be appended to message body.  This will not be returned as json so you want to change your jquery as needed.

[Hybride]

I tried your suggestions, and started going in the right direction, but still have some issues.

 

I changed the onClick to onChange now (I didn't realize CGI didn't allow -onChange for radios):

sub chooseDegree{
my $radios = <<END;
<input type='radio' name='select_degree' value='1' onChange='chooseDeg()'>Undergraduate</input>
<input type='radio' name='select_degree' value='2' onChange='chooseDeg()'>Graduate</input>
END
print $radios;
}

 

And then I switched the JQuery a tad bit:

function chooseDeg() {
$(".msg_body").hide(); //will keep it from appending 2x
var select_degree  = $('input[name=select_degree]:checked').val();  
	$('.msg_body').toggle('slow', function() {
		$.ajax({
    	    type: "POST",
     	   	url: "../../functions.pl", // URL of the Perl script
        	contentType: "application/json; charset=utf-8",
        	dataType: "html",
        	data: "select_degree=" + select_degree,
        	// script call was *not* successful
        	error: function(XMLHttpRequest, textStatus, errorThrown) { 
    			alert("Can't grab the degree - try again.");
        	}, // error 
        // script call was successful 
        // data contains the JSON values returned by the Perl script 
        success: function(data){
     	$('.msg_body').text(select_degree);
      	     } // success
      }); // ajax
	});
}

 

Now, the code actually queries the function and displays on the page, BUT it can't actually seem to grab the onChange result (so basically, it queries MySQL with a blank ID). So if I try to print a "success" as a test, it will print "success" but the query itself is blank:

	my $sth = $dbc->prepare("select * from $tbl_prog where dept_program=?") or die "Select statement failed: $DBI::errstr\n";
$sth->execute($choose_degree);

print "<div id='choose_degree'>";
while (my @data = $sth->fetchrow_array()) { ...}

 

So $choose_degree isn't actually getting any variable associated with it. The question is, how do I return the onChange variable result?

[Hybride]

I knew it was something simple!

 

<input type='radio' name='select_degree' value='1' onChange='chooseDeg();document.getElementById("choosedestiny").submit()'>Undergraduate</input>

 

I submit the form id automatically on change. Am sure there's a bit cleaning up to do, but that little line of voodoo/magic did what I needed to happen.

[JustLikeIcarus]

yeah but now you aren't performing any request using ajax.  It is now doing a full form submit to index.pl and reloading the page.

 

To show you what im talking replace your chooseDeg() function with the one i threw together below and remove the call to submit from your onChange sections.  You should then see the result your looking for.

function chooseDeg() {

    var select_degree  = $('input[name=select_degree]:checked').val();  
    $.post('../../index.pl', {select_degree: select_degree}, function(data)
    {
        $(data).find('#degrees').appendTo('#degrees');
    });

});

 

[Hybride]

Ok, am fascinated - 1/2 the code, and works. Could you please explain what you did? 

[JustLikeIcarus]

As your perl code is currently written (going off of whats posted in the forum) in order to access the perl functions defined in functions.pl you have to go through index.pl.  So that is why the request is being made to index.pl.  Now since index.pl is currently coded to return the entire page im using jquery to pull out the contents of the #degrees div (since that is all needed from this request) and then append them to the #degrees div that currently exists. That is done with this $(data).find('#degrees').appendTo('#degrees'); "data" is the entire html page returned of which im telling it to find degrees within that and place it in the current degrees. That should probably be changed to $('#degrees').replaceWith($(data).find('#degrees')); but it works for the example.  The jQuery $.post() function is a shorter way to do an $.ajax() post call.