CarlRaymond / jquery.cardswipe

jQuery plugin for magnetic card readers
MIT License
115 stars 49 forks source link

Not able to trigger the success callback (using the demo-simple.html) #27

Closed ghost closed 6 years ago

ghost commented 6 years ago

I'm trying out the jquery.cardswipe plugin, but having difficulties with the demo-simple.html. The success callback function looks like it should be displaying text in the status and properties elements.

I've verified that my magnetic stripe card reader can read data successfully from some custom ID badges into Notepad. When using the demo-simple.html example with the debug parameter set, the console displays the array of chars that were read in from the card (which indicates the plugin is getting data). BUT the success() function never gets called and never generates the display text it should. To troubleshoot it, I added a console.log in the success function, but it never gets called. (I've tried it with both a custom parser and the generic one.)

Not sure if this is a factor, but it appears that when the card reader sends the data it also adds an ENTER, which makes the page reload.

An example of the data encoded on the card looks like this: %01234^JOHN DOE^126 SALEM STREET?

Here's the code as I've modified it. What am I missing?

` var successCallback = function (data) { console.log( "My Output" );

        $("#status").text("Success!");

        $("#properties").empty();

        // Iterate properties of parsed data
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                var text = key + ': ' + data[key];
                $("#properties").append('<li class="data">' + text + '</li>');
            }
        }
    }

    var error = function () {
        $("#status").text("Failed!");
        $(".line").text("");
    }

    // Parser for Union Badge format
    var unionParser = function (rawData) {
        var pattern = new RegExp("%([0-9]{4,6})^([A-Z ]+))^([A-Z0-9]+)?");
        var match = pattern.exec(rawData);
        if (!match) return null;

        var cardData = {
            type: "union",
                    badge: match[0],
            fullname: match[1]
        };

        return cardData;
    }

    $.cardswipe({
        firstLineOnly: true,
        success: successCallback,
        parsers: unionParser,
        error: error,
        debug: true
    });

`

ghost commented 6 years ago

After looking closer at the jquery.cardswipe.js code and checking the console in debug mode, I found two mistakes I had made.
First: The card data needs to be encoded to contain a letter for the second character (mine had a digit). Second: The RegExp expression syntax was incorrect.

Hopefully, this may help others that are new to using card scanners.

CarlRaymond commented 6 years ago

Regular expressions will get you every time!

I hope you find the plugin useful.

ghost commented 6 years ago

Yes, after ironing those details it works very well. Thanks again for sharing your plugin code.