I'm just starting out learning how to use the Dancer2 framework and I'm having problems with figuring out how to configure the route to display the returned data with or without the use of the Dancer2::Plugin::Ajax module.

For my initial test the route simply returns "ajax test" but the goal is to return the results of a DB query.

package Templar;

use DBI;
use Dancer2;
#use Dancer2::Plugin::Ajax;
use Dancer2::Plugin::Database;
use Template;
use HTML::Escape qw/escape_html/;
use Crypt::SaltedHash;
use Data::Dumper;

our $VERSION = '0.1';

hook before => sub {
    if (!session('logged_in') && request->dispatch_path !~ m{^/login})
+ {
        return forward '/login', { requested_path => request->dispatch
+_path };
    }
};


#ajax '/p_details'              => sub { "ajax test" };
get '/p_details'              => sub { "ajax test" };
[download]

If I use the ajax route, I get a "404 Not Found" error for the p_details page/route.

The p_details.tt template is:

<script>

$(document).ready(function() {
    $("#folder").find("[id^='tab']").hide(); // Hide all content
    $("#tabs li:first").attr("id","current"); // Activate the first ta
+b
    $("#folder #tab1").fadeIn(); // Show first tab's content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detectio
+n for current tab
         return;
        }
        else{
          $("#folder").find("[id^='tab']").hide(); // Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $("#tabs li").removeAttr("id");
          $(this).parent().attr("id","current"); // Activate this
          $('#' + $(this).attr('name')).fadeIn(); // Show content for 
+the current tab
        }
    });

    partner_details('general');
});

</script>

<span id="top">
<h2>Partner Details</h2>
<h3>The partner details function is still in development and is not ye
+t ready to be used.</h3>
</span>

<ul id="tabs">
  <li><a href="#" onclick="partner_details('general')">General</a></li
+>
  <li><a href="#" onclick="partner_details('qualifier')">EDI Qualifier
+ / ID</a></li>
  <li><a href="#" onclick="partner_details('certificates')">Certificat
+es</a></li>
  <li><a href="#" onclick="partner_details('contact')">Contact Informa
+tion</a></li>
  <li><a href="#" onclick="partner_details('notes')">Notes</a></li>
</ul>

<div id="folder"> </div>
[download]

The javascript is:

function partner_details(catagory)
{
    if (! xmlHttpObj) { init_ajax(); }

    if (xmlHttpObj)
    {
        var url = '/p_details';
        xmlHttpObj.open('GET', url, true);
        xmlHttpObj.onreadystatechange = partner_tab(catagory);
        xmlHttpObj.send(null);
    }
}

function partner_tab(tab)
{
    var details = {
        general:       "tab1",
        qualifier:     "tab2",
        certificates:  "tab3",
        contact:       "tab4",
        notes:         "tab5"
    };

    //alert(details[tab]);

    // status is always 0
    //alert('response status:' + xmlHttpObj.status);

    // xmlHttpObj.responseText is always empty
    //document.getElementById('folder').innerHTML = xmlHttpObj.respons
+eText;

    // this updates the div as expected
    //document.getElementById('folder').innerHTML = "<table><tr><td>" 
++ details[tab] + "</td></tr></table>";

    if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200)
    {
    // we never reach this point
        alert(details[tab]);
        document.getElementById('folder').innerHTML = xmlHttpObj.respo
+nseText;
        //document.getElementById('folder').innerHTML="<table><tr><td>
+" + details[tab] + "</td></tr></table>";
    }

}
[download]

Firebug shows that the status is "200 ok", Content-Type is "text/html", Content-Length is 9, and both Response and HTML show the expected "ajax test", but javascript readystate and status never change so the updating of the div or the alert window never take place.

My first thought was that I had an error in the javascript, but it works correctly in a php app. So, that means that I'm doing something wrong in the route but the Dancer2 documentation in the ajax/jquery area is almost non existent so I haven't been able to figure out the proper syntax.