search

sourcebitsllc / chocolatechip-ui

Mobile Web App Framework
www.chocolatechip-ui.com
MIT License
616 stars 88 forks source link

Cannot read property 'classList' of undefined #43

Closed derylihs closed 10 years ago

derylihs commented 10 years ago

after second time send data i see the error

this is my code

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title>Demo</title>

   <?php
      $agent = $_SERVER['HTTP_USER_AGENT'];
      $browser = null;
      $agent = $_SERVER['HTTP_USER_AGENT'];
      $browser = null;

      if (preg_match("/android/i", $agent))
       {
         echo '<link rel="stylesheet" href="css/chui-android-3.5.1.css">';
       }
       elseif (preg_match("/Trident/i", $agent) && (preg_match("/MSIE 10/i", $agent) || preg_match("/MSIE 11/i", $agent)))
       {
         echo '<link rel="stylesheet" href="css/chui-win-3.5.1.css">';
       }
       elseif (preg_match("/Apple/i", $agent))
       {
         echo '<link rel="stylesheet" href="css/chui-ios-3.5.1.css">';
       }
   ?>
</head>
<body style="" class="isAndroid isDesktopChrome"><nav id="global-nav"></nav>
    <nav class="current">
      <h1>Login</h1>    
    </nav>
    <article class="current">
      <section>
        <form id="login" >
          <h2><img src="images/assets/logo_m.png"></h2>
            <div id="warning">

            </div>
          <ul ui-implements="form" class="list">
            <li class="comp">
              <div>
                <label for="userName">User name:</label>
              </div>
              <aside>
                <input id="username" class="form-control" type="text" name="user.username" autocapitalize="off" autocorrect="off" required>
              </aside>
            </li>
            <li class="comp">
              <div>
                <label for="password">Password:</label>
              </div>
              <aside>
                <input id="password" class="form-control" type="password" name="user.password" autocapitalize="off" autocorrect="off" required>
              </aside>
            </li>
          </ul> 

          <a id="btn-login" class="button">Login</a>
          <a href="javascript:void(null)" class="button" id="goToForgotPassword">Forgot password?</a>
        </form>
      </section>
    </article>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="js/chui-3.5.1.min.js"></script>

    <script type="text/javascript">

   $( "#btn-login" ).click(function() {

                        var datalogin = {
                            username: $("#username").val(),
                            password: $("#password").val()
                        };

                         $(document).ajaxStart(function () {
                            $.UIPopup({empty: true});
                            $('.popup').UIBusy({'color':'orange', 'size': '80px'})
                          });

                          $(document).ajaxComplete(function () {
                              $('.popup').UIPopupClose()
                          });

                        $.ajax({
                            type: "POST",
                            url: "remote/login.php",
                            data: datalogin,dataType: 'json',
                            success: function(forms)
                            {
                                if(forms == '1')

                                        $("#warning").html("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong><i class='fa fa-check'></i> Success!</strong> Will be redirect in 5 sec <i class='icon-spin icon-spinner'></i> <meta http-equiv='refresh' content='2;URL=index.php'></div>");

                                else

                                        $("#warning").html("<strong>Error!</strong> Wrong username or password</div>");

                            }
                        });
  });            
          </script>
</body>
sourcebits-robertbiggs commented 10 years ago

So this is on an Android device? You say you're doing and Ajax request, please post the exact error message if possible so I can get a better idea what is going on.

derylihs commented 10 years ago 
Uncaught TypeError: Cannot read property 'classList' of undefined chui-3.5.1.js:1135
a.fn.extend.UIPopupClose chui-3.5.1.js:1135
(anonymous function) login.php:70
jQuery.event.dispatch jquery-latest.js:5095
elemData.handle jquery-latest.js:4767
jQuery.event.trigger jquery-latest.js:5007
done jquery-latest.js:8253
callback jquery-latest.js:8778

i dont understand this, help me to explain this error

ty for respond

sourcebits-robertbiggs commented 10 years ago

It looks like you're trying to close a popup that no longer exists, therefore it can't find the class for it. Are you removing the popup at some point?

derylihs commented 10 years ago

i remove it when ajax load complete

 $(document).ajaxComplete(function () {
                              $('.popup').UIPopupClose()
                          });
