Solved - TypeError: Cannot call method 'insertBefore' of null

ionic-v1
1

Hi, I’ve a SideMenu with a ng-repeat populated by $http. So when I click on item , I call a view and controller, but not display the view in sidemenu because I’ve always “TypeError: Cannot call method ‘insertBefore’ of null”

Code:

Index Menu:



Child View ( into html external file )

   <ion-item ng-repeat="item in itemList" type="item-text-wrap" href="">
   
  </ion-item>

Controller:
.controller(‘PfItemsCtrl’, function($scope, $stateParams, $http, exchAPIservice) {
// “Pets” is a service returning mock data (services.js)
$scope.headerTitle = “Elenco PF 2”;
$scope.itemList = [];

$scope.itemList=$http({method: ‘GET’, url: ‘js/subdir_FlightSims.json’, cache:false});

})

App.js
.state(‘tab.pf-items’, {
url: ‘/pfitems/:pfId’,
views: {
‘menu-view’: {
templateUrl: ‘templates/pf-items.html’,
controller: ‘PfItemsCtrl’
}
}
})

2

I’m having trouble wrapping my head around that. Can you put up a CodePen sample?

However, I’m not sure you can use :

$scope.itemList=$http({method: 'GET', url: 'js/subdir_FlightSims.json', cache:false});

Angular’s $http is essentially a promise and provides success and error callbacks. You need to assign the values in the success callback.

$http({method: 'GET', url: 'js/subdir_FlightSims.json', cache:false})
.success( function(data, status, header, config) {
    $scope.itemList = data;
});
3

No. I’ve the same error. My code before was:

exchAPIservice.GetChildPublicFolders($stateParams.pfId).success(function (response) {
console.log($stateParams.pfId);
$scope.itemList = response;
}).
error(function(response,status, headers, config) {
console.log(status);
});

but with the same error.

4

I published to https://github.com/biapar/IonicFramework-Nested-Side-Menu for helping.
Thanks
PS: I need to polish the code. This is for testing.

5

I really can’t go through your whole code base. If you setup a CodePen sample then I can dabble with it to see what is going wrong.

6

Ok…How config CodePen ( my solution has more files )? I debugged with Chrome and the error in ionic.bundle.js at 10181 ( see image )

7

I found the problem.
I try to remove parameter from url into state url '/pf/:pfId'
and the error gone.
Now is:

.state('tab.pf', {
	url: '/pf',
	views: {
		'content-view': {
			templateUrl: 'templates/pf.html',
			controller: 'PfListCtrl'
		}
	}
}

I used before this sintax to call the view with parameter into template

 <a  ui-sref="tab.pf({ pfId: item.UniqueId })"><i class="icon ion-android-storage"></i></a> {{item.Name}}

I try to leave the state unchanged and call the view without parameter and it works. I see the next view into side menu area or content area.

So… Which is the method to pass parameter, to config url and call the template?

8

Found!
The problem is the parameter value.
It works with

<a ui-sref="tab.pf({ publicNo: item.Name})" href="#/tab/pf/**FlightSims**"><i class="icon ion-android-storage"></i></a>

Don’t works with

<a ui-sref="tab.pf({ publicNo: item.UniqueId})" href="#/tab/pf/**AQEuAAADGkRzkKpmEc2byACqAC%2FEWgMA2sW1g79X1Ea9vI48%2Bu2PDAAAAw4AAAA%3D**"><i class="icon ion-android-storage"></i></a>

But I need to use the second value!

9

Are you sure item.UniqueId exists? Without using the ui-sref, just print out that variable onto the page to make sure it displays

{{item.UniquedId}}

CodePen : Just setup a simple sample. You can fork something like this.

10

Yes, it’s exist. I try to encode date before.

11

I solved. I pass the parameter after encode it.

view

  <a ui-sref="tab.pf({ publicNo: parseUniqueID(item.UniqueId), pfName:item.Name })"><i class="icon ion-android-storage"></i></a>

into the caller controller

$scope.parseUniqueID = function(pfID) {
        //date parsing functionality
        return Base64.encode(pfID);
     }

so into the target controller, I read the parameter with

$scope.mytitle = $stateParams.pfName;

… the error is gone!

12

I facing similar problem…

I have sref tag inside directive-

<article class="list-item" ui-sref='tab.singleVenue({id: venue.venue.id })'>

The id parameter is int.

Error: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
at Error (native)
at http://app.godisco/src/vendor/angular/angular.js:2937:16
at forEach (http://app.godisco/src/vendor/angular/angular.js:328:18)
at forEach.replaceWith (http://app.godisco/src/vendor/angular/angular.js:2933:5)
at Object.JQLite.(anonymous function) [as replaceWith] (http://app.godisco/src/vendor/angular/angular.js:3061:17)
at IonicModule.controller._animateTitles (http://app.godisco/src/vendor/ionic/release/js/ionic-angular.js:3836:32)
at IonicModule.controller.changeTitle (http://app.godisco/src/vendor/ionic/release/js/ionic-angular.js:3811:12)
at link (http://app.godisco/src/vendor/ionic/release/js/ionic-angular.js:7751:22)
at nodeLinkFn (http://app.godisco/src/vendor/angular/angular.js:6648:13)
at compositeLinkFn (http://app.godisco/src/vendor/angular/angular.js:6039:13) <ion-view class="ng-enter pane">
  • I also tried to replace the sref with function in the controller which do $state.go()…
13

this is really odd… sometime it just work randomly.

Edit:
I doesn’t realize it yet… but I think after a few times it does work. maybe after the ajax on the “new” page is loaded… it seams like it related to the title. I tried to add temporary title until the ajax is loaded but it didn’t helped.

Edit:
I have a guess that this issue is happening after “too fast” clicking on the element after it load. if I wait a second or two after the element is load then clicked it work. weirddd…

14

Have ID some special chars?

15

Nope, I haven’t. (this is the part I just write some shitty text until 20chars)

16

Uhm…I think that the problem is the url. Which are your states?

17

It suddenly start working again… I think its related to fixing other bugs that we solve on the “forward state”