Call Perl script using D3 Xhr

Question

I have a web application with an HTML form. When I press submit I want to submit the values from this form to a perl script, parseDatabaseData_v2.pl, which get's data from a database and creates a JSON string of that data.

Then, I'd like to visualize this JSON data using a D3 graph. The following code using jquery ajax works, and returns JSON from the perl script as expected.

    var runFromDate = $('#runDateSelectBox1').val();
    var runToDate = $('#runDateSelectBox2').val();
    var barcode = $('#barcodesSelectBox').val();

    var dataString = 'runFromDate='+ runFromDate + '&runToDate=' + runToDate + '&barcode=' + barcode;

    // ajax command
    $.ajax({
        type: 'POST',
        url: './cgi-bin/parseDatabaseData_v2.pl',
        async: true,
        data: dataString,
        dataType: "json",
        success: function(data) {
              console.log("succesfully called script");

        }
    }); // end of ajax command

In the perl script I use cgi->param('runFromDate'); to get the posted parameters.

However, since I'm visualizing the data using NVD3's lineWithFocusChart I want to call the script using d3.xhr.

When I create the following d3.xhr request the script doesn't work (it get's called, but is unable to get the parameters).

    var runFromDate = document.getElementById("runDateSelectBox1").value;
    var runToDate = document.getElementById("runDateSelectBox2").value;
    var barcode = document.getElementById("barcodesSelectBox").value;

    var dataString = 'runFromDate='+ runFromDate + '&runToDate=' + runToDate + '&barcode=' + barcode;

    d3.xhr("./cgi-bin/parseDatabaseData_v2.pl")
      .header("Content-Type", "application/x-www-form-url-encoded")
      .post(dataString,function(error, data){
          console.log("succesfully called script");
              console.log(data);
      });

I've tried various ways of formatting the datastring including formatting it as JSON as explained at the D3 API Reference.

I'd be most grateful if someone was willing to help me with this.

Thanks,

Koen

Answer 1

You have a spurious hyphen between url and encoded!

Change

.header("Content-Type", "application/x-www-form-url-encoded")

to

.header("Content-Type", "application/x-www-form-urlencoded")

Looks like you are not the only one as this other recent answer shows. Seems the offending code has been in the d3.js wiki so I have updated it too.