sourcebits-robertbiggs commented 10 years ago

Actually, you've uncovered a bug. Here's how to fix it. Open up in src/chui/popup.js Go to line 1083: Change: if (!this[0].classList.contains('popup')) return; To: if (!this && !this.classList.contains('popup')) return; run grunt chuijs to recompile chui.js You should be fine. I'll roll this into 3.5.2

derylihs commented 10 years ago

ooo this is a bug..

thank you for your respond sir

derylihs commented 10 years ago

i found this when loading the ajax..

this is first time i send post via ajax ss1

second time send post via ajax ss2

and third time send post via ajax ss3

so when i send 4 time 5 time 6 time the loading popup show 4 5 6

sourcebits-robertbiggs commented 10 years ago

In your success, when you use $.UIUnblock, also do: $('.busy').remove();

sourcebits-robertbiggs commented 10 years ago

Oh, looks like you also not using $.UIUnblock. So when you do an Ajax request, have a success and an error function. In both make sure you have these two lines: $.UIUnblock(); $('.busy').remove(); That way if there is success or error the overlay and busy indicator get removed.

I hope that's clear.

sourcebits-robertbiggs commented 10 years ago 
$.ajax({
   type: "POST",
   url: "remote/login.php",
   data: datalogin,dataType: 'json',
   success: function(forms) {
      $.UIUnblock();
      $('.busy').remove();
      // Handle the success:
   },
   error: function() {
      $.UIUnblock();
      $('.busy').remove();
      // Handle error
   }
});
derylihs commented 10 years ago

still get some problem sir always show twice when i got error twice

sourcebits-robertbiggs commented 10 years ago

I"m not sure what you're saying. What shows twice, and how are you getting an error twice? Do you have error messages?

derylihs commented 10 years ago

sorry i mean when i send ajax post twice the loading popup show twice

sourcebits-robertbiggs commented 10 years ago

Are you on Skype?

derylihs commented 10 years ago

yes account name: deryl.oioi

sourcebits-robertbiggs commented 10 years ago

Actually it looks like you had a syntax error in your code. You have the following code:

$( "#btn-login" ).click(function() {

var datalogin = {
    username: $("#username").val(),
    password: $("#password").val()
};

$(document).ajaxStart(function () {
    $.UIPopup({empty: true});
    $('.popup').UIBusy({'color':'orange', 'size': '80px'})
});

$(document).ajaxComplete(function () {
    $('.popup').UIPopupClose()
});

$.ajax({
    type: "POST",
    url: "remote/login.php",
    data: datalogin,dataType: 'json',
    success: function(forms) {
        if(forms == '1') {
            $("#warning").html("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong><i class='fa fa-check'></i> Success!</strong> Will be redirect in 5 sec <i class='icon-spin icon-spinner'></i> <meta http-equiv='refresh' content='2;URL=index.php'></div>");
        } else {
            $("#warning").html("<strong>Error!</strong> Wrong username or password</div>");
        }
    });
});

Get rid of the ajaxComplete and do the following:

$( "#btn-login" ).click(function() {
    var datalogin = {
        username: $("#username").val(),
        password: $("#password").val()
    };

    $(document).ajaxStart(function () {
        $.UIPopup({empty: true});
        $('.popup').UIBusy({'color':'orange', 'size': '80px'});
    });

    $.ajax({
        type: "POST",
        url: "remote/login.php",
        data: datalogin,dataType: 'json',
        success: function(forms) {
            if(forms == '1') {
                $('.popup').UIPopupClose();
                $("#warning").html("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong><i class='fa fa-check'></i> Success!</strong> Will be redirect in 5 sec <i class='icon-spin icon-spinner'></i> <meta http-equiv='refresh' content='2;URL=index.php'></div>");
            } else {
                $('.popup').UIPopupClose();
                $("#warning").html("<strong>Error!</strong> Wrong username or password</div>");
            }
        },
        error: function() {
            $('.popup').UIPopupClose();
            // Handle error in ajax request.
            // Change this to what you need:
            alert('Had a problem performing request.');
        }
    });
});
derylihs commented 10 years ago

still same problem sir

sourcebits-robertbiggs commented 10 years ago

Skype: rombiggs