dynamically create bound datas with polymer - forms

I would like to create a dynamic form using polymer, meaning that everytime the user press "add" button,it will add a new field in the form. Or, more specifically, it will add a paper-dropdown-menu, where all of the options come from a dom-repeat fed by an ajax call.
this is what i've done so far:
<div id="filterContainer">
<div class="flex rulesForm" id="filter1">
<paper-dropdown-menu name="rule1A" no-label-float>
<paper-listbox attr-for-selected="value" selected="{{filter1A}}" class="dropdown-content" id="thirdPartyFilter1A">
<template is="dom-repeat" items="{{rule1A}}">
<paper-item value="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
</div>
<paper-button raised on-tap="addFilterField">Add</paper-button>
<div>
and in the JS:
addFilterField: function () {
let dropdown = document.createElement('paper-dropdown-menu');
dropdown.name = "";
dropdown.noLabelFloat = true;
let listbox = document.createElement('paper-listbox');
listbox.class = "dropdown-content";
listbox.attrForSelected = "value";
listbox.selected = "{{filter1A}}";
let paperItem = document.createElement('paper-item');
paperItem.value = "[[item]]";
var itemNode = document.createTextNode('[[item]]');
paperItem.appendChild(itemNode);
listbox.appendChild(paperItem);
dropdown.appendChild(listbox);
console.log(dropdown);
filterContainer.appendChild(dropdown);
my problem is about the data-binding... If I use createTextNode with [[item]], it will simply write it as a string in the document. Is there a way to fix this? (or a way easier solution to add field in a form?)

first of all you cannot use binding notation in javascript. it is markup
2nd, polymer doesn't yet support creating data bindings dynamically. however I'm sure you can accomplish what you are trying to do.
3rd,
you have to use the Polymer Dom API. https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api
instead of paperItem.appendChild(itemNode)
you would use
Polymer.dom(listbox).appendChild(itemNode);

Related

How can I write some javascript to click this "continue" button?

<span id="continue" class="a-button a-button-span12 a-button-primary"><span class="a-button-inner"><input id="continue" tabindex="5" class="a-button-input" type="submit" aria-labelledby="continue-announce"><span id="continue-announce" class="a-button-text" aria-hidden="true">
Continue
</span></span></span>
Above the the HTML from part of a page, which has a 'Continue' button that i'm trying to click, using my script.
So, writing in Javascript, i'm trying to click this button. But nothing I have tried works.
My attempted answer is:
function() {
var goButton = document.getElementById("continue");
goButton.click();},
Why doesn't it work? Help me, please !
You have set the ID of both the span and the input field to "continue". ID's should be unique for a single element. When I enter your code in the browser's console it returns the following:
> var goButton = document.getElementById("continue");
< undefined
> goButton.valueOf()
< <span id="continue" class="a-button a-button-span12 a-button-primary">
You can see the span is the element being selected instead of the input submit button. You should rename either of the 2 elements so both have a unique ID and use that in your script.
Edit: OP mentioned the HTML can not be changed so instead of fixing the use of a not-unique ID this Javascript can be used:
function() {
var continueSpan = document.getElementById("continue");
var goButton = continueSpan.firstElementChild.firstElementChild;
goButton.click();}

How to achieve the dom structure programmatically?

How to achieve the following structure dynamically in GWT without using the HTMLWidget?
<div class="samplecheckbox">
<label><input type="checkbox">Remember me</label>
</div>
Simple solution
Create an instance of FlowPanel. (This creates the outer div)
Add the Checkbox to it. (This creates the checkbox to div with label embedded)
This should work:
Element divElem = DOM.createDiv();
divElem.addClassName("samplecheckbox");
Element labelElem = DOM.createLabel();
Element checkElem = DOM.createInputCheck();
checkElem.setInnerText("Remember me");
labelElem.appendChild(checkElem);
divElem.appendChild(labelElem);

clear modal bootstrap form in angular

what is the best way to clear bootstrap modal form data without using jquery?
I could use this, but I would like to know the angular way of clearing modal form data.
$('#myModal').on('hidden', function () {
$('#Username').val("");
});
Edit:
I have multiple elements on the form. I found out the easiest way is to create a service to reset the object and updates the ng-models on the form.
To reset the form object, call the shared service to reset: mySharedService.resetObj(); To clear the form in controller:
$scope.myObj = mySharedService.getObj();
$scope.myForm={};
$scope.myForm.myData = angular.copy($scope.myObj);
all the elements is under the 'myData' item.
Use ng-bind to set the value of whatever inside the <div class="modal-body"> equal to a $scope variable, then change the $scope variable on whatever action you want, most likely on the cancel event, like so:
$scope.cancel = function () {
$scope.yourVariable = "";
$modalInstance.dismiss('cancel');
};
the binding is like this:
<div class="modal-body">
<div ng-bind="yourVariable"></div>
</div>

How to capture a value not through an input field in a form using php and mysql ?

Hello everybody and good day ,
I am making a web application in php and mysql
Iam trying to make a page where a user can create a custom form eg. User can create custom forms so they can type the name of the input, however the place where they type the name of the input i have it formated like this:
<div contenteditable="true">
<span spellcheck="false" id="a">Editable Content</span><em>o!</em>
</div>
so its not an input field .
How can i capture this information in a form , maybee with a hidden input field, a label or with jquery ?
if my question is not clear let me know i will edit ti it as soon as i get a chance .
You can use javascript to collect the text inside the span.
This question is related How do I change the text of a span element in JavaScript
The answers mention document.getElementById("myspan").innerHTML which is the place that text resides. You'll want to change the "myspan" though.
You have to use either a form or send the data with AJAX.
document.getElementById("your-form").onsubmit = function()
{
var spanInput = document.createElement("input");
spanInput.setAttribute("type", "hidden");
spanInput.setAttribute("name", "spanData");
spanInput.setAttribute("value", document.getElementById("a").innerHTML);
this.appendChild(spanInput);
return true;
}
// or
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){} // please change
xhr.open("POST", "your-script.php");
var spanData = document.getElementById("a").innerHTML;
xhr.send("spanData="+encodeURIComponent(spanData));

using "data" with jquery tempates and "each"

I'm building web content using jquery templates and json and I'm looking for a clean(er) way to get the json data associated with a click event on content that was built using those templates. The tmplItem().data that is stored is the array of objects for that template. When an item in that list is clicked, I want to pass just the json data for that item to a click event handler.
Currently I'm doing this:
<script id="ribbonTemplate" type="x-jquery-tmpl">
{{each(i, item) ribbon_data}}
<img id='${i}' src="${thumbnail_url}" alt="${content_url}"/>
{{/each}}
</script>
and
$(ribbonDiv).live('click', function(e){
var clickItem = $(e.target);
var tmplItem = clickItem.tmplItem();
var imgId = clickItem.attr('id');
var jsonBackingData = tmplItem.data['ribbon_data'][imgId];
clickEvent(jsonBackingData);
});
This works but it seems a bit clunky. Is there a way that doesn't depend on using the id selector?