I am trying to validate date using jquery. If user entered invalid date, then it should set focus in same control. I have written below code it works fine in all browsers but in Mozilla its not working.
JavaScript Code:
function CheckDate(txt) {
var isValid = false;
var txtDate = $('input[id$=' + txt + ']').val();
if (txtDate.length == 0) {
isValid = true;
}
else {
if (isDate(txtDate)) {
isValid = true;
}
else {
isValid = false;
$('#' + txt).focus();
}
}
//alert(txtControl);
}
I am calling this function on onBlur event of textbox.
I didnt got any solution for this. If anybody knows than please help me.
Try .trigger('focus') instead of simple .focus()
In your code, I feel that the selector has issues. We need to see the value of txt. So can you change your this part of code:
$('#' + txt).focus();
To:
$('input[id$=' + txt + ']').focus();
You can use this code
$('#' + txt).attr('value');
and use this
$('#' + txt).focus();
it works with focus inside setTimeOut : http://www.echoknowledge.com/javascript-focus-is-not-working-in-firefox/
Related
I am using this simple code to filter through a search form with many text inputs and see if they have a value and then add a class.
Works perfectly in Chrome, safari and Firefox but not in IE9.
$('input[type="text"]').filter(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
Please advice, thanks in advance!
EDIT
Change to each but doesn't solve the issue... Here it is with the event that triggers the function...
$(document).on('event-ajax-form-is-loaded', function() {
$('input[type="text"]').each(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
});
From the limited information you shared, this is how you should be doing this:
$('input[type="text"]').filter(function() {
return $(this).val() !== '';
}).addClass('used');
.filter() is supposed to reduce a set of matched elements so its filter function should always return a bool instead of manipulating the DOM.
Edit: Based on your updated code snippet and the page link you shared in the comments, if you are using jQuery in WordPress, then its always safer to wrap the code like so:
(function($) {
/* jQuery Code using $ object */
})(jQuery);
enter code hereIn JS you can check the element value by getting their tag name
for (var i = 0; i < document.getElementsByTagName('input').length; i++){
if (document.getElementsByTagName('input')[i].value == "")
{
alert("The value of textbox at " + i + " is empty");
}
}
Working Demo
Or like what other people suggest, use a .each in JQuery
$('input[type="text"]').each(function(i){
if ($(this).val() == "") {
alert("The value of textbox at " + i + " is empty");
}
});
anohter Working Demo
If you insist to use filter and here you go
$('input[type="text"]').filter(function()
{ return $( this ).val() != ""; }).addClass("used");
Last Working Demo
and jquery filter reference
I spent several hours on this and couldn't find a solution that worked, so I'm turning to you :) As you can see from this fiddle (http://jsfiddle.net/PPcgE/), I was able to target the radio buttons by click with this code:
$("input[type='radio']").click(function (e) {
if ($('.cos-cond').is(":visible")) {
e.preventDefault();
} else {
var clicked = $(this).attr('title');
var cls = [$('.one'), $('.two'), $('.three'), $('.four'), $('.five'), $('.six'), $('.seven'), $('.eight'), $('.nine'), $('.ten')];
for (i = 0; i < cls.length; i++) {
if (cls[i].attr('title') === clicked) {
cls[i].fadeIn('fast', function(){
setTimeout(function(){
$('.cos-cond').fadeOut('slow');}, 5000);
});
}
}
}
});
I'm trying to do exactly the same thing (displaying either span.eleven, span.twelve or span.thirteen this time) based on which option is clicked/selected in the select box. The best I've been able to manage is to get all three to appear at once.
Your original code is broken, i've create a fiddle that fixes it.
Your problem was when you were fading out, your selector was selecting all of them, visible or not, and then showing ALL of them while fading out.. thus always showing the last one (topmost).
if (cls[i].attr('title') === clicked) {
cls[i].fadeIn('fast', function(){
setTimeout(function(){
$('.cos-cond:visible').fadeOut('slow');}, 5000);
});
}
Beyond that you need to provide your attempt at how you tried to get the dropdown box working. You only provided the old code and nothing more.
Your code shouldn't be longer than this
$(document).ready(function(){
$("input[type='radio']").click(function (e) {
$('.cos-cond, .work-cond').hide();
var clicked = $(this).attr('title');
$('span.cos-cond[title=' + clicked + ']').fadeIn(300);
});
$("select").change(function (e) {
$('.cos-cond, .work-cond').hide();
var value = $(this).val();
var title = $('option[value="' + value + '"]', this).attr('title');
$('span.work-cond.' + title).fadeIn(300);
});
});
http://jsfiddle.net/PPcgE/5/
Try
$(".emf-hide").change(function(e){
var val = $(".emf-hide option:selected").val();
$('.work-cond').hide();
switch(val){
case 'Like New - No Functional Problems':
$('.eleven').show();
break;
case 'Minor Functional Problems':
$('.twelve').show();
break;
case 'Non-functional':
$('.thirteen').show();
break;
}
});
Working example here
I have an asp page in which I add dynamically a control I created (several times). In that control I have textbox for password and username and a revert button.
I use this javascript code in that control and it fails:
function HandlePasswordChanged() {
document.getElementById("<%=btnRevert.ClientID %>").disabled = false;
}
function HandleUserChanged() {
document.getElementById("<%=btnRevert.ClientID %>").disabled = false;
document.getElementById("<%=txtPassword.ClientID %>").disabled = false;
}
function btnRevertClick() {
document.getElementById("<%=btnRevert.ClientID %>").disabled = true;
document.getElementById("<%=txtPassword.ClientID %>").disabled = true;
document.getElementById("<%=txtUsername.ClientID %>").value = document.getElementById("<%=systemAccount.ClientID %>").value;
document.getElementById("<%=txtPassword.ClientID %>").value = "";
}
what it does is when I press the revert button on one control it disables the textbox on the other control - getelement fails to find the correct one.
How can I fix this?
If you are working on .net 4.0:
You can set ClientIDMode="Static" for your dynamically added controls. Also, you have to make sure you set unique ids for your controls.
I managed to find the solution.
The problem was that every time I added the acsx control with the javascript code it added multiple functions with the same name but the inside was different. when one control wanted to call its "own" function it just used the first one since they were all named the same.
My solution was to change the function from this:
function HandleUserChanged() {
document.getElementById("<%=btnRevert.ClientID %>").disabled = false;
document.getElementById("<%=txtPassword.ClientID %>").disabled = false;
}
to this:
function HandleUserChanged(btnRevertId, txtPasswordId, cellPasswordId) {
document.getElementById(btnRevertId).disabled = false;
document.getElementById(txtPasswordId).disabled = false;
}
and then in the c# code I add this:
txtUsername.Attributes.Add("onchange", "HandleUserChanged(\"" + btnRevert.ClientID + "\", \"" + txtPassword.ClientID + "\", \"" + cellPassword.ClientID + "\")");
This way each control know exactly which controls belong to him and sends the correct parameters to the function.
In my application after tapping on a one button it gives and alert.There are two button on alert window: 1. Cancel 2. Ok
I have tried to tap on OK by using the solution given on the forum but it dosen't work.
UIATarget.onAlert = function onAlert(alert) {
var title = alert.name();
UIALogger.logWarning("Alert with title '" + title + "' encountered!");
if (title == "Attention")
{
alert.buttons()["OK"].tap();
return true; // bypass default handler
}
return false; // use default handler
}
Function for handling alert dosen't called.Can anyone help me on this issue?
Thanks in advance.
UIATarget.onAlert = function onAlert(alert)
{
UIATarget.localTarget().delay(1);
UIALogger.logMessage("alertShown");
target.captureScreenWithName("AlertCaptured");
return true;
}
app.alert().buttons()["OK"].tap();
My solution to this problem was to add an one second delay after the function that handles the alert. You can not end your script with that function.
UIATarget.onAlert = function onAlert(alert) {
var title = alert.name();
UIALogger.logWarning("Alert with title '" + title + "' encountered.");
if (title == "Are you sure you want to delete this?") {
alert.buttons()["Delete"].tap();
return true; //alert handled, so bypass the default handler
}
return false;
}
target.delay(1);
Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.
try (mail_name.val() == "") change to (mail_name == "")
Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/
Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}