I'm facing an issue. I want to generate an url with several parameters.
Method used
{{ url('example', {'product_filter_form': {'parameter_one': ['montres'], 'parameter_two': ['value2']}}) }}
Expected Url:
https://example.com?product_filter_form%5Bparameter_one%5D%5B0%5D=value1&product_filter_form%5Bparameter_two%5D%5B0%5D=value2
Unescaped expected url:
https://example.com?product_filter_form[parameter_one][]=value1&product_filter_form[parameter_two][]=value2
Actual Url:
https://example.com?product_filter_form%5Bparameter_one%5D%5B0%5D=value1&product_filter_form%5Bparameter_two%5D%5B0%5D=value2
The & breaks the url behaviour and i can't extract all values. But when I replace & by & it works very well.
The & character is being automatically HTML-escaped to & by twig.
Use the raw filter to prevent this default behavior (i.e. for rendering a URI inside an HTML attribute).
<a href="{{ '<uri>' | raw }}">
Link
</a>
Related
I'm trying to get Angular Dart to display a link in a tag from an HTML string.
At first, I tried to just set the inner HTML of the container to be the HTML string, but that didn't work, so I then I tried to use Dart's DomSanitizationService class, but that also doesn't seem to work.
What I have so far is
Dart:
class SomeComponent {
final DomSanitizationService sanitizer;
SafeUrl some_url;
SomeComponent(this.sanitizer) {
some_url = this.sanitizer.bypassSecurityTrustUrl('https://www.google.com');
}
String html_string = '''
<a [href]="some_url">Hi</a>
''';
String get Text => html_string;
}
HTML:
<div [innerHTML]="Text"></div>
The error I'm getting is Removing disallowed attribute <A [href]="some_url">. The text Hi seems to show, but there is no link anymore.
Just as you bypassed URL sanitanization, you have to bypass HTML sanitanization as well using bypassSecurityTrustHtml to return markup.
https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustHtml
Is it possible to do basic escaping (of ampersand, in my case) when generating a custom attribute? I have tried many ways (with normal escaping, th:text, th:utext, th:attr for all the dynamic attributes, substituting a custom tag in my Spring code), unfortunately found just some workaround, which is listed below.
Basically, it's about an AngularJS application with a piece of Thymealeaf 3 template:
<script th:inline="javascript">
function customSubmit() {
/*<![CDATA[*/
return /*[(${DIALOG_NAME} + '.$valid && submit()')]*/ null;
/*]]>*/
}
</script>
<form th:name="${DIALOG_NAME}"
th:action= "'/' + ${MODULE} + '.' + ${DIALOG_NAME}"
th:ng-app="${DIALOG_NAME} + 'App'"
th:ng-controller="${DIALOG_NAME} + 'Controller'"
ng-submit="customSubmit()"
...
>
...
</form>
What I am trying to make is one construct like
th:ng-submit="some Thymeleaf expression"
that generates the custom attribute value with the && within:
ng-submit="someDialog.$valid && submit()"
without any function redirection like in the workaround above.
Beside extending Thymeleaf (I am using SpringStandard dialect), is any straightforward way to generate such strings?
Thank you for any suggestion.
Ampersands (&) should be HTML-escaped in tag attributes so you can do it like this:
th:attr="ng-submit='some thymeleaf with && in it'"
EDIT:
If you also want to reference a value of some model attribute in the final form attribute value you have to use the expression preprocessing like this:
<form th:attr="ng-submit='__${DIALOG_NAME}__' + ' some ampersand && in it'">
</form>
I'm trying to call a variable inside quotes inside a data-sly-template call. I would expect the output to include my string with the appropriate varible inside quotes. Below is the template and the string I'm using to call it:
Template:
<!-- template -->
<template data-sly-template.bnrButton="${ # style='String: button color class (default btn-primary)', classes='String: additional component button classes', text='String: button text (translation key)', defaultText='String: default button text (translation key)', link='String: link target for button (# is default)', fullWidth='Boolean: whether to display button in full width of container', noFollow='Boolean: if button should have a nofollow tag (no is def)', gaCategory='String: GA Category', gaEvent='String: GA Event', gaLabel='String: GA Label', gaAction='String: GA Action'}">
<a class="btn ${style || 'btn-primary'} hidden-print ${classes}${fullWidth ? ' btn-full-width' : ''}" role="button" href="${link || '#'}" rel="${noFollow ? 'nofollow' : ''}" onclick="${gaEvent # context = 'scriptString'}">${text || defaultText # i18n}</a>
</template>
<!-- call made to the template -->
<sly data-sly-call="${patterns.bnrButton # style='btn-secondary-light', classes='btn-sm', text=teaser.libraryButtonHeading, defaultText='View Library', link=teaser.myLibraryLink.href, fullWidth='true', newWindow='false', gaEvent='trackEvent('Test 1','Test 2','${teaser.teaserMessage}')'}"></sly>
If tried a number of combinations to get teaser.teaserMessage to print the authored message, but have been having issues because the patterns call is already inside quotes. I want to be able to pass a single string (called in the template call) to the template that includes all the information it needs for the onclick.
Thoughts?
Thank you.
You can use data-sly-test.variable_name before the template call to store the value into a variable:
<sly data-sly-test.gaEvent="${'trackEvent('Test 1','Test 2','{0}')' # format=teaser.teaserMessage}"
data-sly-call="${patterns.bnrButton # ..., gaEvent=gaEvent }"></sly>
line breaks or pharagraph not working in textarea output? for example i am using enter for pharagraph in textarea but not working in output? How can i do that?
$("#submit-code").click(function() {
$("div.output").html($(".support-answer-textarea").val());
}).next().click(function () {
$(".support-answer-textarea").val($("div.output").html());
});
.support-answer-textarea{width:100%;min-height:300px;margin:0 0 50px 0;padding:20px 50px;border-top:1px solid #deddd9;border-bottom:1px solid #deddd9;border-left:none;border-right:none;box-sizing:border-box;letter-spacing:-1px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea" placeholder="Destek Konusunu Cevapla!"></textarea>
<button type="submit" id="submit-code" class="btn btn-success">Submit Your Code</button>
<div class="output"></div>
The best and easy way to fix line breaks on the output use these simple css:
.support-answer-textarea {
white-space: pre-wrap;
}
When you hit enter in a <textarea>, you're adding a new line character \n to the text which is considered a white space character in HTML. HTML generally converts the sequence of all white spaces to a single space. This means that if you enter a single or a dozen of whitespace characters (space, new line character or tab) in a row, the only effect in resulting HTML is just a single space.
Now the solution. You can substitute the new line character (\n) to <br> or <p> tag using replace() method.
$("#submit-code").click(function() {
$("div.output").html($(".support-answer-textarea").val().replace(/\n/g, "<br>"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea"></textarea>
<button type="submit" id="submit-code">Submit Your Code</button>
<div class="output"></div>
for me, I had a e.preventDefault() for only Enter keypress on a parent element, this prevents a new line from adding.
If you are capturing an input from a textarea, sending it via ajax (saving to database, e.g. mysql) and then want to display the result in a textarea (e.g. by echoing via php), use the following three steps in your JS:
#get value of textarea
var textarea_value = $('#id_of_your_textarea').val();
#replace line break with line break input
var textarea_with_break = textarea_value.replace(/(\r\n|\n|\r)/gm, '
');
#url encode the value so that you can send it via ajax
var textarea_encoded = encodeURIComponent(textarea_with_break);
#now send via ajax
You can also perform all of the above in one line. I did it in three with separate variables for easier readability.
Hope it helps.
Posting this here as it took me about an hour to figure this out, fumbling together the solutions from the answers below (see for more details):
The .val() of a textarea doesn't take new lines into account
New line in text area
URL Encode a string in jQuery for an AJAX request
I've two problems with my simple application.
I've read the documents twice, but had no luck to using boss_csrf_filter and passing variables to templates.
First I've done the configuration for using CSRF filter in boss.config file as the following :
{controller_filter_config, [boss_csrf_filter]},
{session_adapter, mock},
{session_key, "_myapp_session"},
{session_exp_time, 525600},
{session_cookie_http_only, false},
{session_cookie_secure, false},
{session_domain, ".myappdomain.com"},
Then, I've add to variable in template (which is under src/view/world/hello.html)
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="placeholder" required></textarea>
{{ csrf_token }}
</div>
</div>
Everthing seems fine, but no any hidden input element appearing. Should I check/configure anything else?
The second problem is with my app is passing variables to templates. My is controller something like the following code :
-module(myapp_world_controller, [Req]).
-compile(export_all).
hello('GET', []) ->
{ok, [{world}]}.
postcontact('POST', []) ->
{redirect, "/",[{contactformsend, "ok"}]}.
The code is redirecting without any value. So, the following code is not working (the same template file with I've mentioned above) :
{% if contactformsend %}
<script>
alert("Hi there is!");
</script>
{% endif %}
What I am doing wrong? How can I fix the problems?
I would propose to split your question into two, because I have answer only for the second part. When you use redirect in controller, you don't pass the variables. In the docs you can read this:
{redirect, Location, Headers::proplist()}
So the third argument is list of headers, not variables passed to templates. It makes sense: the variables will be taken from the controller, that is responsible for rendering "/".