I am using select2 in tagging mode to create and edit tags. There is an annoying behavior which is that there is a delay between when the page loads and when the tags appear. Since the tags can spill onto two lines, after the tags appear the whole page readjusts when the content below the tags box is pushed down.
The delay is caused by select2 converting the input HTML tag into the necessary HTML elements for each tag.
The delay could be avoided if the select2 didn't generate the HTML for the tags, but instead I generated it on the server-side and it was included in the original page load. Then the position of elements below the tags field would never change.
Is there a way to have select2 attach itself it existing - pre-rendered - HTML, rather than creating the HTML itself?
Does anyone know of a tag field components that supports this? All of the components I have seen start with an input tag and then generate the HTML dynamically using Javascript.
I could not find a satisfactory answer, so I created a JQuery plugin specifically for my use case: https://github.com/k1w1/rendered-multi-select
It has Rails helper to render the HTML for the control on the server, then the Javascript events are attached when the page loads. This results in faster and flicker free loading.
Related
I am using tag-it for my application. My requirement is that I should create tag-it tags and put these tags in a textarea element. I am choosing textarea over input because textarea can support newline.
I have gone through http://aehlke.github.io/tag-it/examples.html, but I notice that it supports only input element. I have also played around with the code and noticed the same.
Does tag-it work on textarea HTML element?
Looking forward to your response
The tag-it library works on input elements. One would, perhaps, have to modify their library in order to accommodate the textarea element.
Another alternative for tag-it would be to use tageditor library https://goodies.pixabay.com/jquery/tag-editor/demo.html as they support textarea HTML elements as well
I have a form that has a button next to person textbox that brings up a person Bootstrap Modal Search Window.
the html I put in a partial page and reference it
#{await Html.RenderPartialAsync("_PersonControlPartialHtml","PersonControl1");}
#{await Html.RenderPartialAsync("_PersonControlPartialHtml","PersonControl2");}
which adds a textbox and button.
Then I add a bootstrap modal html to the page that only has to appear once per page
#{await Html.RenderPartialAsync("_PersonControlModal");}
Then the javascript event code and css for the above.
#section Header {
<script src="~/css/personcontrolscript.css"></script>
}
and
#section Scripts {
<script src="~/js/personcontrolscript.js"></script>
}
The html I could put in an htmlhelper but I still need to add 3 references to the page if I want to add it to a page.
Is there not an easier way?
There are ways to reduce this but those ways come with trade offs. So it really depends on which approach best fits your needs.
So for example you could eliminate adding the .css reference in the header section via two different approaches:
1) you could place those styles in a global.css file that is already loaded for ever page; or
2) you could use inline styles on you html and eliminate these css classes.
Both of these solutions of course have downsides. Approach one means that the size of the global.css styles will be larger and take a bit more time to load even if the first page used on the site doesn't need them. Approach 2 seems to fly in the face of conventional wisdom that you should almost never use inline styles and it will make the markup more verbose. But either solution would allow you to eliminate the need for including a seperate ~/css/personcontrolscript.css reference every time you have a person control on the page.
As for the need to include ~/js/personcontrolscript.js, that could be solved one of two ways:
1) include the javascript code in a global.js file that is loaded for every page; or
2) put that javascript code inline in the _PersonControlPartialHtml and add code to it to make sure that it only gets injected the first time the partial is used on the page.
As for the bootstrapModel, I'm a little less clear on what that code looks like so I can't say for sure but probably it could leverage an approach similar to one mentioned for css or js.
With regard to rendering your partials, I don't think there is any way to eliminate that given that it's the primary representation of the functionality you are adding to the page.
As with some of the other Dart questions that have been posed about loading and injecting HTML fragment into the DOM, I'm having trouble figuring out how to do something similar with CSS/style fragments that I download via AJAX.
Trying to insert it as a style tag in HTML just results in the message:
Removing disallowed element <STYLE> // note: original text is lower-case 'style'
After fiddling around with the above problem for a while, I came upon the solution myself. I post it here in case it helps others or in case someone has suggestions for better methods.
The problem I found was that I was injecting the CSS style element into the DOM container element as "innerHtml" - which was being rejected. I found that if I specifically created a style tag element I could then insert the CSS as "text", like this:
This code takes the HTML and CSS fragments that it downloads from the AJAX server and then inserts them into new elements on my master "screen" element. In this example, the HTML gets inserted into a basic container 'div' element as innerHtml, and the CSS gets injected into a style element as text. They then both get attached to the parent element and the stylized HTML instantly pops on screen.
var screen = querySelector('#myScreen');
var container = new DivElement();
container.innerHtml = html;
var styleElement = new Element.tag('style');
styleElement.text = css;
screen.children.add(styleElement);
screen.children.add(container);
With a grails app and from a local database, I'm returning some text in a xml format.
I can return it well formed in a <textarea></textarea> tag with the correct indenting (tabulation, line return,...etc.)
I want to go a bit further. In the text I'm returning, there are some <img/> tags and I'd like to replace those tag by the real images themselves.
I searched around and found no solution as of now. I understood that you can't add an image to a textarea (other then in a background), and if I choose a div tag, I won't have the indenting anymore (and therefore, harder to read)
I was wondering if using a <g:textField/> or an other tag from the grails library will do the trick. And if so, How can I append them to a page using jquery.
For example, how to append a <g:textField/> in jquery. It doesn't interpret it and I get this error
SyntaxError: missing ) after argument list [Break On This Error]...+doc).append("<input type="text" id="FTMAP_"+nb_sec+"" ...
And in my javascript file, I have
$("#FTM_"+doc).append("<g:textField id='FTMAP_"+nb_sec+"' ... />
Any possible solutions ?
EDIT
I did forget to mention that my final intentions are to be able to modify the text (tags included) and to have a nice and neat indentation so that it is the easiest possible for the end user.
You are asking a few different questions:
1. Can I use a single HTML tag to include images inside pre-formatted text.
No. You will have to parse the text and translate it into styled text yourself.
2. Is there a tag in the grails standard tags to accomplish this for me?
No.
3. How can I add grails tags from my javascript code.
Grails tags are processed on the server-side, and javascript is processed on the client. This means you cannot directly add grails tags via javascript.
There are a couple methods that can accomplish the same result, however:
You can set a javascript variable to the rendered content of a grails tag. This solution is good for data that is known at the time of the initial request.
var tagOutput = "${g.textField(/* etc */)}";
You can make an ajax request for the content to be added. Then your server-side grails code can render the tags you need. This is better for realtime data, or data that will be updated more than once on a single rendered page.
I've got wiki style content which is sanitized and stored in another field of the db for output as html. The original body field I'm not sure how to deal with as when I santize it characters are escaped and don't display well in the textarea.
What are the dangers of unsafe content in textareas? I'm sure I read previously that downloading such textarea content with ajax is preferable but I'd rather not go down that route if not necessary.
all HTML tag are no safe. by example if you close the textarea, you can add all nez HTML tag or what you want like JS. So it's exactly like inside a non textarea tag.