I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.
You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)
Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.
Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.
Related
Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?
A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);
tableDnD (table Drag and Drop) is a jQuery plugin I'm using to be able to re-order rows in my html table. It's a pretty cool library, but the fact that you can click, drag, and drop rows -- disables the ability to select that row by clicking -- it thinks you might be starting a drag and drop, or doing a 0-distance drag.
So you can view my example here, and see what I'm talking about -- http://jsfiddle.net/du31ufts/5/
It starts off as disabled, so enable the row re-ordering and see the library. Then, try to select just one row in the middle. The only way the blue highlighting indicating selection shows up is if you click outside the bounds of the table, and thus you would only be able to select starting from the bottom or top, and not be able to select one row at a time. I need to select these rows to be able to copy-paste these rows into excel.
I've tried looking into the library itself and detaching $('__dragtable_disable_text_selection__'), I've tried jquerys removeAttr for unselectable, I've tried
$('.dragtable-sortable').attr('-moz-user-select', 'none');
Nothing is re-enabling my ability to be able to click and select single rows. I'd like to do this without modifying tableDnD functions.
Which CSS properties could be affecting my ability to select table rows?
Create a textarea somewhere with ID #spot.
Use this code to extract data on click from a row and select it. Its delimited by tab so it should be pastable into excel easily.
$('tr').click(function(){
var copyContent = "";
$(this).children('td').each(function(){
copyContent = copyContent+$(this).text()+"\t";
});
$('#spot').val(copyContent);
$('#spot').select();
});
I asked about this on github and got an answer: It did require modification of the library. Specifically, replacing the if block starting at line 207 of the fiddle in this question with this
if (!$(this).hasClass("nodrag")) {
if (e.target.tagName == "TD") {
$.tableDnD.initialiseDrag(this, table, this, e, config);
return false;
}
}
modified fiddle. Thank you tschqr
When I visit a nike.com store page (test URL listed below) with my Casper script, I'm unable to change the value of the 'skuAndSize' select element. I am verifying this by checking the screenshot that is made after the supposed change. The code I am using to do it is:
// Add to cart
casper.then(function() {
this.fillSelectors('form.add-to-cart-form', {
'select[name="skuAndSize"]' : '3857923:9'
}, false);
this.capture("test.png");
this.click('button#buyingtools-add-to-cart-button');
});
Is there a better way to be handling this?
TEST URL: http://store.nike.com/us/en_us/pd/mercurial-superfly-fg-soccer-cleat/pid-1531739/pgid-1481200
I've looked at your link and the select box is hidden. It is replaced with markup which changes the select box under the hood, but the connection between the select box and the custom markup is one way. When you change the select box with JS, the custom markup is not changed.
If you only want to test the add-to-cart functionality, you can just keep it like you have it, because on submit the underlying select box data is used.
If you want to recreate the user interaction then you have to explicitly click this (untested):
casper.thenClick(".exp-pdp-size-and-quantity-container > .exp-pdp-size-container")
.wait(100) // little time to open dropdown
.thenClick(x("//div[contains(#class,'exp-pdp-size-dropdown-container')]/ul/li[not(contains(#class,'exp-pdp-size-not-in-stock'))][3]"));
This should select the third available size by using the CasperJS XPath utility.
I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.
I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.
I'm looking at creating something like this:
http://konigi.com/interface/kontain-search
alt text http://s3.amazonaws.com/konigi/interface/kontain-search-2.png
I don't suppose anyone has any resources which could guide me? I know I'm not giving much information but I wouldn't know where to start looking.
Cheers!
EDIT Sorry, I meant just the drop down / input box, nothing else on that site.
EDIT AGAIN The drop down list is inside of the input box, hence why I was wondering.
It may be something similar to these examples but with only one main item. and manipulate with jquery each "li" and that action taken
example 1 |
example 2 |
example 3 |
example 4
edition answer: this is done with css.
is all contained in a div -> input + menu.
for the input is removed border styles and background color is the same as the container div.
Well, you put part of the search form in a hidden div and pop it up when the user clicks or hovers on some other element, either inside or outside the form. Use CSS as needed to position the div. Not really sure what problems you could possibly have with something like this.
Maybe you can be more specific and break this problem down in several more focused questions?
I did not drill into the site, but from a logical standpoint, perhaps the search box AND the dropdown are "inside" another element (div?) that forms the complex control...and just formated(CSS)/actions(jQuery) placed on those.
<div id="searchDiv">
<div id="searchText"></div>
<div id="searchDropdown"></div>
<div id="searchButton"><div>
</div>
Easy enough to set somthing like that up.
I think what's going on there isn't that the dropdown is inside an input box, but rather that the input box chrome is hidden and it's placed inside an input-looking div along with the dropdown.