Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Marco Teodoro 62 posts 136 karma points
    Feb 24, 2015 @ 20:46
    Marco Teodoro
    0

    Adding a tab custom section angular errors

    Hello Guys, 

    I'm trying to implement a custom section. i've follow some some blog posts like :http://www.enkelmedia.se/blogg/2013/11/22/creating-custom-sections-in-umbraco-7-part-1.aspx and 

    http://www.nibble.be/?p=440 and off course also the belle documentation and tutorials. 

     

    The custom section is working ok, i can load umbraco backend open my tree, and also the custom editor.html is loading ok on view. But everytime i load the view editor, the first tab is visualy selected but the content is not displayed. i've always this js error on console 

     Error: No controller: form

        at Error (native)

        at i (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:42:359)

        at k (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:44:463)

        at e (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:40:139)

        at http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:39:205

        at http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:162:213

        at Object.fn (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:90:12)

        at Object.$get.e.$digest (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:90:356)

        at Object.$get.e.$apply (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:92:431)

        at HTMLAnchorElement.<anonymous> (http://localhost:49314/umbraco/lib/angular/1.1.5/angular-mobile.js:269:13) <li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in visibleTabs" val-tab="" class="ng-scope">

    My angular controller is more or less like this:

    'use strict';

    (function () {

        //create the controller

        function productTreeEditController($scope, $routeParams) {

            //set a property on the scope equal to the current route id

            $scope.id = $routeParams.id;

     

            if ($scope.id == "hotels") {

                $scope.content = { tabs: [{ id: 1, label: "Lista de hoteles" }, { id: 2, label: "Subir Hoteles" }] };

     

                $.get('/Backend/Hoteis', function (view) {

                    $("#tab1 .umb-pane").html(view);

                });

                $.get('/Backend/Index', function (view) {

                    $("#tab2 .umb-pane").html(view);

                });

     

            } else if ($scope.id=="seguros") {

                $scope.content = { tabs: [{ id: 1, label: "Seguros" }, { id: 2, label: "Subir Hoteles" }] };

                $.get('/Backend/Seguros', function (view) {

                    $("#tab1 .umb-pane").html(view);

                });

                $.get('/Backend/Index', function (view) {

                    $("#tab2 .umb-pane").html(view);

                });

            }

            else {

                $scope.content = { tabs: [{ id: 1, label: "fligths" }, { id: 2, label: "Subir Hoteles" }] };

                $.get('/Backend/Voos', function (view) {

                    $("#tab1 .umb-pane").html(view);

                });

            }

        };

        angular.module("umbraco").controller('ProductSection.ProductTree.ProductTreeEditController', productTreeEditController);

    })();

     

    and my view:

     

    <div ng-controller="ProductSection.ProductTree.ProductTreeEditController">

        <umb-panel>

            <umb-header tabs="content.tabs">

                <div class="umb-headline-editor-wrapper span12 ng-scope">

                    <h1 class="ng-binding">{{label}}</h1>

                </div>

            </umb-header>

            <umb-tab-view>

                <umb-tab id="tab1">

                    <div class="umb-pane">

                    </div>

                </umb-tab>

                <umb-tab id="tab2">

                    <div class="umb-pane">

                    </div>

                </umb-tab>

            </umb-tab-view>

        </umb-panel>

     

    </div>

     

    Note: i'm using jquery to load a partial view from mvc controller because i don't know how to do it using angularjs. 

  • Sören Deger 726 posts 2827 karma points c-trib
    Feb 24, 2015 @ 20:54
    Sören Deger
    0

    Hi Double,

    maybe there is an error in your package.manifest file or your initialization of the angularJS controller is wrong? Can you post the first lines of your controller here, please?

    Or is this the first line in your controller?
    'use strict';

    (function () {

        //create the controller
        function productTreeEditController($scope, $routeParams) { 

     

    Best,

    Sören

  • Marco Teodoro 62 posts 136 karma points
    Feb 24, 2015 @ 21:26
    Marco Teodoro
    0

    Hi Sören,

    thanks a lot for the fast response. 

    Yes. this is the full controller code. isn't right?

  • Sören Deger 726 posts 2827 karma points c-trib
    Feb 24, 2015 @ 21:31
    Sören Deger
    0

    Hi Double,

    I think the problem exist, because you using jquery instead of angularJS.

    An angularJS controller must begin with this code:

    angular.module("umbraco").controller("ProductSection.ProductTree.ProductTreeEditController", function ($scope, $routeParams) {

     

    And have you create a package.manifest file? This is indispensable for a custom property editor.

     

    Best,

    Sören

  • Marco Teodoro 62 posts 136 karma points
    Feb 24, 2015 @ 21:38
    Marco Teodoro
    0

    yes the package manifest is ok. At least the js code is injected and if i set any console log or debugger i can see the code running. So maybe you are right about the problem is related to jquery! so let me rephrase my question.

    How can i inject on each tab some html content as i'm doing with jquery but using angular. What i'm trying to do is just load the result of a mvc action that will return a partial view

     

    this is my manifest 

    {

    javascript: [

        '~/App_Plugins/ProductSection/BackOffice/ProductTree/ProductSection.ProductTree.edit.Controller.js'

    ]

    }

     

    i'm editing my post since i found that the issue is not with jquery. If i remove the call to my partial view and let only hardcoded html on view the issue persist. 

     

    This is my controller now.

    'use strict';

    (function () {

        //create the controller

        function productTreeEditController($scope, $routeParams) {

            //set a property on the scope equal to the current route id

            $scope.id = $routeParams.id;

            $scope.content = { tabs: [{ id: 1, label: "Lista de hoteles" }, { id: 2, label: "Subir Hoteles" }] };

        };

        //register the controller

        angular.module("umbraco").controller('ProductSection.ProductTree.ProductTreeEditController', productTreeEditController);

     

    })();

     

    My view : 

    <divng-controller="ProductSection.ProductTree.ProductTreeEditController">

        <umb-panel>

            <umb-headertabs="content.tabs">

                <divclass="umb-headline-editor-wrapper span12 ng-scope">

                    <h1 class="ng-binding">{{label}}</h1>

                </div>

            </umb-header>

            <umb-tab-view>

                <umb-tab id="tab1">

                    <div class="umb-pane">

                    </div>

                </umb-tab>

                <umb-tab id="tab2">

                    <div class="umb-pane">

                    </div>

                </umb-tab>

            </umb-tab-view>

        </umb-panel>

     

    </div>

    And console errors:

    Error: No controller: form

        at Error (native)

        at i (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:42:359)

        at k (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:44:463)

        at e (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:40:139)

        at http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:39:205

        at http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:162:213

        at Object.fn (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:90:12)

        at Object.$get.e.$digest (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:90:356)

        at Object.$get.e.$apply (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:92:431)

        at j (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:101:80) <li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in visibleTabs" val-tab="" class="ng-scope">

     

    So same issue without using jquery....

     

    But if i remove this code

     $scope.content = { tabs: [{ id: 1, label: "Lista de hoteles" }, { id: 2, label: "Subir Hoteles" }] };

    I will no longer see the js issues.... but offcourse tabs are not rendered on view... Can anyone from the comunity help me with this?

     

    thks a lot,

    Marco

  • Delly Mellas Nyman 64 posts 316 karma points
    Mar 12, 2015 @ 04:35
    Delly Mellas Nyman
    0

    Hi Double,

    Have you solve this problem? I got the same issue when I turn my page using umbraco tabs, but when I remove the tabs, no js error found in the console.

    Thanks,
    Delly 

  • Dave Woestenborghs 3217 posts 10834 karma points MVP 4x admin c-trib
    Mar 12, 2015 @ 08:50
    Dave Woestenborghs
    1

    Hi,

    I have working tabs in the code demo of my Umbraco Uk festival talk : https://bitbucket.org/dawoe/umbukfestival2014

    Maybe you can have a look there ?

    Dave

  • Delly Mellas Nyman 64 posts 316 karma points
    Mar 12, 2015 @ 09:23
    Delly Mellas Nyman
    4

    Hi Dave,

    Thanks for your code demo, now I know what the problem and why this error come from. It's because of my tab doesn't surrounded by form tag it cause the error for my code:

    Here's the code that cause error:

    and here's the solution:

    Thanks Dave for your help.

    /Delly 

  • Dave Woestenborghs 3217 posts 10834 karma points MVP 4x admin c-trib
    Mar 12, 2015 @ 09:36
    Dave Woestenborghs
    1

    Glad to be of help. Don't forget to mark this post as solution so others can find it.

    Dave

  • Marco Teodoro 62 posts 136 karma points
    Mar 19, 2015 @ 17:19
    Marco Teodoro
    0

    Hello,

    Sorry guys for the late feedback, i was not near my computer actually i was in vacations. Dely i'm happy that you did resolve your issue, but mine is a little bit different. I want to use a tab but i don't need a form. In fact what i would like to have is a listview to show several items from a custom table. Anyone knows how to do this?

    I saw some other posts on the forum looking for a solution like this.

    Best,

    Marco Teodoro

  • Travis Wilson 4 posts 93 karma points
    Jul 08, 2016 @ 18:07
    Travis Wilson
    0

    I need this as well. No form in my case.

  • David Brendel 753 posts 2820 karma points c-trib
    Jul 08, 2016 @ 18:20
    David Brendel
    0

    Hi Travis,

    don't think it will work without the form Tag. Is there a special reason why you don't want to add one?

    Regards David

  • Kyle Weems 42 posts 296 karma points MVP 3x c-trib
    Mar 19, 2015 @ 18:33
    Kyle Weems
    1

    Glad I found this thread. I've been having issues with tabs every now and then and wasn't sure what was causing it. Thanks!

  • K Jansen 2 posts 72 karma points
    Dec 16, 2016 @ 14:54
    K Jansen
    0

    Sorry for the bump, but this may help others.

    I am currently working on a custom section for Umbraco 7. Got the same error when I was using tabs.

    • no controller: form

    Wrapping my view inside a form tag resulted in the following error.

    • no controller: valFormManager.

    Thanks to a tutorial (by Casper Andersen) I was able to fix these errors. All I had to do was insert the directive val-form-manager to my form tag.

    Here's the example code:

    <form ng-controller="yourController" submit="save()" val-form-manager>
    

    Hope it helps some of you (rookies like me) out!

Please Sign in or register to post replies

Write your reply to:

Draft