Jump to content


Photo

Username availability help - JS not making call's?

ajax javascript

  • Please log in to reply
2 replies to this topic

#1 travisco87

travisco87

    Member

  • Members
  • PipPip
  • 28 posts

Posted 02 December 2013 - 12:43 PM

Hello All,

 

I am doing a tutorial on username availability using AJAX for immediate username validation. I have made it from the tutorial but decided to use PDO instead of the old "mysql" statements just FYI, I do not think it play's into the issue but might. 

 

I keep getting this error from my Chrome console 

Uncaught TypeError: Object [object global] has no method 'addEvent'

I researched the error and made sure MooTools is up and running on my index page but this did not solve my issue. Any help would be much appreciated, here is my code

 

 

 

index.php

<html>
    <head>
        <title>Username Availability</title>
        <link rel="stylesheet" type="text/css" href="style/style.css">
        <script type="text/javascript" src="js/main.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
    </head>

<body>
<div id="container">
    <div id="content">
        <fieldset>
            <form method="post" action="js/json.php" id="signup">
                
                <ul class="form">
                    <li>
                        <label for="user_name">Username</label>
                        <input type="text" name="user_name" id="user_name" />
                    </li>
                    <li><input type="submit" value="Sign Up Now!" /></li>
                </ul>
            </form>
        </fieldset>
    </div>
</div>
    
</body>

</html>

main.js

window.addEvent('domready', function() {
    alert('The DOM is ready!');
    $('user_name').addEvent('keyup', function(){
        new Request.JSON({
            url: "json.php",
            onSuccess: function(response){
                if (response.action == 'success') {
                    $('user_name').removeClass('error');
                    $('user_name').addClass('success');
                    
                } else {
                    $('user_name').removeClass('success');
                    $('user_name').addClass('error');
                }
            }
        }).get($('signup'));
    });
});

json.php

<?php

    $config['db'] = array(
        'host'          => 'localhost',
        'username'      => 'username',
        'password'      => 'password',
        'dbname'        => 'database'
    );

    try {
        $DBH = new PDO('mysql:host=' . $config['db']['host']. ';dbname=' .$config['db']['dbname'], $config['db']['username'], $config['db']['password']);
        $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
        $DBH->exec('SET CHARACTER SET utf8');
    } catch (PDOException $e) {
        echo 'Connection failed: ' . $e->getMessage();
    }
    
    $result = null;
    
    $user_name = mysql_real_escape_string($_POST['user_name']);
    
    $stmt = $DBH->prepare("SELECT user_name FROM ajax_users WHERE user_name = :user_name");
    $stmt->bindParam(':user_name', $user_name);
    $stmt->execute();
    
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($result == 0){
        
        $result['action'] = 'success';
        
    } else {
        
        $result['action'] = 'error';
    }
    
    $result['user_name'] = $_POST['user_name'];
    
    echo json_encode($result);
    
?>

style.css

input.success{
    border: 3px solid #9ad81f;
}

input.error{
    border: 3px solid #b92929;
}

The database is called "stuff" and it has a table called "ajax_users". 

 

If something turned off? I am not sure where to go with this one. Thanks for the help in advance 



#2 gristoi

gristoi

    Advanced Member

  • Members
  • PipPipPip
  • 842 posts

Posted 03 December 2013 - 03:55 AM

$('user_name') should be $('#user_name')


To err is human... to really foul up requires the root password

#3 travisco87

travisco87

    Member

  • Members
  • PipPip
  • 28 posts

Posted 03 December 2013 - 12:44 PM

It is not changing the input section. For some reason it wont let me change the border. I changed all of the tags to #user_name but still nothing for the input box border color change. 






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com