Jquery .addClass() function doesn't work in chrome but it works fine in Mozilla

Question

i want to add class to my input tag using addClass method in jquery but its not working in chrome !!!

`
    $('#username-signup').blur(function() {

            var tempusername = $('#username-signup').val();

            $.ajax({
                type: "POST",
                url: "includes/identification.php",
                data: { username: tempusername },
                dataType: "text",
                success: function(response) {
                    //console.log('success');
                    if (response == 'n') {
                        //console.log('n');
                        $('#username-signup').removeClass('identication-y');
                        $('#username-signup').addClass('identication-n');

                    } else {
                        //console.log('else');
                        $('#username-signup').removeClass('identication-n');
                        $('#username-signup').addClass('identication-y');

                    }
                },
                error: function() {

                    //console.log('error');
                },
                timeout: 5000

            });



        });

//html code :

<input type="text" name="username" class="form-control" id="username-signup">



//css :

.identication-n {
    border-color: #ff3547;
}

.identication-y {
    border-color: limegreen;
}



//my php side code :


<?php 
  $x = 'n';
  echo $x;
?>
`

what is going on ? whats the difference between chrome and mozilla? i'm also using latest version of "jquery"

What does the HTML for the element with id `username-signup` look like? — devlin carnate, Nov 01 '19 at 22:29
@PHMLa I can't find anything wrong in your code to not work in chrome .. Also if all `console.log`s works in your code the `addClass` should work fine — Mohamed-Yousef, Nov 01 '19 at 23:35

score 0 · Answer 1 · answered Nov 02 '19 at 00:20

You code seems to be working fine on Chrome and FF. Maybe you can try a different approach which easier in my opinion than adding and removing class. You could use data-* attributes to achieve what you want.

See this example:

  $('#username-signup').blur(function() {

    var tempusername = $('#username-signup').val();

    $.ajax({
      type: "POST",
      url: "https://jsonplaceholder.typicode.com/posts",
      data: {
        username: tempusername
      },
      dataType: "text",
      success: function(response) {
        console.log(response);

        if (typeof response == 'string') {
          $('#username-signup').attr('data-status', 'n');
        } else {
         $('#username-signup').attr('data-status', 'y');

        }
      },
      error: function() {

        //console.log('error');
      },
      timeout: 5000

    });
  });

input[data-status='n'] {
  border-color: red;
}

input[data-status='y'] {
  border-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" class="form-control" id="username-signup" data-status="">

its a good solution but im wandering why my code is not working in chrome ! im kinda sure something is wrong with my chrome — PHM La, Nov 02 '19 at 08:59
Try it on a chrome from a different computer. Or uninstall then install Chrome. Or disable all extensions. Or run Chrome in safe mode. — Kalimah, Nov 02 '19 at 09:18

score 0 · Answer 2 · answered Nov 02 '19 at 00:30

I suspect something else is causing Chrome to fail before or during the AJAX call and response is not being populated or blur is not bubbling up. Try the following code and update your post. Also review your Network tab before and after the ajax call to see if maybe you're sending bad data or getting an error in the response from PHP.

$(function() {
  $('#username-signup').blur(function(e) {
    console.log("Username Signup Blue Event");
    $.ajax({
      type: "POST",
      url: "includes/identification.php",
      data: {
        username: $('#username-signup').val()
      },
      dataType: "text",
      success: function(response) {
        console.log(response);
        if (response == 'n') {
          //console.log('n');
          $('#username-signup').removeClass('identication-y');
          $('#username-signup').addClass('identication-n');
        } else {
          //console.log('else');
          $('#username-signup').removeClass('identication-n');
          $('#username-signup').addClass('identication-y');
        }
      },
      error: function(x, t, err) {
        console.log('Ajax Error:', x, t, err);
      },
      timeout: 5000
    });
  });
});

.identication-n {
  border-color: #ff3547;
}

.identication-y {
  border-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" class="form-control" id="username-signup">

actually i tried `$('#username-signup').addClass('identication-n');` out of any function even before document.ready! still not working in chrome! the weird thing is that it works fine in mozilla! — PHM La, Nov 02 '19 at 08:44

PHM La · Accepted Answer · 2019-11-09T12:05:37.797

0

so as you can see codes are fine so i cleared Browser Data in chrome using link bellow and now everything is working, IDK what was the actual problem but here is a solution.

chrome://settings/clearBrowserData

clearing last 24 hours was enough for me .

edited Nov 09 '19 at 12:05

answered Nov 02 '19 at 09:21

PHM La

198
3
11

chek this out ! => https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – PHM La Nov 04 '19 at 10:24

Jquery .addClass() function doesn't work in chrome but it works fine in Mozilla

3 Answers3