No announcement yet.

"Not a constructor" error

  • Filter
  • Time
  • Show
Clear All
new posts

    "Not a constructor" error

    Hey guys,

    I have my C# code as such:

    1) A HTMLDivElement implementation:
        public class AccordionItemBody : HTMLDivElement
            public AccordionItemBody(string id)
                Id = id;
                ClassName = "panel-collapse collapse";
    2) And, on my App.cs:
    var body = new AccordionItemBody(item1);
    However, I get the following error:
    BriTest.js:34 Uncaught TypeError: BriTest.Framework.Accordion.AccordionItemBody is not a constructor
    When I check my generated JS, it has this:

    Bridge.define('BriTest.Framework.Accordion.AccordionItemBody', {
            inherits: [HTMLDivElement],
            constructor: function (id) {
       = id;
                this.className = "panel-collapse collapse";
    Any idea on how to overcome this?



    I changed the implementation to instantiate, instead of the AccordionItemBody, a HTMLDivElement, and set the Id and ClassName on instance. It works. However, I'm looking to build a framework with different implementations, and the ability to inherit from HTMLDivElement would be really important.
    Last edited by nicolas; 2016-06-11 @ 11:03 AM.

    Hi nicolas,

    Yes, HTMLElement elements are the exact wrappers for Html elements. I.e. you cannot call its constructors directly as browsers throw that constructor errors. We are planning to come up with a solution to create HTML components. There is a related forum post and features in GitHub #389 and #1238.

    I would suggest using helpers for your custom elements (see Live example).

    An element definition would be:
    public class AccordionItemBody : HTMLDivElement
        // You can add your fields here
        public int MyField;
    A helper to create elements:
    public class AccordionItemBodyFactory
        public static AccordionItemBody Create(string id, int value)
            var el = new HTMLDivElement();
            el.Id = id;
            el.ClassName = "panel-collapse collapse in";
            el.Style.Width = "300px";
            el.Style.Height = "200px";
            el["myField"] = value;
            return el as AccordionItemBody;
    A code to use the helper:
    var body = AccordionItemBodyFactory.Create("item1", 7);
    body.Style.BackgroundColor = HTMLColor.Green;
    Console.WriteLine(string.Format("{0} - Value: {1} ClassName: {2} BackgroundColor: {3}",
                body.Id, body.MyField, body.ClassName, body.Style.BackgroundColor));
    Hope it helps.


      Hey Leonid, thanks for your reply.
      I'm trying to follow your tip, but now I'm getting a different error:
      Uncaught TypeError: Cannot read property 'create' of undefined
      here's my C# implementation:

          public class AccordionItemHeading : HTMLDivElement
              public static AccordionItemHeading Create(HTMLElement content)
                  var heading = new HTMLDivElement
                      ClassName = "panel-heading"
                  if (content != null)
                  return heading as AccordionItemHeading;
      And using it as such:

                      var headingContent = new HTMLDivElement
                          ClassName = "panel-title"
                      AccordionItemHeading heading = AccordionItemHeading.Create(headingContent);

      Image of the error in js code.

      Click image for larger version

Name:	Screen Shot 2016-06-11 at 16.33.02.png
Views:	1
Size:	23.3 KB
ID:	2403
      Last edited by nicolas; 2016-06-11 @ 02:34 PM.


        Hi nicolas,

        The idea, to work around HTML element inheritance prohibition, is to mark AccordionItemHeading class as [External] (the attribute means Bridge will not generate a class definition for the class, more details here).

        To create real elements we use a separate class, a factory, with no [External] attribute. Bridge will generate JavaScript code that can be called with no Cannot read property 'create' of undefined error.

        Please see Bridge Live example.
        Last edited by geoffrey.mcgill; 2016-06-11 @ 06:44 PM.


          Related To: