In my symfony page there is a group of checkboxes, so they have the same name :
<input type="checkbox" name="opt[]" value="1"> Option 1
<input type="checkbox" name="opt[]" value="2"> Option 2
...
I check only one box and submit, the URL in the browser looks like this:
http://localhost/list?opt[]=1
In my twig I have this instruction :
<link rel="canonical" href="{{ app.request.uri }}">
In the HTML source code I have this :
<link rel="canonical" href="https://localhost/list?opt%5B0%5D=1">
And now the browser says the canonical URL is different from the current one !
How can I prevent twig to encode square brackets ? And why is he adding a 0 betwen them ??
Regards
Related
I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not work properly. I have tried to see the API of material design and tried to implement it but It did not work either.
Anyhelp would be really appreciated!
Thanks
<html>
<head>
<title>Parcel Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input
class="mdc-text-field__input mdc-text-field-helper-text--validation-msg"
type="email"
aria-controls="validation-msg"
required
/>
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<p
class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
role="alert"
>
Enter Valid Email
</p>
</form>
<script>
mdc.textField.MDCTextField.attachTo(
document.querySelector(".mdc-text-field")
);
</script>
</body>
</html>```
https://codesandbox.io/s/admiring-elion-kojst?file=/index.html
First off, jQuery wasn't needed. It didn't give any errors and it behaved the same, so I just removed it.
I found the manual here: https://material.io/develop/web/components/text-fields
If you look at the section titled:
Text field with helper text
Here you can seen the following example:
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input class="mdc-text-field__input" type="text"
aria-labelledby="my-label-id"
aria-controls="my-helper-id"
aria-describedby="my-helper-id">
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>
If you look carefully at the after the label, you will see some differences.
There is even more detailed information on how to use the helper text:
https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/
In the API section there is a class called mdc-text-field-helper-text--persistent which you have included. This will make the helper text permanently visible, so you don't want that.
Here is the block you should have instead of the p element after the label:
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
Enter Valid Email
</div>
</div>
PS: would be great if you could include a link to the example you were following next time.
I want to get the href attributes from the given HTML code so that i can go inside the link and scrape some data from it.
<div class="cb-col cb-col-67 cb-rank-plyr"> <a class="text-hvr-underline text-bold cb-font-16" href="/profiles/1643/aaron-finch" title="Aaron Finch's Profile">Aaron Finch</a> <div class="cb-font-12 text-gray">AUSTRALIA</div> </div>
<div class="cb-col cb-col-67 cb-rank-plyr"> <a class="text-hvr-underline text-bold cb-font-16" href="/profiles/10863/fakhar-zaman" title="Fakhar Zaman's Profile">Fakhar Zaman</a> <div class="cb-font-12 text-gray">PAKISTAN</div> </div>
I want to get the attributes of href and save it to a list.
You can use regular expressions to parse out thinks in the HTML such as that href tag.
Here is an article explaining that: https://medium.com/#tracy_blog/regex-and-selenium-2c5a89f23a17
To accomplish this, I would consider using get_attribute(name) over a regular expression.
I'm using Koken and would like to customize the template for text entries by putting the date at the top of the entry.
I hacked a call to new Date() into the core template file /admin/templates/text.tmpl.html
<div id="entry-editor">
<div id="edit-area" data-bind="html: content() ||
'<p class=\'date\'>' + new Date() + '</p>
<p class=\'media-row\'><br /></p>'">
</div>
</div> <!-- close #entry-editor -->
This works fine, but I know the perils of hacking core files.
As of this writing, I don't see an answer on the page linked as "define your own custom template types" on help.koken.me.
Without hacking core files, how can I have Koken add a date to the top of each text entry?
From http://help.koken.me/customer/portal/questions/1080677-how-to-make-custom-templates-in-koken-
Simply place a <koken:time> tag in the customized theme template.
For example, in my /storage/themes/<custom-theme-name>/essay.lens file:
<header>
<h2>
<koken:link>{{ essay.title }}</koken:link>
</h2>
<p>
<strong><koken:time show="time" /> <koken:time show="date" /></strong>
</p>
</header>
I am in the process of internationalising a website and I can't seem to find a way to store large paragraphs that my contain some other tags.
For example let's say I have this : (call this example 1)
<h1> the title </h1>
<p>
... A very large paragraph ... <h:link value="click me" outocme="newPage"/> ... more text...
</p>
Or again something of this sort : (call this example 2)
<h1> check this list out </h1>
<ul>
<li> ... text here </li>
<li> ... text here </li>
<!-- more items -->
</ul>
I am in JSF 2.0 and using the bundeled resource to internationalise my page and that's working fine as there are many examples how to do this.
But what I'd like to be able to do is something like this for example 1 (msg being my variable linked to my bundle)
<h1> #{msg['page.title']} </h1>
<p> #{msg['page.largeParagraph']} </p>
And example 2 would look like this :
<h1> #{msg['page2.title']} </h1>
<ul>
#{msg['page2.myList']}
</ul>
Is there any way to do that, or do I have to resort to something like this (using example 1)
<h1> #{msg['page.title']} </h1>
<p>
#{msg['page.largeParagraph.part1']} <h:link value="#{msg['page.largeParagraph.link']} #{msg['page.largeParagraph.part2']}
</p>
The same would be for example 2 where I would need a different entry for each <li>.
What is the best practice when we are doing something of this sort?
Thank you for any input.
Edit :
It had occured to me that by default did escape characters. Therefore I have tried :
<p><h:outputText value="#{msg['page.paragraphWithLink']}" escape="false"/></p>
Unfortunately, this did not work for me.
Edit 2 :
Using escape="false" did work for <strong> but definetly does not work for <h:link>.
You cannot specify JSF components in the bundle file. They won't be parsed as part of the component tree. The webbrowser also doesn't understand JSF tags, it only understands HTML. Just plain HTML should work with <h:outputText escape="false">.
page.paragraphWithLink=lorem ipsum click me dolor sit amet
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.