Jquery / Handlebars error message - Uncaught TypeError: Object [object Object] has no method 'match'

Question

i am working on a little learning project and have run into an issue that i cant work out.

I get the following error message on google chromes dev console :-

Uncaught TypeError: Object [object Object] has no method 'match'
lexer.nexthandlebars-1.0.0.beta.6.js:364
lexhandlebars-1.0.0.beta.6.js:392
lexhandlebars-1.0.0.beta.6.js:214
parsehandlebars-1.0.0.beta.6.js:227
Handlebars.parsehandlebars-1.0.0.beta.6.js:507
compilehandlebars-1.0.0.beta.6.js:1472
(anonymous function)handlebars-1.0.0.beta.6.js:1481
(anonymous function)scripts.js:103
jQuery.Callbacks.firejquery.js:1046
jQuery.Callbacks.self.fireWithjquery.js:1164
donejquery.js:7399
jQuery.ajaxTransport.send.callback

Now this shows up at an error with the following code in the handlebars scrips

match = this._input.match(this.rules[rules[i]]);
Uncaught TypeError: Object [object Object] has no method 'match'

So what i take from this is that there must be an issue with my code and not the handlebar code even though it is in beta.

Here is the section of code that kicked it all off.

displayJobInfo: function( e ) {
    var self = Actors;

    self.config.jobInfo.slideUp( 300 );
    var jobnum = $(this).data( 'job_id' );
    $.ajax({
        data: { job_id: jobnum }

    }).then(function( results ) {
        self.config.jobInfo.html( self.config.JobInfoTemplate( { jobs: results, job_id: jobnum }) ).slideDown(300);
    });
    console.log($(this).data( 'job_id' ));
    e.preventDefault();
}

I have spent hours trying to work this one out myself and have got almost the same section of code working in another part of my site.

Little bit of background - i am using php to pull a database from mysql and then to query the database based on as users input and jquery to overlay the fields back onto the page.

Answer 1

This happens if you try to compile a template from a jquery element object instead of from a string. For example

<script id="my-template-script" type="text/template">...</script>

and then

var my_template = Handlebars.compile( $("#my-template-script") );  // WRONG

You might expect this to blow up right away, but it doesn't. Instead it should be

var my_template = Handlebars.compile( $("#my-template-script").html() );

Answer 2

If you are getting the template as text/html, then your template might be a htmlDocument. If you initialize the template as follows, then it will work fine.

function getTemplate(templateName,context, callback, errorCallback) {
var template = {};
template.name = templateName;
$.ajax({
    url: templateName,
    timeout: 1000,
    datatype: "text/javascript",
    error: function(jqXHR, textStatus, errorThrown) {
        errorCallback && errorCallback.call(context, textStatus);
    },
    success:function(response, textStatus, jqXHR) {
        try {
            template['handlebar'] = Handlebars.compile(jqXHR.responseText);
        } catch(e) {
            console.error("error while creating Handlebars script out of template for [", template, e);
            throw e;
        }
        template['rawTemplate'] = jqXHR.responseText;
        callback && callback.call(context, template);
        return response;
    }
});

}

If you use the response param instead of jqHXR.responseText then you will get the "match" not found. I have tried it.

Answer 3

match apply to string only. You have to apply it to the value of the input. If it's a jQuery object, you can use _input.val() otherwise _input.value should work.

On the other hand, As it's part of the library, you may want to check what data type are expected as input and what you are actually sending.

null for instance is an object in javascript, so you probably want to change it in an empty string if the library doesn't handle it.