CODEWITHSUNDEEP
javascriptgoogle-chromejquery
user3109875
user3109875

Reputation: 828

Javascript code not working in chrome

I'm Using this JavaScript code with JQuery Library, Now this doesn't work in Google Chrome, works in Apple Safari and FireFox (As tested) 

$(document).on('blur', '#UserNameInput', function(e) {
    //alert ('this')
    if ($(this).val().length < 6 ) {
        $('#UnameCheck').html('That user anme is too short... please try again with something more than 6 Charecters')
        } else {
    $(this).css('background-image', 'url(../images/IMG_8485.GIF)');
    $('#UnameCheck').html('Please wait while checking your User Name').css('color', '#F3F').show('fast');   
    var Uname = ($('#UserNameInput').val())
    var data = {     // create object
            l : Uname
        }
    $.ajax({
    type:"POST",
    data: data,
    complete: function(){
        $('#UserNameInput').css('background-image', '')
        },
    url:"../php/UserNameCheck.php"
    }).done(function(feedback){
    $('#UnameCheck').html(feedback)
    });
    }
});

Upvotes: 0

Views: 189

Answers (2)

Jonast92
Jonast92

Reputation: 4967

The blur event is incomplete for FF Mac, Saf Win, Chrome Win and Chrome Mac.

As listed in these event compatibility tables.

Using other complete event listeners like mouseleave and mouseup will fix the problem.

Upvotes: 0

sdespont
sdespont

Reputation: 14025

In your case, to be complient with Chrome, you need to add the mouseup event, or/and mouseleave : 

$(document).on('blur mouseup mouseleave', '#UserNameInput', function (e) {
    //alert ('this')
    if ($(this).val().length < 6) {
        $('#UnameCheck').html('That user anme is too short... please try again with something more than 6 Charecters');
    } else {
        $(this).css('background-image', 'url(../images/IMG_8485.GIF)');
        $('#UnameCheck').html('Please wait while checking your User Name').css('color', '#F3F').show('fast');
        var Uname = ($('#UserNameInput').val());
        var data = { // create object
            l: Uname
        };
        $.ajax({
            type: "POST",
            data: data,
            complete: function () {
                $('#UserNameInput').css('background-image', '');
            },
            url: "../php/UserNameCheck.php"
        }).done(function (feedback) {
            $('#UnameCheck').html(feedback);
        });
    }
});

Upvotes: 2

Related Questions