How to pass value to a onclick function in (Jade)pug?

pug button onclick redirect
pug functions
pug onclick button
pug conditional class
pug inline style
pug include variable
pug jade include
pug pass variable to javascript

I am new to jade and stuck on this issue. I think I have tried everything from the StackOverflow posts and still at nothing.

The things I have tried

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog( #{val.link} )')

Error

1:8 Uncaught SyntaxError: Invalid or unexpected token

Changing it to !{val.link}

Error

Uncaught SyntaxError: Unexpected token .

Changing it to "!{val.link}" and "#{val.link}" just gives me string understandably so. BTW val.link is a string

Just giving val.link says Uncaught ReferenceError: val is not defined

I am out of options now. Help will be appreciated.

Thanks

When adding attributes to an html element, you are already within the scope of pug, so you can just use pug variables like regular js variables.

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog(' + val.link + ')')

Pug / Jade : onClick call function and pass param, So what is the best practice to add onclick listener on Pug template ? From my own experiences, I recommend adding script tag with the event  Pass Object from Jade to function Event handlers like onclick can only be added through HTML or client-side JavaScript. This is not something Jade can help you with.

I just used the code below and it worked for me (with pre and pos quotes)

button(type='button', onclick='someFunction("'+ yourObject.id +'")' ) PressMe

call onclick js function and pass param from pug · Issue #2933 , all not works, How could i do this ? Also, demo codes here : https://stackoverflow.​com/questions/47952498/pug-jade-onclick-call-function-and-  I am trying to pass a js function to a button using Pug. I saw this question here, but it does not seem to cover how to format the js function.. I could not find documentation explaining how to do this, but perhaps it is on pug.org and I just do not understand it.

Use differing nested quotation marks so that you pass a string to your gotoBlog function. Here, I use single ticks within double ticks.

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick="gotoBlog( '#{val.link}' )")

In other words:

button( onclick= "myFunction('#{stringVariable}')" )

Attributes – Pug, Tag attributes look similar to HTML (with optional commas), but their values are just In this case, `(click)` is treated as a //- function call instead of a attribute name, //- resulting in the Previous versions of Pug/Jade supported an interpolation syntax such as: If passing in attributes from a mixin call, this is done automatically. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

You just need to put onclick="myfunction(#{varible.atributo})"

Here a example:

table
thead
    tr
        th #ID
        th Description
        th Actions
tbody
    each item, i in itemlist
        tr
            th(scope='row') #{item.id}
            td #{item.description}
            td
                button(onclick="editItem(#{item.id})", title="Edit")
                    |  Edit

Executing Javascript on button click in Jade (Express.js app), Even when the function in the JS file is something simple, like: function functionInJS(){ alert('test'); }. Nothing happens. I've even tried directly writing JS into the onClick property in Jade, as so: I just thought I would pass this on. I like to  Jade button onclick. Ask Question Asked 6 years, 5 months ago. Active 6 years ago. Viewed 18k times 0. I didn't find any normal manual to jade and need to know if I

I came across a similar issues and solved it rather differently (by escaping params). In my case, I needed to pass the following template values to a javascript function as argument when a button is clicked

{
  url:"http://google.com",
  token: "Bearer your-token", 
  accountId: "abc123"
}

So the pug in my case looked as follow

button(onclick='authenticate(\'' + url + '\',\'' + token + '\',\'' + accountId + '\')') Login

And the resulting html is as follow

<button onclick="authenticate('http://google.com','Bearer your-token','abc123')">Login</button>

node.js - Pass variable from ajax to jade/pug, if you can afford to refresh the pug page for the result: make a request with ajax to some route in node.js. in the route handler - where you  I cant find any documentation for how can i run javascript function in jade template. My use case is write simple static site generator i have data fixture object return me fake text or html i wanna jade get it and use it in my template:

Web Interface to a Node.js REST service using Jade , We pass as the second parameter routes.index, this tells it to use the file Update button(onClick=('onDelete(' + i + ')')) Delete - i++ tr(class=(i  The issue is that html (which is what jade generates) expects onClick to be a string rather than a function. You could try using react-jade which would support what you're attempting right out of the box.

Pug.js to make your life easier with HTML templates, Pug.js is a HTML templating engine, which means you can write much simpler Pug We can make an email template using Pug with variables that can be changed based on data hard-coded when some event fires so that you could send that email to the user. JavaScript · Pug · Jade · Nodejs · HTML  If you need to interpolate the value of a JavaScript object (e.g. all the information about a user), you must stringify the output in Pug for it to be treated as a JavaScript object. It's also necessary to output the raw contents of the variable, instead of the evaluated form of it.

To Engineers Who Tried to Use Jade Template Engine and Can't , I attempted to modify some HTML in the Jade templates. Mixins are functions that take parameters and produce some HTML. hard-coded values for title , author , tags , but pass through a command-line argument for body : Pug is the new name for an old thing. It’s Jade 2.0. Due to a trademark issue, the name was changed from Jade to Pug when the project released version 2 in 2016. You can still use Jade (aka Pug 1.0), but going forward it’s best to use Pug 2.0. Also see the differences between Jade and Pug. Express uses Jade as the default.

Comments
  • Where are you setting/defining val?