JQuery & jade read render data from Nodejs - javascript

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 :
Using AJAX requests.
Use 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())

Related

Please clarify how to use Framework7 ajax (to trigger server side processing)

please can someone clarify what I need to do in a framework7/node-js app to trigger a server-side function from client-side? I want a server side script (coded by me) to compile a json file and send me back the name/url before I request that new json file from server side to client side.
This link shows "Request/ajax" in framework7 documentation [1]: https://framework7.io/docs/request.html
But there is nothing that I could find about specifying a response.
I can use the below function to get a static already existing json file/data from the server:
//below code placed inside 'pageInit' block
//in the code block 'var app = new Framework7({ })'
//in app.js file
app.request.get("/assets/datafile.json", function (data){
//turn json data into a javascript object
var mobj = JSON.parse(data);
}
I've tried to use node_modules, but the function 'require(module)' which is used to import modules is not available to use from client side files...
I selected 'include bundler' in the npm set up of the project directory, and now I'm working with 'vite'. So I can't find a server file to edit if needed.
I've become confused as how to fetch dynamic data in this situation. I've read online to use a XMLHttprequest on a server side API, I've read you have to wrap the server side code in a 'route', I've read you have to change the server file code, I've read you can use a php script, but I haven't been able to make this thing work with Framework7.
If anyone knows how to do this, please give us a hint. Thanks.

How to inject server variable to a client side js/html file

How can a Javascript variable set on a server(via properties file) be injected to an Angular js/JavaScript app?
There is a Java Jersey application that has client files (js, HTML, CSS, etc.) under the /src/main/webapp folder and there is a javascript variable that I would want to set before it gets served to the client. For example , please consider the following:
<script type="text/javascript">
var serverHost = "<%serverHost%>";
</script>
How can I replace the value of "<%serverHost%>" String with a value of my choice that will be evaluated at runtime? Preferably via properties.
The goal of this is that the client has Rest calls and the URL cannot be relative and has to be full because the application will be accessed via a different/middle man server, so ultimately the rest calls need to reach the originated host server. The value is need via a properties file so the application/same build can work on different environments.
Would appreciate any ideas.
Thank you
The problem you are trying to solve needs server side rendering.
In your case, for example,
You can retrieve the host URL from the properties file on the server side, pass it to the view using the controller, and in the view, using JSP tags, generate an HTML for which the serverHost variable is dynamically set
HOWEVER....
As you are using AngularJS, this type of rendering is clearly against Angular's philosophy.
You can create a constant in angular,
angular.module('myApp').constant('SERVER_URL', 'http://localhost:8000/');
You can set the value of this constant during the build.
OR
You can create a simple API where you'll retrieve the host url value from the properties file, preferably in JSON format, then you can simply call that API to set this constant value.

Retrieving data from browser to JavaScript

I have just started out working with JS and I've managed to post data from a MySQL db to the website using node.js, jade and plain JS.
Now I'm trying to do the other way around, i.e. getting data from the website, to the JS code and then inserting it into the db.
What I'm thinking is simply making a textfield with a button. When I fill the textfield and press the button it is collected by the JS script and the inserted to the DB.
I am however having problems with Jade and the listener and I'm unable to even do a console.log using the listener.
This is what I've got so far in my .jade file.
extends layout
script.
var something = function() {
console.log('something')
}
block content
button(onclick='something()') Click
The website renders nicely, but nothing is printed when I click the button.
If someone could give a hint on how to fetch the data in my .js file that would also be appreciated.
In the context of the WWW there are two places that JavaScript can run.
On the server, e.g. with node.js
On the browser, embedded in a <script> element
Since you want to put the data into a database on the server, you want to go with option 1. So don't use a <script> element.
Use a <form> (you could use client side JS to read the data from the form and send it to the server (Ajax) but that seems overcomplicated for your needs and should be layered on top of a plain HTML solution if you were to go down that route).
form(action="/myendpoint" method="post")
label
| Data
textarea(name="foo")
button Submit
Then you just need to write server side code to retrieve that. The specifics of that will depend on how you are implementing the HTTP server in Node.
The question How do you extract POST data in Node.js? provides some starting points.

Parse server side enum with javascript [duplicate]

I try to pass my JS variable into razor, my script fragment:
select: function (event, ui) {
var docID = ui.item.DoctorCode;
#{
string org_code = _unitOfWork.Doctors.GetById("").OrganizationCode;
}
doctorOrgLabel.text('#org_code');
}
In GetById() method i want to pass JS variable docID. I'd appreciate any help!
I try to pass my JS variable into razor
This sentence makes strictly no sense at all.
Razor is a view engine used by the ASP.NET MVC framework running on the server to produce some HTML template.
javascript on the other hand is a client side language running on the client. Once the HTML template is rendered to the client and javascript starts to execute there's no longer such notion as Razor.
If you want to pass some javascript variable to the server you have a couple of options:
make an AJAX call to the server
set the value of this variable in some hidden field inside a form and submit this form
use window.location.href to redirect to the server and passing the variable as query string parameter
store the javascript variable in a cookie which will be sent to the server on subsequent requests

Javascript or jQuery method to parse ASP.NET MVC Route URL

I'm building an ASP.NET MVC 4 website that needs to be available offline (HTML 5 manifests/caching), so I will be unable to take advantage of server side HTML generation.
Right now, I just have generic/cacheable HTML on the View (.cshtml) and I'm making jQuery AJAX calls on document ready to load the data from the server and using mustache.js to generate the HTML.
Being constrained to doing HTML generation only in the client side, I'm unable to use Url.RouteUrl to generate links and also constrained to having to parse the current URL manually when navigating to a details page, and using the Id (or whatever the parameter is) to make the AJAX call to retrieve the information for the specific record that I need.
Since I'm still using MVC URL Routing (and would like to keep using it) to return the corresponding View (as in, http://localhost:27954/Route/Test2/7?mytext=hellow), I'll need a javascript or jQuery function to both be able to parse URL's and retrieve the value for a given querystring parameter, and ideally another method to generate URLs.
Since I'm obviously not the first person in this situation, I was wondering if anyone had any proven methods already that they could share, or any recommendations.
Thanks!

Categories