HTML Drop Down List - tidy up? - javascript

I've implemented a html drop down list and all seems to be fine, would just like to tidy it up:
1) When the order screen loads 'Select' appears as the initial option on the drop down. When the user clicks the drop down the 'select' still appears. I would like to hide 'select' when the drop down is being selected, some option in the view I am missing?
2) validation wise, I cant make an order until an option is selected from the drop down. This is fine however where before I was using a text box and got a nice big red error message, now I get nothing, How can I notify the user an option has to be chosen?
<div class="editor-field">
#Html.DropDownListFor(x => x.Selected_BicycleModelId, Model.BicycleModels, "Select")
#Html.ValidationMessageFor(model => model.Order.BicycleModel)
</div>
Update
#Html.ValidationMessageFor(model => x.Selected_BicycleModelId)
has resolved the validation message issue (thanks Roman Ko). anyone ideas on the 'select' dissapearing - JQuery?

Try this:
#Html.ValidationMessageFor(model => x.Selected_BicycleModelId)
When it comes to the 'select' caption, you can try to remove it using - for example - jQuery:
$(document).on('change', '#Selected_BicycleModelId', function () {
$("#Selected_BicycleModelId option[value='']").each(function () {
$(this).remove();
});
});
See jQuery remove options from select for more detailed info.

This is not possible. The <select> element has no ability to provide a placeholder value. As a result, a common workaround, and the same that Razor employs, is to add another option with an empty value attribute. This appears in the dropdown because it is very much an option like any other in that list. It's your form validation, both client-side and server-side that makes it not a "valid" option.
You'll need to provide more information to determine why the validation is no longer working. In particular, the property and any associated attributes from your model would be helpful. See #RomanKo's answer. I don't want to steal his thunder by just posting the same thing here. For my part, I totally missed it.

Related

Customized Woocommerce Alert for Multiple Variations: Please select some product options... Working Partially except 1 situation

I am using below custom code to customize the default Woocommerce Alert for variable product (if user not selected any of the available variation). The Alert, that reads as - Please select some product options.. , on Single product page.
Code works fine (in situation)-
Say, If I have 2 variation attributes. That is size and color.
So, if a user selects any option (attribute term) from size, but forgot to choose the one from the color, then he receives specific custom Alert, for not choosing the Color (as in below code).
And vicversa, if he forgot to select option (attribute term) for size (but already selected the option from Color), then he receives a different custom Alert message (again, as in below code - 2nd Alert)
Code Not working (for this below situation)-
Say, if user forgot or do Not select ANY of the Variation attribute. That is neither any attribute's term from size nor from a color option, then, how to update the code in a way, so as to Display some totally different Alert message.
Currently, what is happening is - If user do Not selects any of the option, neither from size and nor from color, then the first Alert message (that comes first in order - Top to bottom) shows automatically.
Which as per my below code, is set for the Size attribute
This is a custom JS code-
jQuery(document).ready(function($){
$('.single_add_to_cart_button').click(function(e){
if ($('#pa_size').val() == "") {
e.preventDefault();
alert("Oh! You missed the option. Why not choose the one");
return false;
}
if ($('#pa_color').val() == "") {
e.preventDefault();
alert("You missed to choose the Color. Please select any one");
return false;
}
});
});
Question:
Can you please suggest what is additionally required in order to show some other message (totally different), if user do NOT selects any of the available options from any of the attributes. That is, neither size nor color.
Also, can someone please provide the similar Custom PHP snippet instead of JS code. That works for above requirement. As I prefer to use the PHP snippet
Regards

Trigger change event on page load

i have a form that shows/ hide fields based on the user selection. Below is the code that is used for a select field and it works fine.
$('#pager').off('change', '.form_field select').on('change', '.form_field select', function(e) {
load_all_options($(this), 'select', e);
});
I have the same function with different selectors like text and check box. Everything works fine during the change. But the problem is by default i have some fields populated, so on page load i need to trigger the change event so the relevant details are loaded properly..
can someone let me know the best way to do it?
Thanks
You could do with document.ready.create the array with selector names .Then join with , .its only trigger change event on particular selected element listed in array
const select_arr = ['.form_field select','.form_field input']// and use multiple select
$(document).ready(function(){
$(select_arr.join(',')).trigger('change')
})

Autosaving changes to textfields using jquery

My question is very similar to this one: Getting an error in jQuery when I try to autosave a form field with an ajax call
But the only problem with me is that my situation is more complex. I have a form which has 2 sections. To each section the user can add rows while inputting their data. Each row has a text field and a select box. I need to update the database values of these text fields and select boxes as they change.
Since these all are added on the fly, their ids are different. Ideally I would like to use onchange for each textfield and select box and call required functions which will make ajax call to update respective values. But when I try calling a function onchange, nothing happens. I am wondering if this use is deprecated in Rails 3 in favour of unobtrusive js.
Here's how my haml for the textfield looks:
= builder.text_field "regular_expenditure", :value => val, :title => builder.object.regular_expenditure > 0 ? "" : '0.00', :size => 7, :class => "defaultText", :onchange => "javascript:sendGivenupAmount('challenge_givenup_items_attributes_#{#given_up.rindex(given_up)}_regular_expenditure', '#{given_up.id}');"
In my js file:
function sendGivenupAmount(){
alert('in function');
}
Am I doing something wrong? Is there any other way to do this?
Thanks in advance for any help
M
Thanks for the support. I think I found a solution. I just made some changes to the view and accessed the elements through DOM in jquery. I could manage getting around it.
Thanks,
M

Title Attribute on Disabled Elements in Firefox

