Is it possible to prefill Input/hidden fields on the standard magnolia form (page with Form component created in Magnolia Author UI) from url parameters or it could/should be done only in FreeMarker template?
We did this in magnolia 5.7 by overriding the hiddenField like this:
<!-- set the value to the queryparam (ctx[..]) or the form field value if not empty -->
[#assign value = content.value!ctx[content.controlName]!model.value!""]
<div ${model.style!} >
<input type="hidden" name="${content.controlName}" id="${content.controlName}" value="${value}"/>
</div><!-- end ${model.style!} -->
<!-- remove the queryParam and value from URL without redirect/reload so that it isn't sent twice with the form -->
<script>
var newUrl = RemoveParameterFromUrl(window.location.href, "${content.controlName}")
window.history.pushState("", "", newUrl);
// credits to Jared for this regex https://stackoverflow.com/a/25214672/15591150
function RemoveParameterFromUrl(url, parameter) {
return url
.replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
.replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}
</script>
There isn't an out-of-the-box feature. As you told you could customize the components in order to retrieve the value inside Freemarker template (e.g. ${ctx.keyParamName} ).
Related
I'm using the URL Params plugin to pull parameters into regular content using a short code. But I have to use a Raw HTML block to insert Typeform code into the page and I want to be able to pass a URL parameter into the Typeform code to track the source of the form submission.
I can't figure out how to do it. The form is working fine at: https://HelloExit.com/instant-valuation
But I want to be able to send people to https://HelloExit.com/instant-valuation/?source=XXXX and pull the XXXX into the Typeform code as the "source" value in the "data-url"
Here's what I tried:
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var source = getUrlVars()["source"];
</script>
<div
class="typeform-widget"
data-url="https://xgenius.typeform.com/to/zZHPPk?source=<script>document.write(source)</script>"
data-transparency="100"
data-hide-headers=true
data-hide-footer=true
style="width: 100%; height: 500px;">
</div>
<!-- Typeform embed code -->
<script>(function() { var qs,js,q,s,d=document, gi=d.getElementById,
ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm",
b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id;
js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })()
</script><div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5;padding-top: 5px;"> powered by Typeform</div>
Any assistance would be greatly appreciated!
You're close, but you'll need to use Javascript to alter the data-url attribute of your div.
// ...
var source = getUrlVars()["source"];
// concatenate the url with your source variable
var newUrl = `https://xgenius.typeform.com/to/zZHPPk?source=${source}`;
// get the element whose attributes you want to dynamically set
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var widgetElement = document.querySelector('.typeform-widget');
// set the source attribute
// https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
widgetElement.setAttribute('data-url', newUrl);
Test this carefully, as it might still end up with a race condition (that is, the Typeform embed code might start running before you've updated the data-url attribute that it references).
i have create one html help page like CMS and stored in database.
<content>
Contact us
</content>
In html file write this code
{{{helpPage}}}
Is it possible call dynamicUrl in html right now in <a> tag show
Contact us
I think the issue is that you want to be able to parse Spacebars template tags from a template string? If so,
Add carlevans719:dynamic-templates, then change
{{{helpPage}}}
to:
{{Template.dynamic template=dynamicTemplate}}
And in your template helpers, add:
dynamicTemplate: function () {
var content = getContentFromDB();
var template = new DynamicTemplate(content);
return template.name;
}
See: https://atmospherejs.com/carlevans719/dynamic-templates
I'm trying to implement some kind of 'macro' mechanism in a nodejs application using Handlebars (similar to the #bodyContent system in velocity.)
In my main template, I want to be able to write something like this :
{{#foobar who = user }}
<p>My body content</p>
{{/foobar}}
In a "views/helpers/foobar.html", I would have a file with a template, and some way to reference the "body content"
<p>Hello {{ who }}<p>
{{ bodyContent }}
<p>Bye !</p>
Based on the convention that the templates in "views/helpers" corresponds to a helper called with a single hash parameter, I want to automatically register them ; so I have something like this :
var helpers = "./views/helpers/";
fs.readdirSync(helpers).forEach(function (file) {
var source = fs.readFileSync(helpers + file, "utf8"),
helperName = /(.+)\.html/.exec(file).pop();
var helperTemplate = Handlebars.compile(source);
// We assume all helpers in the folder
// would take a hash as their first param
// We'll provide them with all the required context
Handlebars.registerHelper(helperName, function (options) {
var hash = options.hash || {};
// I want to somehow 'pass' the body Content ;
// The closest I have is 'this', but the markup is
// encoded, so I get a string with '<p>My body content</p>'
hash.bodyContent = options.fn(this);
console.log("Body Content", hash.bodyContent);
// Render the source as an handlebar template
// in the context of a hash
return helperTemplate(hash);
});
});
This does not work, as the tags are escaped, and so bodyContent is a String containing the markup, instead of the markup.
Is there a way I can fix my helper registration, or a built in mechanism in Handlebars to deal with this ?
Thanks
You need to use the {{{triple stashes}}} to unescape the HTML injection. So your template should look like:
<p>Hello {{ who }}<p>
{{{ bodyContent }}}
<p>Bye !</p>
You can read more here
I'm using dust.js to do a client side templating. I would like to use a javascript function in my template, the function would get it's argument during templating i.e
Ex:
mytemplate = " <span> Hi getName({id}) </span>"
myjson = { id : 1 }
In this case, both the template and json-data are sent from server and templating happens on client side.
In the above example, I would get the 'id' from json data and want to display the name of user corresponding to that id.
I'm new to templating. I would like to know how this can be done using dust.js.
Thank you :)
This can be done with Dust.js by creating a script block within your template:
{! Dust template !}
<script type="text/javascript">
var userName = getName('{id|s|J');
// Do whatever you want with the username
</script>
Note, the |s|j, which is important for security filtering.
In your particular use case, however, it would probably be better to just send the user's name and id in the JSON:
{! Dust template !}
<span id="user-{id}"> Hi {name} </span>
// JSON
{
id: 1,
name: smfoote
}
I'm trying to submit form data with jQuery. I'm using ASP.NET WebMatrix. In a .cshtml file I have
#{
// other code
if(IsPost)
{
var item = new Item();
item.Title = Request.Form["title"];
item.Description = Request.Form["description"];
// aditional code here
}
}
<script type="text/javascript">
$(document).ready(function(){
$("form#itemForm").submit(function(){
$.post("form.cshtml", {
title: $("#title").val(),
description: $("#description").val(),
price: $("#price").val()},
function(data){
},
"json");
})
});
</script>
<form>
<!-- html form here -->
</form>
How can I pass values from form to Request.Form object? And how can I than response with json back to html?
A better way would be to just have jQuery post the form data using $(this).serialize() instead of building an object with all the values in it it to pass. After that, yah, Request["title"], etc will get the values that were posted.
This is what you want.
http://www.mikesdotnetting.com/Article/155/WebMatrix-And-jQuery-Forms
Values are passed through jQuery.post() to Request.Parameters.