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.
I have two buttons - Company Email and Non Company Email.
If i select the first , ng-click="flag='Y'" and the second one renders the flag value as 'N'
So now I am trying to disable them when they are selected so user is not allowed to click on the second time, the second click is creating some UI issues which I want to avoid here.
But the ng-disabled is not working at all as expected, it disables from the outlook but we can still click the button and it behaves strangely.
Pleas help-
Code block is added in comments
This seems like a simple enough issue where you would disabled the buttons using a scope variable set once a button is clicked.
<button ng-disabled="flag=='Y'" ng-click="doCompany()">Company Email</button>
Here is an example
Effectivily I have a web page text box that I want it to load the value that it outputed when going to a link.
I have a link called www.mydomin.com/number.html
This page just displays a number (lets say it displays 1234).
I then have a another page called show.html.
this page just has a basic html text box.
I want this basic html text box to display the output number at www.mydomin.com/number.html
so this text box should in theory display 1234
I have tried value="www.mydomin.com/number.html" but that just shows the actual link.
Any ideas? Greatly appreciated.
You can always use jQuery AJAX requests if needed (although I agree fully with #Madara's first comment):
$.get("number.html",function(data){
$("#myinput").attr("value", data);
}
I use Gxt-2.2.5-Rtl (http://code.google.com/p/gxt-rtl/) and try to show html content through HtmlContainer's setUrl() method. But unfortunately the result is flipped version of my expected output. For example suppose our input html contains a table which starts columns from right to left as id, name, description. So what we get is a table that their column starts from expected order BUT FROM LEFT TO RIGHT!
I used Gxt's Html and Gwt's HTML and HtmlPanel classes, but this problem doesn't solve.
In addition I should say when I use TabItem or ContentPanel's setUrl() method this problem disappears. But I prefer to don't use that method and because:
1- Just last loaded iFrame is visible at a time. This means that navigating through other preloaded tab items displays a blank page.
2- Poor control over loaded page through GWT, like catching click events and etc.
Expected output:
http://www.freeimagehosting.net/yow6l
Wrong output:
http://www.freeimagehosting.net/8opdt
I changed the titles to English for better communicating! :)
Thanks!
I want to use 2 types of sharethis buttons with different counts. One count for the page that is currently shown, and one in the footer that counts every share for the whole site (only http://example.com, not the articles or something, so not every share).
Here is a short example of the code next to the article:
<span class="st_facebook_custom"><img src="images/icons/facebook.png" alt="Facebook" /></span>
And here is a short example of the code in the footer:
<div class="share"><span class="st_facebook_hcount"></span></div>
You can have two buttons that get two different counts by using the following
The problem is that when you pass in http://example.com it does not give you counts for the whole site, just for the home page...
This is exactly how the FB like and Twitter count buttons work, they are on a per page level, not at a site wide level..
-Manu