jQuery addClass на $ .post - PullRequest
Новая
       16

jQuery addClass на $ .post

1 голос
/ 18 марта 2010

Я в основном пытаюсь создать небольшую регистрационную форму. Если имя пользователя уже занято, я хочу добавить «красный» класс, если нет, то «зеленый».

PHP здесь работает нормально и возвращает либо «ДА», либо «НЕТ», чтобы определить, нормально ли это.

CSS: 

input {

 border:1px solid #ccc;
}
.red {

 border:1px solid #c00;
}
.green {

 border:1px solid green;
 background:#afdfaf;
}

Я использую Javascript: 

 $("#username").change(function() { 

             var value = $("#username").val();

  if(value!= '') {
   $.post("check.php", {
    value: value
   }, function(data){

   $("#test").html(data);

    if(data=='YES') {
     $("#username").removeClass('red').addClass('green');
    } if(data=='NO') {
     $("#username").removeClass('green').addClass('red');
    }
   });
  }  
 });

У меня тоже есть document.ready ... Все отлично работает, потому что #test div html меняется либо на "YES", либо на "NO", кроме последней части, где я проверяю, какое значение данные есть. Вот php: 

 $value=$_POST['value'];

 if ($value!="") {
  $sql="select * FROM users WHERE username='".$value."'";
  $query = mysql_query($sql) or die ("Could not match data because ".mysql_error());
  $num_rows = mysql_num_rows($query);

  if ($num_rows > 0) {
   echo "NO";
  } else {
   echo "YES";
  }
 }

Ответы [ 3 ]

0 голосов
/ 18 марта 2010

@ Джимми - Смена класса просто не происходит.

@ Gaurav - С помощью вашего кода граница изменяется, но она всегда устанавливается в красный цвет, независимо от того, являются ли данные «ДА» или «НЕТ».

Это должно быть что-то с проверкой данных? Но я не понимаю, как ...

0 голосов
/ 18 марта 2010

Вот базовый пример того, как я думаю, вы должны реализовать свою функцию. Код довольно понятен, но вы можете спросить, если что-то неясно. 

<?php
function readArray( $arr, $key, $default ='' ) { return isset($arr[$key]) ? $arr[$key] : $default ; }
function error( $message ){ echo "{ result: false, message: \"$message\" }"; exit; }
function success( $isFound ){ echo "{ result: true, exists: " . ($isFound?'true':'false') . "}" ; exit; }

if( sizeof( $_POST ) ) {
    $value = readArray( $_POST, "value", false ) ;
    if( false === $value ) error( "Empty username" ) ;

    @$db = mysql_connect("localhost","root","") ;
    if( !$db ) error( "Can't connect to database" ) ;

    @$result = mysql_select_db( "mysql" ) ;
    if( !$result ) error( "Can't select database" ) ;

    $query = "SELECT COUNT(User) as count FROM user WHERE User='" . mysql_real_escape_string( $value ) . "'";
    @$result = mysql_query( $query ) ;
    if( !$result ) error( "Can't execute query: " . mysql_error() ) ;

    success( readArray( mysql_fetch_assoc( $result ), "count" ) > 0 ) ;
}
?>
<script src="jquery.js" />
<style><![CDATA[
input {
    border:1px solid #ccc;
}
input.red {
    border:1px solid #c00;
}
input.green {
    border:1px solid #0c0;
}
]]></style>

<script>
$(document).ready(function(){
    var updateStyle = function() {
        var value = $("#username").val() ;
        if( !value ) return ;
        $.post("", {
            value: value
        }, function(data){
            var obj = eval( "(" + data + ")" ) ;
            if( obj.result ) {
                if( obj.exists ) {
                    $("#username").addClass('red');
                    $("#test").html( "User already exists" ) ;
                } else {
                    $("#username").addClass('green');
                    $("#test").html( "Username available" ) ;
                }
            } else {
                $("#test").html( obj.message ) ;
            }
        });
    }

    var timeout ;
    $("#username").keydown(function() {
        $("#test").html("") ;
        $("#username").attr("class", "") ;
        clearTimeout( timeout ) ;
        timeout = setTimeout( updateStyle, 500 ) ;
    });
});
</script>

<input id="username" name="username" value="" />
<div id="test"></div>
0 голосов
/ 18 марта 2010

попробуйте это 


if(data=='YES') 
  {
     $("#username").attr('style','').attr('style', 'border:1px solid green;background:#afdfaf;');
  } 
else
  {
     $("#username").attr('style','').attr('style', 'border:1px solid #c00;');
  }

дайте мне знать, если это работает.

...