I'm new to polymer and I'm trying to create a paper-card with a 'list' that's dynamic. The premise goes like this, "user selects a day of the week from a drop down menu, a start time and and end time. When the press the "plus" button a new row is created, but the drop-down menu now does not include an already used day of the week." I have the layout semi-working, but I can't seem to figure out how to handle each current/new row with the add button.
There are varios options, it will be nice if you share your code.
But here is one general answer:
In Polymer, recommended way of manipulating the DOM is by manipulating the data.
For example,
if you have list of rows as: var rows_array = [....];
Supose you are displaying the list using iron-list as:
<iron-list data="rows_array">
<template>
...
<template>
</iron-list>
On-click on "+" button add new element to the rows_array, and that will add row in the iron-list immediately.
Related
I am new to Django. I have a requirement where in based on the TypedChoiceField list selection some part of the form should be changed. Meaning for a particular selection I need some fields to be displayed on the webpage and for other selection I need some other fields to be displayed on the webpage.
If there is already a similar page existing, please point me to that page, it will help me a lot.
What I would do is set up a javascript static file (here's a tutorial) that hides and shows elements using the select method.
For example, if you had categories that each needed a different set of fields, you could put all your categories into a <select> element and then using some simple JS, display the desired fields:
$("#select_object").change(function () {
toggleFields();
});
In that case, #select_object would be that <select> element. Whenever it changes (the user selects something) it shows the fields you want.
I want to create a scrollable list in flash/as3 and the important thing is.... if the user wants to move some list item up or down... he can do that by dragging the item... so when he press and hold on an item... the item will become drag-able and as the user moves it up or down the list, the other items should slide to the empty space. Its the same behavior seen in smartphones....
I'll figure out the creation, data filling, scrolling, and other mouse interaction events.... i just want help with this one behavior....of changing the order of items by dragging them. If only someone can just provide the basic algorithm or any idea how this can be achieved.. it will be enough.
​Thanks in advance
EDITS :
First of all... i apologize for not posting any details about the question... (this is my first post to this site) and hence i am adding all the research and what i have done so far.
the list is part of a big project hence i cannot share the whole code.
WHAT I HAVE ALREADY DONE :
i have created a mask, a container, a scroll bar to scroll the container, items to add into the list, methods to add items, remove items and arrange them according to the order.
hence it is a scrallable and working list.
the whole thing is in as3 and flash only.
i don't know flex and i don't want to use it either.
WHAT I WANT NEXT :
i want to change the order of these items by (mouse_down on an item -> drag it up/down -> mouse_up at the position) sequence.
If anyone wants more details i can share it.
Thanks in advance.. :)
Add a simple List component to an application
In this example, the List consists of labels that identify car models and data fields that contain prices.
Create a new Flash (ActionScript 3.0) document.
Drag a List component from the Components panel to the Stage.
In the Property inspector, do the following:
Enter the instance name aList .
Assign a value of 200 to the W (width).
Use the Text tool to create a text field below aList and give it an instance name of aTf .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:
import fl.controls.List;
import flash.text.TextField;
aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;
// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;
aList.addEventListener(Event.CHANGE, showData);
function showData(event:Event) {
aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}
This code uses the addItem() method to populate aList with three items, assigning each one a label value, which appears in the list, and a data value. When you select an item in the List, the event listener calls the showData() function, which displays the data value for the selected item.
Select Control > Test Movie to compile and run this application.
source: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa6.html
Finally i have got the answer from some other forum.
Here is the link to the example (behavior) that i want to add to my list :
http://www.learningactionscript3.com/2008/05/13/the-power-of-relative-positioning/
(at the bottom 'Advanced Align Example').
I have a simple HTML page with an Unordered list. Is it possible to have an input field where you could add more to the list and it would be saved after you submitted it. What I would like to add would be the content inside of an <li> tag as well as the <li> tags themselves.
Thanks,
Here is a jsfiddle with a demo of what I think you want to achieve: http://jsfiddle.net/mvJNq/25/
Note that I can not answer as to how you should do this on the server, as that depends on how your serverside code, database etc is set up. However, if all you want is to display it as HTML and not have it saved as the user navigates away, you won't need the Submit button at all - then you just need the "Add" functionality.
Yes, it is possible - no, it will not be pretty. Here is what you would do:
create your base form with any default list items/inputs
use jQuery/JavaScript to bind an event handler to a button that you click when you want to add another item (alternatively, you could skip this step and just have another item appear by default)
on your event (be it checking that all input boxes have user-entered text, or the click event in step two) add another list item using jQuery.append(...)
ensure that you have a hidden input field to be used as a "counter" to keep track of the total number of list items and increment the value of this counter each time you add a new list item (note: you may need to use the ParseInt() method, depending on how you design the code for this field)
the page that is receiving the form's inputs should first read the hidden field so that it knows how many items to add, and then you should loop through the items (for or while loop) to add them correctly
Note: I don't know what Server-Side language you are using to handle receiving the form so step 5 is a fairly generic and universally viable option
Sure, it's possible.
The complexity of this comes in when you want to "save" the items. If the user leaves the page and comes back later will that data be available? If so, you will need a database like mySQL or similar. The li tags can be stored as well, but why?
If you just need that information available in that session you can store in a JavaScript variable and have it loop through the variable and spit them out as <li>'s
If you did want to use an add button instead of submit:
$('#addButton').click(function(){
var savedContent = $('#input').val();
}
To create + insert the <li>you can use javascript to create the element and append it to the ul. If you have more than one ul change the index:
var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);
I have a standard html drop down box.
I want to run js code after the user selected an item without a separate submit button.
Onchange event does not fire when the user selects the 1st item (actually the previously selected item) in the select box.
How can I make the combo box react to the click even if the previously selected item is clicked?
Notes:
1. I don't want to add 'select from here' or something similar to the select box.
2. the onclick event does not help since it fires also on the 1st click the user does to open the options before actually selecting one.
I don't think this can't be done. onchange, as you correctly point out, doesn't work. onmouseup fires too early.
I think onblur would do the trick but it will also fire when the user tabs through the available elements.
If you really need this to work reliably, consider using a JavaScript based replacement widget like this one. They enable you to work around the notorious lack of flexibility that standard form elements unfortunately have.
Oh and by the way, the <select> element is not a combo box, it's a drop-down.
:)
You can use the onclick event but at the same time count the number of clicks.
<script type="text/javascript">
var count = 0;
function selectClicked(sel){
count++;
if (count == 2){
//the user has selected something
//so go ahead and handle it
count = 0;
}
}
</script>
What if you added the "onclick" event to the individual "option" elements rather than the "select" element?
I have a list of items displayed on my page.
Item A [Edit]
Item B [Edit]
Item C [Edit]
Each item is editable When you click on a edit icon.
The edit form is displayed with a ajax call and the controller return a form.
Edit form for Item A [Save]
Item B [Edit]
Item C [Edit]
But all the list is bulk editable and so each item has also a checkbox next to it.
[cb] Item A [Edit]
[cb] Item B [Edit]
[cb] Item C [Edit]
And a form is around the list.
form_tag
1. [cb] Item A [Edit]
2. [cb] Item B [Edit]
3. [cb] Item C [Edit]
Action: select action [Bulk Edit]
end
So when I click on a item edit button, since a form is returned, I have 2 forms nested.
And all the code breaks.
What can I do so I don't have the bulk edit form around all the items and end with 2 nested forms ?
Thanks,
Mickael.
I solved my problem using javascript. When loading the edit form, the submit button does not submit the form but calls a Ajax Request sending the form parameters to the right URL.
You can't have nested forms... In fact, if you try to validate, you will have a big and ugly html error.
The solution on your problem I think is this: when you make the ajax request and you return the edit form, you can inject the code at the end of your html and display it into a modal window (i did this way on a project few months ago).
However, i don't know how RoR works so it's just an idea :P
You could probably solve it by the power of CSS and make it appear as though the forms are nested ... though in actual fact, they aren't.
From my limited CSS knowledge that is question best left to a front end engineer, or Google.
You could highlight the rows that are selected and bind "click" event on them so you could toggle the rows as selected / not selected. Then when submit is clicked, you just submit the rows with class "hilight".
You could leave off the checkbox and make the structure something like this:
...
...
..etc
Then with jquery you could bind click event on them, like:
$('.checked').click(function(e) {
$(this).toggleClass('hilight');
});