Retrieving Javascript Variable to use in Perl

Question

I have a html table with something like this:

<table class="notices-table" width="100%" cellpadding="0" cellspacing="0" border="0">
       <% foreach my $notice (@regular_posts) { %>
       <form method = "post" id = "post-form-<%= $notice->notice_id()%>">
       <tr class = "click-post" href = "<%= $notice->link() %>">
            <td><b>Date Posted: </b> <%= '' . (split(/\./, $notice->created()))[0] %><br/>
            <b>Title: </b><%= $notice->title() %><br/><br/>
            <%= $notice->content() %>
            </td>
            <td><button class = "archive-button" id="archive-button">Archive</button></td>
       </tr>
       <input type="hidden" id="action" name="action" value="archive" />
       </form>
       <% } %>
</table>

and then I have a javascript code that triggers when the "archive" button is hit for each that atempts to retrieve the "notice_id":

$(document).ready(function() {
$('button.archive-button').bind('click', function() {
    var id = $(this).attr('id');
    var parts = id.split(/-/);
    var notice_id = parts[2];
    var post_form_id = '#post-form-' + notice_id; 

    $(post_form_id).submit();

    var path_name = window.location.pathname;
    $.ajax(path_name, {
        type: 'POST'
        data: {
            'notice_id2' : notice_id
        },
        success: function(data) {
            console.log('/takeNotice called successfully:');
            console.log(data);
        },
        error: function(jqXHR, textStatus, err) {
            console.error('/takeNotice call failed:');
            console.error(err);
        }
    });

    return false;
});

});

I want to pass the "notice_id" into a Perl script which will use the id to retrieve the correct post from the database so that it will archive it:

my $cgi = CGI->new;
my $notice_id = $cgi->param("notice_id2");
my $form = $Request->Params();
my $notice;
eval {
    $notice = Taskman::Notice->new(notice_id => $notice_id);
};

I'm pretty new to Perl and Javascript/Ajax so I probably have more problems in here. Any insight would be great. Thanks

EDITED I've made some modifications to my code. Ajax seems to be working but I cant tell if I am still invoking it right or not. The scripts are on the same page. I am still retrieving the wrong "notice_id"

Answer 1

There's nothing fundamentally wrong with your approach, but you're not invoking $.ajax correctly, which will prevent anything from working.

Specifically, you're not providing a URL for your Perl script. For the sake of example, I'll assume your Perl script lives at the path /takeNotice (clever, no?). You would call it like this:

$.ajax('/takeNotice', {
    type: 'POST',
    data: {
        notice_id2 : notice_id
    },
    success: function(data) {
        console.log('/takeNotice called successfully:');
        console.log(data);
    },
    error: function(jqXHR, textStatus, err) {
        console.error('/takeNotice call failed:');
        console.error(err);
    }
});

The success and error functions are not strictly necessary, but it's a good idea to include them, and certainly when you're learning, it really helps understand the flow of your front-end logic.

Speaking of which, you should probably also add some error handling to this code:

var parts = id.split(/-/);
var notice_id = parts[2];
var post_form_id = '#post-form-' + notice_id; 

If the ID is not in the format you expect it to be, you will end up with a post_form_id of "#post-form-undefined . Some error handling and console logging would be useful here.

Lastly, this line does nothing:

$(post_form_id '#action').val('archive');

If you're trying to set the value, you need a second parameter. If you're trying to get the value, you should probably assign it to something.