Help with buttons

Questions
1

I’ve used 4 years ago the v1 of fw7
now I’m trying to update to the new version, but I can’t understand how to use the buttons.
in v1 I did something like this:

in html:
href="#" class=“item-link list-button” id=“mybutton_b1” onclick=“DoSomething()”>Do Something

in js:
function DoSomething(){
alert(“some alert”);
}

I think it does not work anymore this way, or I can’t make it work anymore.
please help me! thanks

ops how to write the html code? it does not show up. is there a tag to use?
(I’ve removed the “a” tags, now it kinda works)

2

Now there is frameworks and component based methods …
Things are changed a lot bro, read the docs again :wink: …

3

I did. I was not able to find an example of how to use a button.
maybe can you point me to the correct doc?
thank you.

4

Your syntax looks correct. What does the JS console say when your button fails to fire?

5

staring over: new simple www core fw7 with cli.
I’ve added a single button:

       <button class="button" onclick="openAlert">Button</button>

copied from dialog page of kitchensink
If I copy from ks “@click” instead of “onclick” the page don’t load
if I copy from ks the script part and paste in my home.f7.html the page don’t load
how and where do I write the “openAlert” function?
it should be something like (again from ks)

methods: {
  openAlert: function () {
    var app = this.$app;
    app.dialog.alert('Hello!');
  },
}

but where do I have to put this code?
I’ve tried in app.js but it gives me errors

6

event attach not working in app.js file,
try it in components, (.f7.html files)

7

I’ve tried to put in home.f7.html, but then npm gives me errors:

SyntaxError: unknown: In strict mode code, functions can only be declared at top level or inside a block

maybe I better stay with fw7 v.1, if just using a simple button is so hard with v.5 :slight_smile:
but I suspect it’s simple instead, but I can’t find a working example…

8

This work for me in v5

<button class="button col button-outline color-gray display-flex button-small" id="cameraTakePicture" onClick="cameraTakePicture();">Camera <span class="material-icons font-size-21">photo_camera</span></button>

And in JS file

function cameraTakePicture() {
 ...
}
9

I’ve tried to put the function in app.je and in home.f7.html inside tags, but the console always says:
Uncaught ReferenceError: openAlert is not defined
at HTMLButtonElement.onclick (

where exactly do I have to put the function?
thanks

10

check this out:

<!-- component template -->
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">{{title}}</div>
      </div>
    </div>
    <div class="page-content">
      <a @click="openAlert">Open Alert</a>
    </div>
  </div>
</template>
<!-- rest of component data and methods -->
<script>
  // script must return component object
  export default {
    data: function () {
      return {
        title: 'your title',
      }
    },
    methods: {
      openAlert: function () {
        //now its working
        var self = this.$app.dialog.alert('Hello world!');
      },
    }
  }
</script>
1 Like
11

I’ve pasted the part to the bottom of my home.f7.html, npm give me this error:

ERROR in ./src/pages/home.f7.html
Module build failed (from ./node_modules/framework7-component-loader/lib/index.js):
SyntaxError: unknown: ‘return’ outside of function (2:4)

1 | // script must return component object

2 | return {
| ^
3 | data: function () {
4 | return {
5 | title: ‘your title’,

12

sorry i fixed it, try that instead

13

thank you, it’s working now.
I had to change form “onclick” to “@click”, and I’d also like to understand why (or where in the docs is this explained)

(I’m not sure also about why I need a variable here, it seems too complicated for a simple alertbox)

I’d like also to understand if I can put the code in a js file rather than append to the html, I’d prefer to keep them separate like in fw7 v1

but anyway, thank you very much agian, now I have a starting point for the new v5 :slight_smile:

14

It is all explained here https://framework7.io/docs/router-component.html

15

I’ve already read that link, I’ll read it again, but - probably and imho - it is not that clear.
not as the components explanations.
after 2 days without any success I decided to put the question here on the forum, because I didn’t find any example about this.

i.e., I still don’t see where is the explanation of the change from “onclick” to “@click”

16

https://framework7.io/docs/router-component.html#dom-events-handling

17

Thanks, but I still think that docs and tutorials are weak in the js part.
One of the reply in this thread said that he uses onclick and not @click, so I’m still confused.
I know c++, mfc, c#. It’s the first time I wasn’t able to understand how to use a button.
My 2 cents. Maybe you all find docs and tutorials absolutely clear :slight_smile: