Anyone has idea, how to produce valid HTML5 when images are displayed with AngularJs ng-scr directive?
What I have discovered?
"src"- attribute is required on img-tags
It can't be empty
Console reports 404 error if I set src attribute data with angular binding, cause it tries to load image before Angular has initialized
Why I want valid HTML?
Reason is simple. Strange HTML errors (missing end tags, open tags etc..) causes strange behavior in our project where we have LOTS of views. Ensuring periodically that source is valid, makes code less unstable.
From this post stems a genious hack:
<img ng-src="modelImage" src="//:0">
...much easier to remember from the top of your head than an image URL ;)
ngSrc: any string which can contain {{}} markup.
Related
I have a Django project where I use the integrated forms. But it sends my client wrong HTML syntax. This shouldn't be that big of a deal since browsers nowadays clean up such errors. But when the form gets send back to the server the form isn't able to validate because firefox sends back the cleaned version.
I have a form with an multiple select:
class ProjectForm(forms.Form):
# [...]
project_leaders = forms.ModelChoiceField(widget=forms.SelectMultiple, queryset=User.objects.all(), initial=0)
This form is integrated in the respective html file:
{{ project_form.as_p | linebreaks }}
This is the source code from it (via Firefox Page Source):
<p>[...] <select name="project_leaders" required id="id_project_leaders" multiple><br>
<option value="test">test</option></p>
<p></select></p>
Firefox cleans it up oc but it should be send and accepted by django.
Does anybody know how I can django to do that?
This shouldn't be that big of a deal since browsers nowadays clean up such errors.
The browser tries its best to distill some meaning out of erroneous markup, but the result is not always what the author expected. For getting exactly the wanted structure, said author should write correct HTML. This hasn’t changed since the 90s.
In this specific case, my suggestion is to get rid of the | linebreaks filter. It is meant for plain text with at the most simple formatting tags.
The filter adds a <br> after the opening <select> tag. This leads the browser to automatically close the <select> again, since <br>s are not valid inside <select>s. The <option> elements are then placed outside the <select>, having no effect anymore whatsoever. The closing and re-opening <p> tags are a symptom of the browser not fully knowing what to do with the final stray </select>.
we are using CKEditor in our project. We recently upgraded the version from 3.X to 4.x. After the update, we are not able to see <img> tags in the old saved documents. When we click on the source, we see
<p> <p> in place of a <p><img ......><p>.
On further debugging, we found that many documents which had the <img> tag were also having a junk attribute in the <img> tag like <img /="/" src="/folder/11801321/112267100.neck.png" height="308" width="467">.
By junk, I mean this part of tag /="/". This was a bug introduced while we were processing the user's input. We reverted old CKEditor version to 3.X and the editor was internally taking care of the junk values. it was trimming it off. so the users never complained.
But now the CKEditor 4 is not handling the HTML in the same way. It is actually stripping the whole <img> tag.
We have two options to fix this issue.
1. Remove the junk characters in all the documents. This is huge data. Needs approval from the user to do it.
2. Change CKEditor 4 config settings to get the same behavior as the CKEditor 3.X.
We are in favor of point 2. I have been searching and trying couple of config settings but haven't been able to nail it.
Let me know if any one has faced the same issue and have resolved it.
If you really want you can set all the code inside the img tag as "protected" and this way the editor will not strip this code:
CKEDITOR.config.protectedSource.push(/<img \/="\/" .*?>/g)
Remember that your final html will not be valid.
Since that part of the code is "protected" you will not see these images in the editor.
Here is a working example for that:
https://jsfiddle.net/oLb4Lmdb/
However - I really think it will be best to replace the string <img \/="\/" with <img in the source once the ckeditor instance is ready:
CKEDITOR.instances.editor1.on('instanceReady', function() {
this.setData(this.getData().replace("<img /=\"/\"", "<img"))
})
This way you don't need to go over all the data in the "backround", and the replacement will be done "on the fly" for every document that you need to edit.
You can check this jsfiddle:
https://jsfiddle.net/k1ewc29p/
We are building an image carousel, it displays clickable thumbnails that when clicked, displays the actual image. We therefore need both url to appears in the Html. Since there is no "actualImageUrl" attribute defined in the img tag, we figured out that we could build the thumbnail url like this : /thumb.png?altUrl=actualImageUrl.png. The server does not care of the actualImageUrl querystring param and we can use javascript to parse the scr attribute and figure out the actualImage Url.
How W3C valid is this ?
Changing the URL of the src attribute is perfectly valid - But you could use the data- attribute - new with HTML5 (although that doctype is not a requirement to use them) and its purpose is exactly this, from the specs :
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
w3 specs for custom attributes
Note - you can test validation here
Anything is valid as a src attribute value, in the XHTML meaning for “valid” (a formal thing). It is also otherwise correct to have a query part in such a value and use it in client-side scripting.
But it might be unnecessarily complicated. As you are working with client-side JavaScript, you could include the URLs in a JavaScript array or object, instead of putting them anywhere in HTML markup. For example, you could use an object with thumbnail image URLs as property names and full image URLs as corresponding values, like
var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }
And you would then use this object to pick up the full image URL when a thumbnail is clicked on.
For a more robust solution, which would work even when JavaScript is disabled, you would need to generate the code server-side, generating a elements around img elements.
I'm starting to learn web development and am using pyramid with chameleon. I just took some sites html source as a template in Dreamweaver and then copied the code into a chameleon .pt file.
The html code displays fine in dreamweaver but I get this error when running it in pyramid:
chameleon.exc.ParseError
ParseError: Unexpected end tag.
- String: "</div>"
I have tried dreamweavers cleanup function and it said it removed 2 empty tags but I still get this error. My traceback is all related to errors in the chameleon and doesn't show the specific line its having problems with in my template itself.
Is there a way to identify the actual line where the error is occurring?
I'm not sure if there's a pyramid or chameleon specific solution or if there are general methods to find errors in HTML tag.
Chameleon expects templates to be well-formed, and is less forgiving of unbalanced tags and incorrect attribute markup as DreamWeaver is.
Note that the error doesn't necessarily mean that there is a </div> tag too many. If the opening <div> has a syntax error such as a missing = on an attribute declaration (e.g. <div class"foobar"> then the opening tag is not recognized and the corresponding closing tag is going to be flagged as well.
You could run your template through an XML validator, there are several available online (such as http://www.validome.org/xml/, http://www.xmlvalidation.com/ and http://xmlgrid.net/, Google lists many more). These are bound to give you a slightly more helpful message as to what is wrong with your template.
Never used pyramid/chameleon before, but it looks like you have to go through the code and remove an extra </div> tag. When you get the message that it removed two empty tags, that probably means it removed the open and closing of a set of tags
e.g. <div></div> or <p></p>
Go through your code and for every <div> there should be a </div>.
I'm having the following problems using Javascript and img tags in the standard HTML component in AIR:
1- Javascript in the xml literal causes problems (even though it shows using them here: http://livedocs.adobe.com/flex/3/html/ProgrammingHTMLAndJavaScript_07.html#1032824
2- Using html.loadString(...<img src="/tmp/me.jpg" />...) does not show the image.
3- After wrapping the Javascript in CDATA tags it is still not accessible and returns an 'invalid function' error when trying to reach it.
The second 2 issues seem to go away if I save the html to a file and load it with html.load(file) instead of trying to read it as a string. Any suggestions to solve these issues?
I ended up saving the file to a temporary file and using html.load(tempfile).