I like to localize a website using json. Want to include the files inside the html. How can i access the json object later in javascript ?
<link rel="localization" hreflang="en" href="lang/en.json" type="application/l10n+json"/>
I don't like to use the path string directly inside javascript. Will the link element loaded automatically ? Should i use a different header tag to declare the path to the json file. How can i access header tags ?
You can use an AJAX request if you have jQuery:
$.getJSON("lang/en.json", function(data) {
alert(data);
});
Without jQuery gets complicated: Consuming JSON data without jQuery (sans getJSON)
Related
i have datatables in laravel 8 and i was encode a table to get some atribute, the code like this
Controller
i want to call r.file to get value for access the path of file,
the path file like this = "assets/file/Dr3cxy0QM2GDH1IpaWeiMZDUXfTVhl6QkazEyKYh.pdf"
Blade View
but the result like this
Browser
how to make the href value like this?
Test.pdf
You can use the jQuery .data() method to store the data in an HTML element and then access the data using the .data() method in the jQuery selector.
For example, if you have an HTML element with a class of storage-url and you want to store a variable called "url" in it, you could do the following:
<div class="storage-url" data-url="{{storage::url(url)}}"></div>
Then, in your jQuery code, you can access the data using the .data() method:
var url = $('.storage-url').data('url');
I have json file in series.pug page. When I click load more button want to make a request JSON file and add new element in the page. How can I make load more with using NodeJS or AJAX in pug page ?
extends layout
block content
.content(style='padding-bottom: 100px;')
#titles
.container
.row
.col-md-12
.form-group.text-center
label.col-md-2.text-right Quick Filter
input.search.col-md-6.text-center(type="text",placeholder='Search series quickly')
.row.list
-var count = 0
each value in data.entries
-if(value.programType =='series')
if(count!=18)
.col-md-3.col-sm-6.col-lg-2.series(data-item-id=++count)
figure.figure
a(href='/details/'+value.title)
img.figure-img.img-fluid.rounded(src=value.images['Poster Art'].url, alt=value.title)
.name.figure-caption.text-center.text-dark=value.title
.col-lg-12
a.btn.btn-primary.text-light.load Load More
script.
$('.load').click(function(){
var lastchild = $('.series').last().data('item-id');
$.ajax({
url: '/request',
method: 'POST',
data:{'lastchild':lastchild},
success: function(response){
}
});
});
You need to create a new route that you can make an API call to that returns only partial HTML. So something like this:
$.ajax('/loadmore?data=jsonFileName&template=pugTemplateName&startIndex=10&load=20');
Then in node, you'd have logic listening for this route, and when it comes in, you have node build out your html using your pug template.
So you're query params in this example would be:
data = .json file to pull data from
template = .pug file to use as template, should not `extend layout`
startingIndex = starting index for getting data from .json file
load = number items to render html for
Finally, you need to use a pug template that does not extend layout, so you only get a <div> back, and not an entire <html> document. In the pug template, pull in the json file, loop through the number of items you want (specified by startingIndex, and load), and then send the result of the pug file back to the browser.
The result of the AJAX call will be partial html, like a <div> or <ul>, but not an entire <html> document. You can then just append it to your webpage where it should be displayed.
Obviously, this is just a rough guide on how to do it, but if you set up the logic like this, you can use this call for any load-more functionality you might need on your site. If you post your source code to github, I might be able to give more specifics.
I am going out on a limb as I'm not certain this is even possible but I was looking to create two CSRF meta-tags (header and token) within a javascript file which is used through out the site. However, I don't believe it is possible because of how thyme leaf processes data from interpolated data variables.
I have tried creating the HTML meta tag element with the following code:
var meta = document.createElement("meta");
meta.setAttribute("name", "_csrf");
meta.setAttribute("th:content", "_csrf.token")
This creates the necessary element--token only shown--with the desired values. However, when printing out the values for the token it returns "_csrf.token" rather than the actual csrf value. I believe it's because thymeleaf is not processing interpolating the values correctly.
Must these meta-tags be added to each page's html files manually or can they be created dynamically using a common javascript file?
Thanks!
I recommend using layout:dialect to create a template that all your pages have access too. You can put the <meta /> tag there and share it between all your pages.
If you're set on using JavaScript, you can run JavaScript through the same spring process as your pages (if you have everything set up correctly for it). For example, something like this:
#GetMapping("/your-javascript-name.js")
public String deposit() {
return "javscript/your-javascript-name";
}
That way you can still include it externally:
<script src="your-javascript-name.js"></script>
And in the javascript, you can use Thymeleaf:
var token = /*[[${_csrf.token}]]*/ '';
var meta = document.createElement("meta");
meta.setAttribute("name", "_csrf");
meta.setAttribute("content", token);
I am sending my HTML file to the client in node.js as shown below
app.get('/get', function(req, res) {
res.render(index.html);
});
Here, index.html refers to a json file.
How can I send both together or refer the json file in the client?
If you don't want to request the JSON file from the client as an independent HTTP request you can do one of the following:
Full server side rendering:
Use a template technology like moustache or handlebars, and try to render that data inline with the response. For example if you your JSON file returns a name and an address the index.html could look like:
<div>
<span>Name: {{name}} </span>
<address>Address: {{address}} </span>
<div>
Then when rendering you could pass a js object with properties name and address to the template and you wouldn't need to ask for the JSON file separately. This example follows moustache guidelines just in case I wasn't explicit enough.
Inline object
A bit like the previous solution but less elegant, you can add the full JSON response as an object with within a script tag, and then use it however you see fit. Try to append a block to he HEAD of index.html like this:
<script>
var myObject = <contents of your JSON object>
</script>
The other possible solution was just described in another answer.
I hope this helps.
HTTP only sends one resource at a time. If your page is requesting a JSON file, it needs to be served as a second request.
Alternatively, you can render HTML with a <script> block that has a variable assignment with your JSON-encoded data as a value.
You can't send two types of files back in a single request, but you could either do an ajax call in the html to get the json you need:
<script type="text/javascript">
var json_data;
$.getJSON("URL_HERE", function(data) { json_data = data; });
</script>
or add the json to the html as a javascript object via a template engine (jade shown below):
script(type="text/javascript").
var json_data = #{ JSON.stringify(JSON_OBJECT_HERE) }
How can I get the content of url.json, and cast the json to a variable.
The content of url.json is pure json format.
Thanx
if you use jquery
<script type="text/javascript">
var json_variable;
$.getJSON('url.json', function(json){
json_variable = json;
});
</script>
Are you aware of the jquery getJSON api? You can use this to download json from an url. Not sure if you can embed some json directly in a script tag, though.
You need to read in the contents from the url using AJAX and then put that into your variable or use the data as soon as you successfully get the data.
See here for non jQuery vanilla javascript methods: reading server file with javascript
and also
Consuming JSON data without jQuery (sans getJSON)