I'm trying to write a docpad plugin that will allow me to insert meta tags unique to each page, for example og:title or og:description. I've been able to accomplish this globally with the populateCollections event for global values, but have not been able to do this per page.
I'd like for this to work without the need for a template function so that the meta tag is inserted automatically based on the document's meta. One way might be to grab the contentRendered value in the writeBefore event and do string manipulation that way, but that seems hacky.
Any ideas?
This worked for what I needed. Basically, I'm getting the rendered content right before the file is written using the writeBefore event, and doing a very simple string replace which adds the meta tags and their unique values, which is pulled from the model in the collection.
writeBefore: (opts) ->
docPad = #docPad
templateData = docpad.getTemplateData()
siteUrl = templateData.site.url
for model in opts.collection.models
if model.get('outExtension') == 'html'
url = #getTag('og:url', siteUrl+model.get('url'))
title = #getTag('og:title', model.get('title'))
content = model.get('contentRendered')
if content
content = content.replace(/<\/title>/, '</title>'+url+title+description)
model.set('contentRendered', content)
# Helper
getTag: (ogName, data) ->
return "\n <meta property=\"#{ogName}\" content=\"#{data}\" />"
Great answer David, leaving this one if someone faced the same issue I did.
Check if meta tag is broken, if it is - don't render:
renderBefore: (opts) ->
for model in opts.collection.models
if model.get('date').toLocaleDateString()=='Invalid Date'
model.set('write', false)
docpad.log model.get('title')+' has broken date format!\n\n\n\n\n'
false
I am using partials in with collections. Adding what is needed in the document like this:
```
title: Meetings and Events
layout: page
description: "This is my custom description."
tags: ['resources']
pageOrder: 3
pageclass: rc-events
```
I needed a custom CSS class by page. Then you can call it in your default template like this.
<div id="main" class="container <%= #document.pageclass %>">
Should be the same for meta
<meta name="description" content="<%= #document.description) %>" />
or check your docpad.coffee file and put together helper function for prepared content based off of a default site value combined with a #document value. Then you can just call something like the default:
<meta name="description" content="<%= #getPreparedDescription() %>" />
Which is built by this helper function:
# Get the prepared site/document description
getPreparedDescription: ->
# if we have a document description, then we should use that, otherwise use the site's description
#document.description or #site.description
Related
In input HTML I have the element:
<img id="p_W_1" name="{1234}" class="po" src="../tinymce/plugins/myplugin/img/icon.png" data-mce-src="../tinymce/plugins/myplugin/img/icon.png" style="" data-mce-selected="1">
in editor init function
extended_valid_elements:'img[id|src|class|data-mce-src|data-mce-selected|role|name]',
in otuput HTML no tags id, name
<img src="../tinymce/plugins/myplugin/img/icon.png" class="po" />
When I changed into
extended_valid_elements:'img[id|src|class|data-mce-src|data-mce-selected|role]',
on result still no name
<img id="p_W_1" src="../tinymce/plugins/myplugin/img/icon.png" class="po" />
extended_valid_elements only allows valid HTML5 attributes, and name is not allowed on <img> tags, so name is removed.
Attributes like data-mce-src are internal to tinymce and shouldn't be used, so they are also stripped out.
Please see this example and choose View > Source Code on the editor:
https://fiddle.tiny.cloud/YShaab/5
However, if you add name to extended_valid_elements, you can see that id gets removed too:
https://fiddle.tiny.cloud/YShaab/7
This seems like a bug and I'll report it to the Tiny devs.
I am using Thymeleaf and Spring MVC for a project and I am displaying a list in Thymeleaf and I want to get the selected items and pass them when I press submit
This is my form with the list:
<form th:action="#{/trip-info}" th:object="${trip}" method="post">
....
<a class="list-group-item list-group-item-action" th:each="currentPerson : ${trip.employees}" th:text="${currentPerson.getFirstName() + ' ' + currentPerson.getLastName()}" onclick="addPerson(this)"></a>
</form>
I have the employees list displayed in my page, now I am not sure if I can pass to a controller the selected values or if I must use javascript and construct a body. Does anybody have any ideas ?
Thanks!
Transferring the selected form item is outside the role of 'Thymeleaf'.
'Thymeleaf' is a server side template engine that simply creates code in html.
The event (item select) changed by the client must be processed by JavaScript.
For a simple example,
Before submitting from the form, check the selected item in javascript and create a function that performs the submit.
If you need an example, show me your source code in more detail.
Additional comments -
There are two ways.
1. How does 'a tag' directly tell you about your event?
2. How to externally liseten events of 'a tag'
I wanted the '2' method, and you chose the '1' method.
Your source will be terminated with the href moved before executing the 'onclick' event.
Take a look at this example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
some method<br/>
some method2<br/>
some method3<br/>
<script>
function someEvent(event){
console.log(event);
}
</script>
</body>
</html>
'href' works but is invalidated by void (0). Or moved to another window tab by target. And then onclick happens sequentially.
I can not speak English and the explanation is immature. I'm sorry.
I'm trying to use ajax with thymeleaf. I designed a simple html page with two input field. I would like to use addEventHandler for the value of first input text, then I want to send it to controller and make calculation, after that I need to write it in same html form in the second field which returns from controller.
For example:
first input text value -> controller (make calculation) -> (write value) in second input text.
My html page is
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input type="text" name="Thing" value=""/>
<script th:inline="javascript">
window.onload = function () {
/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);
/* function */
function doThing() {
var url = '#{/testurl}';
$("#fill").load(url);
alert('Horray! Someone wrote "' + this.value + '"!');
}
}
</script>
<!-- Results block -->
<div id="fill">
<p th:text="${responseMsg}"/></div>
</div>
</body>
</html>
My controller
#RequestMapping(value = "/testurl", method = RequestMethod.GET)
public String test(Model model) {
model.addAttribute("responseMsg","calcualted value")
return "test";
}
However I cannot call controller from ajax. Could you help me?
There are a few issues with your code. First of all, it looks like you're using the same template for both the initial loading of the application, and returning the calculated result.
You should split these two into different calls if you're using AJAX, since one of the goals of AJAX is that you don't need to reload an entire page for one change.
If you need to return a simple value, you should use a separate request method like this:
#GetMapping("/calculation")
#ResponseBody
public int multiply(#RequestParam int input) {
return input * 2; // The calculation
}
What's important to notice here is that I'm using #ResponseBody and that I'm sending the input to this method as a #RequestParam.
Since you will be returning the calculated value directly, you don't need the Model, nor the responseMsg. So you can remove that from your original request mapping.
You can also remove it from your <div id="fill">, since the goal of your code is to use AJAX to fill this element and not to use Thymeleaf. So you can just have an empty element:
<div id="fill">
</div>
Now, there are also a few issues with your Thymeleaf page. As far as I know, '#{/testurl}' is not the valid syntax for providing URLs. The proper syntax would be to use square brackets:
var url = [[#{/calculation}]];
You also have to make sure you change the url to point to the new request mapping. Additionally, this doesn't look as beautiful since it isn't valid JavaScript, the alternative way to write this is:
var url = /*[[ #{/calculation} ]]*/ null;
Now, your script has also a few issues. Since you're using $().load() you must make sure that you have jQuery loaded somewhere (this looks like jQuery syntax so I'm assuming you want to use jQuery).
You also have to send your input parameter somehow. To do that, you can use the event object that will be passed to the doThing() function, for example:
function doThing(evt) {
var url = [[#{/calculation}]];
$("#fill").load(url + '?input=' + evt.target.value);
alert('Horray! Someone wrote "' + this.value + '"!');
}
As you can see, I'm also adding the ?input=, which will allow you to send the passed value to the AJAX call.
Finally, using $().load() isn't the best way to work with AJAX calls unless you try to load partial HTML templates asynchronously. If you just want to load a value, you could use the following code in stead:
$.get({
url: /*[[ #{/calculation} ]]*/ null,
data: { input: evt.target.value }
}).then(function(result) {
$('#fill').text(result);
});
Be aware that $.get() can be cached by browsers (the same applies to $().load() though). So if the same input parameter can lead to different results, you want to use different HTTP methods (POST for example).
I have my website layout structured this way:
header
--content
footer
Where header and footer are #included.
On some pages I have this classes to body
<body class="property-map-append-top has-breadcrumb"> and to other pages: <body class="property-map-append-top">
How can I do this for specified pages?
It depends on what do you mean by 'some pages'. You could pass a variable from a controller, like hasBreadrumb and use it in Blade template:
<body class="property-map-append-top #if($hasBreadcrumb)has-breadcrumb#endif">
Sometimes I do this in my views:
<body class="{{ $bodyClass or 'default-body-class' }}">
You can add classes to the $bodyClass variable in your controllers, but only when you want to override the default class (the string which comes after the 'or'). With this syntax you can opt to not send the variable to the view and still avoid an error.
How can I put meta tag to work only for one page. If I want to put it .aspx file, where is right place.
Thanks.
Since you haven't said yet, I'm assuming you're using the Razor engine (the "default" for new MVC3 projects). In that case, you just need to insert a new section into your layout view, and only render that section if you need to insert a meta tag.
For example, working from the stock New ASP.NET MVC 3 Project template, you would edit your Views\Shared\_Layout.cshtml file, and before the closing </head> tag, do something like this:
#this.RenderSection("MetaContent", false)
</head>
Then, in any of your views that you needed to, add this:
#section MetaContent
{
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
}
If you're still using the ASPX layout engine for some reason, you can accomplish the same thing using the <asp:ContentPlaceHolder> tags in your master page and <asp:Content> tags in your views.
EDIT:
Since you're using the ASP.NET Forms layout engine still, here's the same basic idea as above in aspx syntax:
In your master page, you add the tag:
<asp:ContentPlaceHolder ID="MetaContent" runat="server" />
</head>
And in your .aspx views, you add a new content section (you should already have at least two -- a title and a body):
<asp:Content ID="Meta" ContentPlaceHolderID="MetaContent" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</asp:Content>
I was going to suggest exactly what Michael said (+1). Another option would be to put a boolean in the ViewBag, something like:
ViewBag.ForceIE8Mode = true;
For pages that you want to force into IE8 Mode.
and then in your view, wrap the meta tag in a conditional. either
#if(ViewBag.ForceIE8Mode == true) {
<meta... />
}
or
<% if(ViewBag.ForceIE8Mode == true) { %>
<meta... />
<% } %>