Angularjs: not found the form fetched through the ajax call from the server

Question

I have a problem to deal with fetching the html through the ajax call. It fetches the template of the add form; but I couldn't find the form fetched from html through the ajax call. So, how can I submit the form with angularJS? Please help me!

<div class="alive" ng-controller="ListController">
    <div ng-include="templateForList"></div>
</div>
<div class="alive" ng-controller="AddController">
    <div ng-include="templateForAddition"></div>
</div>

<script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []).config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    }]);

    app.service('StoreService', ['$http', function ($http) {
        return {
            getAll: function () {
                return $http.get('/admin/shopping/stores/list');
            }
        };
    }]);

    app.factory('myCustomService', function($rootScope) {
        var sharedService = {};
        sharedService.broadcastEvent = function(eventName) {
            $rootScope.$broadcast(eventName);
        };

        return sharedService;
    });

    app.controller('ListController', ['$scope', 'StoreService', 'myCustomService', function($scope, StoreService, sharedService) {
        $scope.stores = {};
        $scope.templateForList = '/views/stores/list.tpl.html';
        StoreService.getAll().success(function(response) {
            $scope.stores = response.data;
        });

        $scope.showAddForm = function(store, storeEntryForm) {
            sharedService.broadcastEvent('displayAddForm');
        };
    }]);

    app.controller('AddController', ['$scope', function($scope) {
        $scope.templateForAddition = '/views/stores/add.tpl.html';
        $scope.$on('displayAddForm', function() {
            angular.forEach(document.getElementsByClassName('skate-item'), function(item) {
                var $item = angular.element(item), s = $item.scope();
                if ($scope.$id == $item.scope().$id) {
                    $item.addClass('alive');
                } else {
                    $item.removeClass('alive');
                }
            });
        });

        $scope.create = function(store) {
            console.log('submitting', $scope.storeEntryForm, $scope.store);
        };
    }]);
</script>

And the add.html is:

<form method="post" name="storeEntryForm" class="form-horizontal" data-ng-submit="create(store)" novalidate>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="box box-success">
            <div class="box-header"><h3 class="box-title">Create Store</h3></div><!-- /.box-header -->
            <div class="box-body clearfix">
                <div class="col-xs-12 col-sm-12 col-md-5">
                    <div class="form-group">
                        <label class="control-label">Name</label>
                        <input type="text" placeholder="Enter name of the store" class="form-control" ng-model="store.name" name="name" required ng-maxlength="50" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">Address</label>
                        <textarea placeholder="Enter address" class="form-control" ng-model="store.address" name="address" ng-maxlength="100"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="control-label">ISO No.</label>
                        <input type="text" class="form-control" ng-model="store.iso_no" name="iso_no" ng-maxlength="50" />
                    </div>
                </div>
            </div><!-- /.box-body -->
            <div class="box-footer text-center">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>
            </div>
        </div><!-- /.box -->
    </div><!-- /.bs3-col-lg-8 -->
</form>

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

You can find the solution from https://stackoverflow.com/a/23701325. Very similar problem and I guess that is causing reasonably. For further study you can read Javascript prototype chaining from Why form undefined inside ng-include when checking $pristine or $setDirty()? . Hope this will work.

Thanks

edited May 23 '17 at 12:33

Community

1
1

answered Jan 14 '17 at 18:36

Shaharia Azam

1,948
19
25

score 0 · Answer 2 · answered Jan 13 '17 at 20:00

0

I've just written a piece of code. You need to surrond the html with from tag and ng-submit directive. The ng-submit will call the function to post the data.

Please check my jsFiddle: http://jsfiddle.net/v9djntf2/

<form ng-submit="sendPost()">
    <input ng-model="NewPerson.Name"/>
    <button type="submit">Send</button>
</form>

answered Jan 13 '17 at 20:00

Everton Santos

162
5

I have already used the ng-submit directive in the form as data-ng-submit="create(store)". And I have fetched the form through the ajax call and appended this into the ngInclude directive of the AddController. Now, I want to submit the form to the server. But I can't find the form while clicking the submit button. – Syed Abidur Rahman Jan 13 '17 at 21:24
Do you have a jsFiddle example? – Everton Santos Jan 13 '17 at 21:42

Angularjs: not found the form fetched through the ajax call from the server

2 Answers2