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');
});
Related
There is a button on a website at the end of a form that I cannot seem to click with WWW::Mechanize. Here is the bit of HTML pertaining to this button:
<input type="submit" class="saveButton" value="Login">
When I print $mech->find_all_inputs();, I get return this:
HTML::Form::TextInput=HASH(0x7f8f52cdc450)
HTML::Form::TextInput=HASH(0x7f8f5302b488)
HTML::Form::SubmitInput=HASH(0x7f8f52cdc108)
The third one is the one I want to click. I'm not exactly sure how to click this button even though I've found it. I tried click(field(n => 3)), I tried assigning a variable $submit to find_all_inputs(3), then click($submit);, and no matter what, this button is not clicked.
Can anyone guide me as to how to click this elusive button?
Edit (after question answered)
Interrogating the HTML form found I was actually entering the password for the login into the 'Forgot my Password' field of the form. Why this field was not coming up for $mech->find_all_inputs(), I don't know since "Login" was. Either way, clicking the button takes me to the next page. Thanks!
Since it is the first button in the form, you can write this
$mech->click_button( n => 1 )
or, since it's value attribute is Login, you can do this
$mech->click_button( value => 'Login' )
But since it is the only button in the form, just
$mech->click
should work fine
Did you try to select the appropriate form first, then call click? It says (my emphasis)
Has the effect of clicking a button on the current form.
Find which form on the page you need. Let's say it's form number 2.
# $ua is the User Agent (Mechanize object), at the appropriate page
$ua->form_number(2);
# fill the form ...
my $response = $ua->click();
or
$ua->submit_form(
form_number => 2,
# fields => { name => $value } # can fill it here as well
};
I find click to be perhaps more reliable overall.
To inspect the forms you can use my #forms = $ua->forms. To fill the form you can use select or set_fields, for example. See Form Methods and Field Methods. All this operates with HTML::Form objects so you can use its methods as well. For example, value_names and possible_values are handy.
If this doesn't help please give us more detail -- the web page in question would be ideal.
I have a page where a user can edit a large (~) amount of small items with a very few options, like remove, turn off, turn on and edit name of the item.
I don't know why but the current approach I'm using does not give me the "good code" feeling. I create a form for each action on each item, so I have like 3 forms per item. I feel like forms were meant to submit larger amounts of information.
Fortunately, I found the form* attributes html5 offers (HTML5, yayy!) that kind of allow for this. I created a single delete form on the page and then on each item I added a button, outside of the form.
<button type="submit" form="delete_form" name="item-id" value="1">Delete</button>
Unfortunately that is not the case with the edit-name form. If I add a single form on the page, then have input elements for the name on every item, like
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="1">Update</button>
...
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="2">Update</button>
Then on the landing page, item-name will always be the last input's value. I haven't tested this but I am assuming that when submitting the form all input fields pointing to that form with their form attribute are being collected and sent, then on the other side they are all being processed and I'm getting the last one since they all have the same name and are being overwritten.
How, if at all, can I have only a certain input be submitted, depending on which button was clicked, instead of all?
Notice: I can think of hacky ways like including the item id in the input name but it doesn't seem right, also what if there is no id at all.
If a specific button should only post a specific input, then making separate forms sounds like the right way to go.
Your assumption is right, by the way, so another solution would be to put all inputs in the same form, but give them different names, indeed based on an item id. Adding a unique ID or name is the right way to go. After all, how would you know what you are editing if you have no ID? Currently the ID is in the button too, right? You need it.
Anyway, with such a form you can save them all with one click on a submit button.
From a UX perspective, maybe that's a better approach too. Now you would have to do and save each edit separately, which results in a page refresh, which can be annoying and slow.
I would make a form in two versions.
Non-Javascript
The basic form shows all the items to edit, each followed by a group of radio buttons that allow you to update, delete, turn on, or turn off the item.
The form has one big submit button that posts the entire form. All items are updated or their state is changed depending on the radio buttons.
This way, a user can relatively easily edit all items and post their changes without a lot of page refreshes.
JavaScript additions
Using JavaScript/JQuery, you can modify the form. Change the radio buttons to normal buttons and perform the action using AJAX, but only for the item they belong. The big button at the end can be removed, and the form can be altered so it doesn't submit anymore. This way, a user has a rich interaction without the nuisance of the page being constantly reloaded.
Currently I am using UiService to create a form and I uses ListBox, from what I understand to pass a value via handler will be something like e.parameter.[Name of ListBox] to access the selected item.
Does anyone know is it possible to use like app.getElementById([Name of ListBox]) to access the selected item. The reason I am using this method is because my list of ListBox-es are dynamic.
I spent some time looking for this answer as well, but finally I tried one idea and it worked.
You can use e.parameter as an array so you can these two will give the same:
e.parameter.LIST_BOX_NAME
and
e.parameter['LIST_BOX_NAME']
So in the second sample any dynamic list box ID can be used. I use same handler for all added dropdown list and have this code to check what dropdown was changed and what value it has now:
if (e.parameter[e.parameter.source] == 'a'){
To change the content of the listBox you can use app.getElementById('ID of the listBox'), from there you can clear() and addItems again but you cannot read the listItems.
When I need to do this I usually store the list of items somewhere else, in a place that I can read anytime, for example the list of items can be stored as a string in the listBox tag itself so I have all items at hand to repopulate the listBox after I have clear it.
I have a table that lists items. I have a form tag that surrounds this table. In this table I have ADD buttons that adds new rows to the database. I have EDIT buttons that edits a row as well. The form posts to the same action on the controller.
Now I need to add a filter row on the first which means I need to add a Filter button to submit the form with the filter parameters. Since this is still inside the main form, I now have the following problem: When I click the Filter button, the inputs that are used for the ADD button are being validated before anything gets posted. How can I prevent the validation from occurring when the user clicks the Filter button?
Make sure the Filter button is of type "button" not "submit" and do filter using ajax
As i see it, the easy way would be to fire the submit via js with:
.submit();
The other way would be to disable validation on that form with this:
$('#form').validate({
onsubmit : false
});
or
$('#form').unbind('submit')
I have one suggestion. Name Add button inputs differently and add row using javascript/ajax. When posting, Add button inputs will not be validated because they have different names
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);