Framework7: Uncaught TypeError: Cannot set property 'f7View' of undefined

[Neville2312]

Hello, I know someone has made a similar issue but that issue thread had no helpful information.

I get this in the console of Google Chrome

Uncaught TypeError: Cannot set property 'f7View' of undefined framework7.js:247

My App's JS

// Init App
var myApp = new Framework7({
    modalTitle: 'My Cool App',
    // Enable Material theme
    material: true,
});

// Expose Internal DOM library
var $$ = Dom7;

// Add main view
var mainView = myApp.addView('.view-main', {
});


var view1 = myApp.addView('#view-1');
var view2 = myApp.addView('#view-2');
var view3 = myApp.addView('#view-3');

// Add another view, which is in right panel
var rightView = myApp.addView('.view-right', {
});

If anyone has a solution then please share below

[ZanderBrown]

a: it would be helpful to know the line on which the error occurred
b: does the elements exist? looking at this you should have a <div class="view view-main">, <div class="view" id="view-1">, <div class="view" id="view-2">, <div class="view" id="view-2"> & <div class="view view-right">

[Neville2312]

a: The console says framework7.js on line 247.
b: I actually fixed the problem with changing views in the tabs but I still get the error in the console.
I actually have <div class="view view-main"> and <div class="view" id="view-1"> in one line of code so something like this <div id="view-1" class="view tab view-main active">. Should I remove view-right from the javascript if I am not using it. I have view-2 implemented but not view-3 yet

Just to let you know I updated my apps js to reflect something like this

// Init App
var myApp = new Framework7({
    modalTitle: 'My Cool App',
    // Enable Material theme
    material: true,
});

// Expose Internal DOM library
var $$ = Dom7;

// Add main view
var mainView = myApp.addView('.view-main', {
});

var articlesView = myApp.addView('.view-articles', {
});

var tab1 = myApp.addView('#tab1');
var view1 = myApp.addView('#view-1');
var view2 = myApp.addView('#view-2');
var view3 = myApp.addView('#view-3');

// Add another view, which is in right panel
var rightView = myApp.addView('.view-right', {
});

[ZanderBrown]

If .view-right & #view-3 don't exist you shouldn't be trying to initiate them. Also .view-main is being init'd twice, once as .view-main then again as #view-3.

I recommend you take a look at the documentation and iOS sample (http://framework7.io/kitchen-sink-ios/) for further information on using f7.

Finally if your problem is solved please close this issue because this is not a problem with the framework.

[pdbradley]

@Neville2312 I don't know if you figured this out, but in my case, it was simply that I was including the Framework7 javascript before the DOM. I'm using Rails--in my main layout, just by including the javascript at the end (just before the closing body tag), it solved the problem. I spent about four hours puzzling this out. sigh.

[durgeshsatyam]

hey I had the same issue with the
var mainView = myApp.addView('.view-main', {
});

and what solved my problem is that I just added the CSS class view-main in my index.html file at the index.html in the main div (just after body tag).
thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.