I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.
I am using jQuery, so factor that in to your answers. Thanks in advance.
I have a set of button elements defined as:
<input type="button" title="My 'useful' text here." disabled="disabled" />
I have these buttons with a default style of:
div#option_buttons input {
cursor: help;
}
Then, using jQuery I run something like this as a click-event on a select box:
window.current_column = '';
$('select.report_option_columns').live('click', function() {
var column = $(this).val();
if ( column == window.current_column ) {
// clear our our previous selections
window.current_column = '';
// make this option no longer selected
$(this).val('');
$('div#option_buttons input').attr('disabled','disabled');
$('div#option_buttons input').attr(
'title',
'You must select a column from this list.'
);
$('div#option_buttons input').css('cursor', 'help');
} else {
window.current_column = column;
$('div#option_buttons input').attr('disabled','');
$('div#option_buttons input').attr(
'title',
'Add this option for the column "' + column + '"'
);
$('div#option_buttons input').css('cursor', 'default');
}
});
So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.
But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.
Now, I know I have a few options (at least the ones I could think of):
Write my own custom tool tip plug-in that is a little bit more robust.
Don't "disable" the element, but style it as disabled. This was the option I was leaning on the most (in terms of ease to develop) but I hate having to do this.
Leave the button as enabled but don't process the click event. I don't like this option as much because I like to leave things natively styled as they should logically be. A disabled button "feels" the most correct and the look of a disabled button is instantly recognizable as a disabled button.
So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.
**Edit**
I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).
The url to the question is: Firefox does not show tooltips on disabled input fields
Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.
I had a similar problem and I just surrounded the disabled element in another element and interacted with that div, i was using tipTip to show tooltip for disabled checkbox
<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >
<input disabled="disabled" type="checkbox">
</div>
There are several validation plugins that are very robust. You can find them in the jQuery plugins area.
Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.
Good luck!
I haven't tested whether or not that solves the problem with the missing title, but you could also disable the button(s) using jquery on $(document).ready()
regards,
harpax
If that doesn't break your design totally, you can replace your button by a "span", "p",... tag with "My 'useful' text here."
And swap it with the button only when the user makes the correct move.

Dynamically growing an array of text inputs (HTML/JavaScript)

I'm creating a data entry app for some in-house stuff.
My team needs to enter info about "items" which can have many "categories" and vice versa.
I need a quick way to let them enter an arbitrary amount of categories.
Here's my idea:
On the item entry page, I'll have it so that initially there's one text input for "categories" and if it's tabbed out of while it's empty, the input field is deleted (unless it's the only one) and focus skips to the next field. If it's not empty when it's tabbed out of and if it's the last input field in the array, then an additional "category" text input will be added and focused.
This way people can enter an arbitrary amount of categories really quickly, without taking their hands off the keyboard, just by typing and hitting tab. Then hitting tab twice to denote the end of the list.
First of all, what do you think of this interface? Is there a better way to do it?
Second of all, is there a jQuery (or something) plugin to do this? I've searched but can't find one. I searched scriptaculous/prototype and mootools too, with no luck.
I would obviously rather use something tried and tested than roll my own.
Any and all advice appreciated
First I'll try to address the problems commented on nickf solution.
To set the focus on the newly created input $copy.find(":text").focus(); will not work. The jQuery focus method only triggers the event, but does not call the underlying focus method.
You can set the focus with setTimeout(function(){$copy.find(":text").get(0).focus()}, 10); but:
setTimeout is needed in firefox or strange things will happen with the blinking cursor.
IE7 needs another input to focus when tabbing. I haven't found the way to set the focus on an input if the focus goes to the address bar. I suppose this will not be a problem because you will need at least a submit button.
To control shift-tab I've been trying to track the focused element, in order to skip the blurHandler when the focused element is a previous input, but the resulting code is really ugly so I'll post this and look for a better solution.
And last, you're asking what we think of this UI, and I think that a comma separated list of categories is easier to code an to fill in. :-)
it's actually not too difficult to implement that, even with vanilla JS (ie: no jQuery, prototype, etc), but everything is easier with jQuery, so I'll have a go at it using that:
Assuming a structure like this:
<form id="myForm">
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
...
</form>
Here's the JS
$('#myForm :text').blur(onBlurHandler);
function onBlurHandler() {
$row = $(this).parent();
if ($row
.nextAll(":has(:text)") // all following divs with a text element
.length == 0 // but there aren't any, we're on the last one
) {
if ($.trim($row.find(":text").val())) { // the text box isn't empty
$copy = $row.clone(true);
$copy
.find(":text") // get the new text box,
.val('') // remove any text in it
.blur(onBlurHandler) // and add the event handler (is this necessary?)
;
$copy.insertAfter($row);
} else if ($row.prev(':has(:text)').length) { // the text box is empty, and this one isn't the first row
$row.remove(); // get rid of the row.
}
}
}
Response to comments:
thanks for the answer! i've tried it but it doesn't seem to work as intended. i'm on mac firefox. if i tab off the last field, it adds the new one but focuses the address bar. i tried adding: $copy.find(":text").focus(); after the insertAfter line, but it doesn't change anything. any ideas?
also if i shift-tab the blurhandler doesn't know i'm going in the opposite direction. is there any way around that?
Hmm, I hadn't thought about that. What you could try doing is to put an element after all your text fields which can take focus (like a textbox which is rendered off-screen, eg: margin-left: -10000px). Add an onfocus handler onto that to see if the last row is empty, and if it is, then it would have been added just then by the onBlurHandler function, so pass the focus back to the last row. If the last row isn't empty, then pass the focus onto the next element (your submit button, probably). If there are issues with the last row not existing in the DOM yet, then put the above into a timeout.
(If this actually works) this should let your users tab backwards and forwards without hassle.

Categories