Ad

OnClick Function In Modules/classes Not Working

- 1 answer

I am now creating my first app with framework7.io, also with javascript. I'm not a fully beginner in working with javascript.

My problem now is that I want to have a dynamic onClick function which is created inside a javascript class. But the onClick event is not fired.

I use webpack for my javascript

When I've everything in the app.js it was working. Now I want to make my app more OOP like, so I realized my classes and import them.

The problem is that the event onClick is not fired. I tried it with an id but also not working. Also a problem is the this-context.

I think the problem has something to do with the route. For some onChange functionality I've to put the code into pageInit inside the app.js then it was working.

I tried the same with onClick in default view. Cause I need this event on the defaul site/view.

My app is structured the following way:

I have a app.js what is the index file. Here I include all classes/modules I need

Like this:

'use strict';

require('./framework7-4.2.2.bundle');
var config = require('./config');

var functions = require('./functions');


import RealEstate from './real_estate.js';

let real_estates = new RealEstate();
real_estates.loadDefaultRealEstates();

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({ ....

My real_estate.js

...

createRealEstatesCard(data) {
        functions.setOutPut('Called createRealEstatesCard(); with data ... ');
        functions.setOutPut(data);

        let fav = this.getRealEstateFavoritesStatus(data['real_estate_id']);

        if(fav) {
            fav = '<i data-real-estate-id="'+ data['real_estate_id'] +'" class="real-estate-fav material-icons">favorite</i>';
        } else fav = '<i data-real-estate-id="'+ data['real_estate_id'] +'" class="real-estate-fav material-icons">favorite_border</i> <button class="test">Test</button>';

        return ('<div class="card card-expandable">' +
            '              <div class="card-content">' +
            '                <div class="bg-color-red" style="height: 300px">' +
            '                  <div class="card-header text-color-white display-block">'  +
            '                     <img src="'+ data['real_estate_featured_image'] +'">' +
            '                    '+fav+'' +
            '                    <p style="font-size: 0.8em; width: 90%;">' + data['real_estate_title'] + '</p>' +
            '                  </div>' +
            '                  <a target="_blank" rel="nofollow noreferrer" href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">' +
            '                    <i class="icon f7-icons">close_round_fill</i>' +
            '                  </a>' +
            '                </div>' +
            '                <div class="card-content-padding">' +
            '<p></p>' +
            '                  <p>Preis: <strong>' + data['real_estate_price'] + ' € </strong></br>' +
            '                   Terms: <strong>' + data['real_estate_terms'] +'</strong></br>' +
            '                   Zimmer: <strong>' + data['real_estate_rooms'] +'</strong></br>' +
            '<a class="link" target="_blank" rel="nofollow noreferrer" href="/real_estate/show/' + data['real_estate_id'] + '/">Detail view</a></p>' +
            '                </div>' +
            '              </div>' +
            '            </div>');
    }
...

I've tried it like the following way:

app.js

var app = new Framework7({
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'XXXXXX', // App name
    theme: 'auto', // Automatic theme detection
    //* App routes */
    routes: [
        {
            path: '/',
            url: './index.html',
            on: {
                pageInit: function (event, page) {

                    var router = this;

                    /* remove sidebar */
                    router.app.panel.close('left');

                    $$('.test').on('click', function (e) {
                        functions.setOutPut('.real-estate-fav');
                    });
                },
            }
        },

The inside real_estate.js

createRealEstatesCard(data) {
        functions.setOutPut('Called createRealEstatesCard(); with data ... ');
        functions.setOutPut(data);

        let fav = this.getRealEstateFavoritesStatus(data['real_estate_id']);

        if(fav) {
            fav = '<i data-real-estate-id="'+ data['real_estate_id'] +'" class="real-estate-fav material-icons">favorite</i>';
        } else fav = '<i data-real-estate-id="'+ data['real_estate_id'] +'" class="real-estate-fav material-icons">favorite_border</i> <button class="test">Test</button>';

        return ('<div class="card card-expandable">' +
            '              <div class="card-content">' +
            '                <div class="bg-color-red" style="height: 300px">' +
            '                  <div class="card-header text-color-white display-block">'  +
            '                     <img src="'+ data['real_estate_featured_image'] +'">' +
            '                    '+fav+'' +
            '                    <p style="font-size: 0.8em; width: 90%;">' + data['real_estate_title'] + '</p>' +
            '                  </div>' +
            '                  <a target="_blank" rel="nofollow noreferrer" href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">' +
            '                    <i class="icon f7-icons">close_round_fill</i>' +
            '                  </a>' +
            '                </div>' +
            '                <div class="card-content-padding">' +
            '<p></p>' +
            '                  <p>Preis: <strong>' + data['real_estate_price'] + ' € </strong></br>' +
            '                   Terms: <strong>' + data['real_estate_terms'] +'</strong></br>' +
            '                   Zimmer: <strong>' + data['real_estate_rooms'] +'</strong></br>' +
            '<a class="link" target="_blank" rel="nofollow noreferrer" href="/real_estate/show/' + data['real_estate_id'] + '/">Detail view</a></p>' +
            '                </div>' +
            '              </div>' +
            '            </div>');
    }

The function functions.setOutPut();" works fine. It also has no output withconsole.log();" when I click the the test button Maybe you have suggestions. If you need more code, just ask please ;)

Ad

Answer

Solution:

It is important to use functions like this in the router onPage-functions. Card is in framework7 a special thing: You have to put the code inside the cardOpen instance event.

Ad
source: stackoverflow.com
Ad