I'm not sure if this is a clicking issue, or specific to the jQuery fade functions.
I have the HTML structure like this: label > input(hidden) + div + label text
Example:
<label data-name="primary-residence" data-value="Yes">
<input type="hidden" id="primary-residence" name="Primary Residence" value="" />
<div class="big-check-box"></div>
Primary Residence
</label>
And the jQuery is as follows:
$('label').on('click', function(){
var name = $(this).data('name');
var value = $(this).data('value');
if($(this).find('.big-check-box').hasClass('checked')){
$(this).find('.big-check-box').removeClass('checked');
$('#'+name).val('');
$('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
}else{
$('#'+name).val(value);
$(this).find('.big-check-box').addClass('checked');
$('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
}
});
I have a big-box that acts as a checkbox and has data attributes that then populate a hidden field to be collected on form submission. It also applies a class to the checkbox and fades in two new input fields.
Everything works fine in Chrome and FF, but in IE, the class doesn't get applied to the box and the new input fields fade in, then immediately fade out once the fade in animation is complete. Unless they are clicked twice, then it seems to work, but that isn't very intuitive or user friendly.
Here's a fiddle to a working example: jsFiddle
Anyone know why this is happening?
I figured it out.
For some reason I needed to add preventDefault() for the IE fix. Not exactly why it works, but here's reference: <label> - HTML | MDN
Here's the updated lines:
$('label').on('click', function(e){
e.preventDefault();
.....
});
Hope this can help someone else in the future.
Related
I'm trying to write code to make a text box appear and disappear based on whether or not a checkbox is checked, but while it works exactly the way I want it to in chrome, .onclick and .onchange seem to do nothing in firefox.
Trigger code:
document.getElementById('Other').onclick = ChangeOtherState;
'Other' html code:
<p>
<label for="Other">Other</label>
<input type="checkbox" id="Other" class="Types[]" value="Other"/>
<textarea id="OtherText" name="Other">Please enter other types here</textarea>
</p>
State change function:
function ChangeOtherState() {
var otherCB = document.getElementById("Other");
var otherTB = document.getElementById('OtherText');
if (otherCB.checked) {
otherTB.style.display='block';
otherTB.removeAttribute('disabled');
} else {
otherTB.style.display='none';
otherTB.setAttribute('disabled','disabled');
};
}
Is there a way to make .onclick/onchange work? if not what can I use to get the same functionality without jQuery?
EDIT: For future readers, try to change the position of the trigger declaration to right after initialization.
Please find here others topics talking about the issue.
select onclick onchange not working
onchange / onclick in a checkbox doesn't work in IE
OnClick Dropdown works in FireFox but not Chrome or IE?
It seems to have workaround already discussed.
Regards,
The below implementation is for a set of three radio buttons, with the buttons having display :none in their CSS paired with labels.
Now I've been trying to add some accessibility options to the page so that you can use the arrow keys to navigate across the radio buttons, changing the focus of the labels on each keypress. But I can't, for the life of me get it to change focus, the focus remains on the initial label that was tabbed to.
I've tried a number of options that I've seen here in regards to timeout and enabling tabIndex as I go (want it to act as a group), none have worked.
JS:
$(".radio-type label").keydown(function (e) {
// On Right Key press
if (e.which == 39) {
//Get the list of all buttons and labels
var parentList = $(".radio-type").children();
//Get index of currently focussed button
var indexThis = $(this).index();
//If not at the end of the list
if (indexThis < parentList.length) {
//Get the next in the list and its label
var next = parentList.get(indexThis + 1);
var nextLabel = parentList.get(indexThis + 2);
$(next).change(); //Custom method that changes the selection
//Remove the tab index from old and assign to nextLabel
$(this).removeAttr("tabIndex");
$(nextLabel).attr("tabIndex", "0");
//Change the focus to the new selected label
$(nextLabel).focus();
}
}
e.preventDefault();
});
EDIT: HTML Markup (names modified)
<div class="small-12 medium-12 large-4 columns radio-type #(!Model.ExtendedFilteringEnabled ? "medium-push-4" : "")">
<input type="radio" name="tt" id="ttAll" value="#Model.CurrentBlock.TTAll" checked="checked" />
<label for="ttAll" tabindex="0">All</label>
<input type="radio" name="tt" id="tt1" value="#Model.CurrentBlock.TT1" />
<label for="tt1">1</label>
<input type="radio" name="tt" id="tt2" value="#Model.CurrentBlock.TT2" />
<label for="tt2">2</label>
</div>
Updated Cory's jfiddle: http://jsfiddle.net/n99o3upp/10/ (Sorry keep buggering it up...)
I have updated your fiddle with a few things:
Changed markup for easier DOM traversal. Labels now contain their inputs.
Changed events to fire off inputs rather than labels
Changed your set method to use prop instead of attr as this will set the actual value in the DOM
Made the comparison on the if statement look for an index smaller that the length -1 as index is 0 based and length is 1 based.
Made the CSS hide the input by positioning rather than display. I commented this out in the fiddle so that you can see the input change
Added e.preventDefault() to stop the default browser action interfering with your js
The new fiddle is here: http://jsfiddle.net/n99o3upp/16/
However, I am not sure any of this code is necessary, as without it the browser will do the same thing anyway. The right and left key will automatically move the focus to the next input in the group when the DOM is marked up like this.
I think you could remove the keydown event function and just leave the change event function and this would do the same thing that you want. You can test it by moving right through the inputs, and then moving back to the left. Both work, but moving right is controlled by your script and moving left is automatic.
I've come up with a rough solution that doesn't fix all cases.
I've dropped the requirement of having it navigable by the arrow keys. All the labels have tabindex="0" on them so they can be tabbed through and activated using space or enter. If they want to move back the default Shift+Tab can do that.
Unfortunately, this solution will not work on Chrome as the browser's behaviour won't let you focus on the label if the control is hidden.
I have a search icon that when hovered over reveals an input text search box. I'm using jQuery to add a class to the input to reveal the text box when the search icon is hovered over. That is working fine.
The next function is that if the user decides not to click in the search box and elsewhere on the page, the search box goes away. That's working fine too.
The only remaining issue is that if the user clicks in the search box, it also goes away which I don't want.
My HTML:
<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">
<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">
My jQuery:
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body:not(.text-hidden)").click(function(){
//alert('The body click is working!!!');
$('.form-text.text-hidden').removeClass('hover');
});
Note that I'm attempting to use the :not selector to indicate to only remove the hover class if clicked anywhere but the search box but it's not working.
I've got a fiddle here
Try
jQuery(function(){
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body").click(function(e){
//alert('The body click is working!!!');
if($(e.target).closest('.text-hidden').length == 0)
$('.form-text.text-hidden').removeClass('hover');
});
})
Demo: Fiddle
The problem is that when you click the input, the body's click event still arises.
There's a simple solution. Just stop the event's propagation when the input's being clicked.
jsFiddle Demo
$(".form-text.text-hidden").click(function(e) {
e.stopPropagation();
});
P.S - Notice that I've removed the :not selector from the JS. It has become unnecessary.
I have an input field called email class keyup-an. I validate it easy with this, but it works or when an individual inputs the field manually. How do i make it work also for selecting historical data. when you click email and yesterday you put test#test.com, the history list drops down and you can select it, but its not a keyup.
I TRIED the same function after but with .change or .click and it didnt work. Can you guys please suggest?VALID
$('.keyup-an').keyup(function() {
$('span.error-keyup-1').hide();
var inputVal = $(this).val();
var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;
if(!numericReg.test(inputVal)) {
$(this).css('background', '#FAC3C3');
$(this).after('<span class="error error-keyup-1">Validationfail</span>');
}
else {
$(this).css('background', 'lightgreen');
}
});
you can do this by
autocomplete='off'
example
<form name="form1" id="form1" method="post" autocomplete="off">
or try something like
$(input).autocomplete().keyup(function(event) {
event.stopPropagation();
}).keydown(function() {
$(this).autocomplete('search', $(input).val());
});
good read
How to Turn Off Form Autocompletion
If I understand you correctly, you want an event which gets triggered if you click on the autocomplete item.
This is a known bug, check out this article about a jquery plugin, I think this is exactly what you need:
http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/
Instead of binding your function to the keyup event.. maybe bind it to change event?
ok.. this doesn't work on some browsers it seems.. you can refer to the previous answer and use the solution, which basically creates a timer to check the values in intervals to detect changes. Forcing the browser to do a lot of work if you want the validation to happen very fast imo.. Or you could turn of autocomplete and force the user to enter the values manually like the first answer suggested.
I've done a dialog box that contains a form inside it, and I would like to add some fancy items to it. I've been trying with $().buttonset() as I've done with most of my radio buttons in the application, in order to get a coherent UI for my application. The thing is that, even if following the rules specified, the buttons remain as a normal radio button, and not with the fancy interface. Do you know what could be the problem?
This is the part of the form where I want the fancy radio buttons:
<div id ="Replace">
<input type="radio" name="Replace" value = "true" id = "ReplaceYes"
onclick = "setReplace(this)" />
<label for="ReplaceYes">Yes</label>
<input type="radio" name="Replace" value = "false" checked="checked"
id = "ReplaceNo" onclick = "setReplace(this)" />
<label for="ReplaceNo">No</label>
</div>
And then, as the previous part of code is in a partial view, invoked when showing the modal box, this is how I try to convert the buttons appearance:
$("#Replace").buttonset();
The thing is that, debugging it I've seen that it goes through that part of the code, but it doesn't do what it's meant to do. Any clue?
I had the same problem has your, after an intensive reflexion I 've found that :
When you declare your Dialog box, you can specify a function called when it opens
$( ".selector" ).dialog({
open: function() {
$( '#buttonset' ).buttonset();
}
});
Updated: I had never used .buttonset() before, in any case it works against your markup, you can see a demo here. This demo uses the same code as the question:
$("#Replace").buttonset();
Make sure you're including the jQuery UI CSS correctly, and that your IDs are unique, if they are not you'll get some real funny behavior, and should switch to a class. Also, ensure that this part of your view is in the DOM when it runs, e.g. is it inside a document.ready event handler like this?
$(function() {
$("#Replace").buttonset();
});