I'm trying to create a form Polymer component where form elements are generated on the fly. I've looked, and so far the only way to bind the value attribute is by using .injectBoundHtml. This does not work with all component types, I'm trying to bind the value of a <textarea>, and this is what I get:
Removing disallowed attribute <TEXTAREA value="{{ results[ "comments" ] }}">
My work around was to add: textareaID.addEventListener('change', updateValueMap)
I'm hoping someone could tell me why value is disallowed, and/or if there is a better way to programmatically assign bound attributes in Polymer. Please :)!
Thanks to Gunter's suggestion, and passing a node validator:
var val = new NodeValidatorBuilder.common()
..allowElement('textarea', attributes:['value']);
this.injectBoundHtml(getElementStr(i), element:selP, validator:val);
Textarea doesn't have a value attribute.
Try this instead
<textarea>{{results['comments']}}</textarea>
For more information about the message Removing disallowed attribute see How to create shadow DOM programmatically in Dart?
Related
I use goog.html.sanitizer.HtmlSanitizer.Builder to create safe HTML that I then dynamically insert into a dialog. I wanted to have an input field that uses the Html 5 "placeholder" attribute.
I tried
.alsoAllowTagsPrivateDoNotAccessOrElse ([ "placeholder"])
and got an expected nasty compiler error!
I ended up adding the place holder attribute to the closure-library attribute white list javascript code. The call to alsoAllowTagsPrivateDoNotAccessOrElse was removed and all worked well.
We have enabled autocomplete property true for all input fields. We didn't use form tags in the templates. The input fields don't fetch the previously entered data. So how can we implement autocomplete property.
Firstly, this is not specific to Aurelia. Once the element is in the DOM, it is a feature of the browser to offer the user a previously entered value for that field given that an assumption can be made about what the field is supposed to be!).
Depending on the browser, the autofill feature relies on having 'known' input attributes (name and type) and possibly even the surrounding text, including label text.
If you are not getting the expected results, try making sure your inputs have very obvious name attributes, first. Eg.
<input type="text" name="email">
If you could share a snippet of code, I might be able to offer more help.
When dynamically adding an element to the DOM, is it possible to add a binding to it?
var element = $('#div1').after('<span></span>');
element.data("name", ???); // create binding equivalent to data-name="{{Name}}"
I know that I could use ractive.observe() to watch changes to the keypath and update the element accordingly, but the binding syntax is more concise so I'm hoping I can still leverage it.
Here's a JSFiddle that shows how I'm using ractive.observe().
I'm new to Adobe DTM so please be gentle with me! What I'm trying to do is to have a Data element hold the value of the ID of a clicked button of class "b1".
<button type="button" class="b1" id="value 1">button 1</button>
<button type="button" class="b1" id="value 2">button 2</button>
How should my Data Element be set-up since I don't want any initial value in it?
How do I structure the Event rule to capture the value of the clicked button?
I do know that I have to set the tag/selector to .b1 with event type of "click" in the condition but how do I source the "ID" value of the clicked button and assign to the Data Element.
Thanks,
Bill
Example...
Create an Event Based Rule, name it whatever you want.
Within Conditions, for the Event Type select "click".
For Element Tag or Selector put "button.b1" (no quotes). This is basically the equivalent of a css (or e.g. jQuery) selector you'd use for targeting button elements that have class "b1".
Note: You may or may not need to checkmark the Apply event handler directly to element option, depending on how your site is setup and what all is already hooked to the elements.
Now, under Rule Conditions Criteria, choose "Data > Custom" and click the "Add Criteria" button, which will then show a Custom codebox section.
Within that codebox, enter the following:
var id=this.id||'';
_satellite.setVar('b1_button_id',id);
return true;
So the way this works is that within a condition, this should be a reference to the button that was clicked. So we use that, along with DTM's _satellite.setVar() method to set a data element called "b1_button_id" to the value of the button's id attribute. Then we return true to ensure that the condition is always true, so that this condition will not prevent the rule from triggering.
From there, in any of the sections of the rule, you can reference the data element with either %b1_button_id% syntax (like in one of the form fields for setting a var through DTM) or you can use _satellite.getVar('b1_button_id') within any of the custom code blocks in the rule.
Note: data elements created on-the-fly with the .setVar() method only persist for the duration/scope of the rule being evaluated. DTM does not have an officially documented way of creating or updating persistent data elements or setting any other features that you have available from the actual Rules > Data Elements section, but there are some workarounds depending on what you want to do.
Another Note: You didn't specifically mention a need for this, but since it may be a next step that might come up.. as mentioned, within the context of a condition, this is a reference to the element for the event (in this case, the "click" event). If for some reason you need to reference this within a codebox in the Javascript / Third Pary Tags section, be aware that this will remain in context if you do NOT check the Execute Globally option, but if you DO check that option, then this will no longer be a reference to the event element.
If you need a reference to this AND you need the code to be executed globally, then you can create a data element following the instructions above, except just use this as the value, e.g.
_satellite.setVar("this_reference",this)
Then, within the codeblock you can use _satellite.getVar("this_reference") to get it.
I have created a setting api for my new plugin. It has four <input> field and one <select> option. In that field , user can change value according to their requirement. But it must be valid value. Suppose , one <input> field support only integer value. so when user will fill that <input> field by string or by other things, it will show an error message. Please tell me how can i do that? Can you suggest any tutorial ?
When using add_setting you can pass a sanitize_callback option as part of the array, this can contain the name of a function that is run which can contain your validation.
A similar method exists for JavaScript too, which you could use to validate the fields as well.
You asked for a tutorial too, here is one that outlines the method I've described: http://themeshaper.com/2013/04/29/validation-sanitization-in-customizer/