I am using Jade framework as frontend with Nodejs & express for backend
so when I am rendering a view with data i can't access these data using JQuery
below my service from Nodejs that renders a view with simple data = x
router.get('/test',function (req,res,next) {
res.render('test',{data : 'x'});
});
so the test page will show without any problem, what am trying to do is to read the rendered data using Jquery methods
footer
.pull-right
| Gentelella - Bootstrap Admin Template by
a(href='https://colorlib.com') Colorlib
.clearfix
// /footer content
// jQuery
script(src='/vendors/jquery/dist/jquery.min.js')
alert(data) // no alert or action happen
but the error said (unknown variable of data)
Moreover, I can read it from jade itself
any suggestions?
thank you
Try using the following
|<script>
!='alert("'+data+'")'
|</script>
The JavaScript you are writing inside your jade framework will not be able to see your server side node.js variables because this client side JavaScript is loaded and executed inside the browser, so you have to pass your variables somehow from the server side to client side then obtain these variables using client side JavaScript.
If you are passing some strings , it is easier for you to use the previous way.
|<script> -> open the JavaScript tag.
!='alert("'+data+'")' -> normal jade string that will be inside our JavaScript tag , that means it should give us JavaScript code after being processed by jade which will make our final text alert("x") because data will be replaced by its value.
|</script> -> close The JavaScript tag
but if you want to pass object there are a ways to do so :
JSON.stringify(data) in server side to write your object to a hidden div and in client side using var data = JSON.parse(jQuery('div').text())