Error when creating element using jquery

Question

This is the error that occurs:

Uncaught TypeError: Cannot read property 'replace' of undefined jquery.min.js:2
m.extend.camelCase jquery.min.js:2
m.extend.css jquery.min.js:3
(anonymous function) jquery.min.js:3
m.access jquery.min.js:3
m.fn.extend.css jquery.min.js:3
(anonymous function) tryingAgainTable.html:69
(anonymous function) tryingAgainTable.html:43
foreach tryingAgainTable.html:29
reduce tryingAgainTable.html:42
makeData.data tryingAgainTable.html:68
(anonymous function)

I create an element using jquery like this:

 makeData["data"]({
"name": "Taxi Driver",
"style": {
    "width": "71%"
},
"children": [
    {
        "el": "input",
        "attributes": {
            "name": "taxi_driver",
            "id": "taxi_driver",
            "type": "file"
        },
        "style": {
            "border": "solid 1px red"
        }
    },
    {
        "el": "img",
        "attributes": {
            "id": "TaxiDriver",
            "src": "#",
            "alt": "your image"
        }
    }
]
});

The function is defined here:

var foreach=function(arr,fn)
    {
        for(var i=0;i<arr.length;i++)
        {
            fn(arr[i]);
        }   
    };

 var reduce=function(arr,base,fn)
    {
        foreach(arr,function(elem){
            base=fn(base,elem);
        });
        return base;
    }

 makeData["data"]=function(obj)
    {
        var td=$('<td></td>').css(obj["style"]);
        var td_out=reduce(obj.children,td,function(base,elem){
            var element=$('<'+elem["el"]+'>').attr(elem["attributes"]).css(elem["style"]).appendTo(base);
        });
        console.log(td_out.get(0));
        console.log(td_out.html());
        return td_out;
    }

The error is here in the jquery source is at line 346:

// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
}

Use regular (non-minified) jQuery file to see where exactly the error happens. Location "jquery.min.js:2" is not very descriptive. — Radek Pech
– Radek Pech, Commented May 28, 2014 at 6:57
My guess is - the object passed to it isn't a string so it fails to recognize the replace function? Did you debug the thing? What is the value of the "string" variable when it fails? — Jurijs Kastanovs
– Jurijs Kastanovs, Commented May 28, 2014 at 7:56

Tiberiu C. · Accepted Answer · 2014-05-28 08:14:24Z

In your data you have an inconsistency : for the first children you have a style and for the second you don't.

I think your error comes from this line on .css call.

var element=$('<'+elem["el"]+'>').attr(elem["attributes"]).css(elem["style"]).appendTo(base);

Look what happens when you .css(undefined) in this jsbin: http://jsbin.com/kuwoc/1/edit

so you can try reshape your make['data'] function adding undefined checks:

makeData["data"]=function(obj){
    var td=$('<td></td>').css(obj["style"]);
    var td_out=reduce(obj.children,td,function(base,elem){
        var element=$('<'+elem["el"]+'>');
        if(elem["attributes"]){
          element.attr(elem["attributes"]);
        }
        if (elem["style"]){
          element.css(elem["style"]);
        }
        element.appendTo(base);
    });
    console.log(td_out.get(0));
    console.log(td_out.html());
    return td_out;
};

PS: And as a recommendation consider the dot notation as well, instead of makeData['data'] use makeData.data.

Collectives™ on Stack Overflow

Error when creating element using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related