Problema con jquery utilizando ajax

[Jask]

Muy buenas.

Estoy haciendo una prueba con jquery y ajax y bueno es muy sencillo la cosa es que inserto un texto en un campo, y si pongo algo el campo tendría que ponerse con una clase el cual hace que le aparezca un color verde, si no pues un color rojo, más que nada trasteando.

Este es mi código jQuery:

Código Javascript:

$(document).ready(function(){
    $('#addCity').click(function() {
 
        $('#cityname').addClass('in_processing');
        
        $.ajax({
            type : 'POST',
            url : 'post.php',
            dataType : 'json',
            data: {
                email : $('#cityname').val()
            },
            success : function(data){
                if(data.error === true){
                    alert("entró :D");
                }
                else{
                    $('#cityname').removeClass().addClass('in_submitted');
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                $('#cityname').removeClass().addClass('in_error');
            }
        });
        return false;
    });
});
 

Este el código HTML del formulario

Código HTML:

<ul class="form_fields_container">
                    <li><label>Ciudad</label> <div class="form_input"><input name="cityName" id="cityname" type="text"></div></li>
                    </ul>
 

Y este el PHP que lee lo que le pasa el jQuery

Código PHP:

  <?php 
 
$return['msg'] = 'You\'ve entered: ' . $_POST['email']; 
 
echo json_encode($return); 
 
?>   

La cosa es que no veo el error :S si alguien me puede echar un cable se lo agradecería.

Un saludo :)

[Jask]

Intenté buscar una solución al respecto probando diferentes opciones pero me sigue saliendo lo mismo y la verdad no sabría encontrar el error.. :S Me estoy volviendo loco con las 4 líneas . :(

A ver si alguien se da cuenta porque lo que es yo ..

Gracias

[Naahuel]

Mirá, lo probé y a mi me funciona.

Cuando hago click en el elemento #addCity, se le agrega la clase "in_processing" al input. Cuando termina, se cambia esa clase por la de "in_submitted".

¿Cual es exactamente el problema? ¿Será un problema de CSS?

[Jask]

Iniciado por Naahuel

Mirá, lo probé y a mi me funciona.

Cuando hago click en el elemento #addCity, se le agrega la clase "in_processing" al input. Cuando termina, se cambia esa clase por la de "in_submitted".

¿Cual es exactamente el problema? ¿Será un problema de CSS?

Es muy raro porque lo tengo implementado y nada.

La cosa es que si el campo está vacío y le doy a enviar tiene que salir el campo rojo, (una clase que le da ese color) si no el verde.. :S pero siempre sale rojo.

Lo revisaré :S

Gracias

[Naahuel]

En el código que posteaste no hay NADA que indique un error en caso de que el campo esté vacío.

Si sale siempre en rojo, es porque la clase in_submitted tiene ese estilo.

Tampoco entiendo esto:

Código Javascript:

if(data.error === true){
                    alert("entró :D");
                }
 

data.error no existe. data sólo tiene msg (el cual lo generaste en el PHP)

[Naahuel]

Mm. Viéndolo otra vez, seguramente se está ejecutando la función en error. Si es así, el error es con la consulta.

Código Javascript:

error : function(XMLHttpRequest, textStatus, errorThrown) {
                $('#cityname').removeClass().addClass('in_error');
            }
 

Poné un alert o algo ahí. Si se ejecuta, es que no se está completando el pedido AJAX. ¿Estás ejecutando el código localmente o en servidor?

[Jask]

Iniciado por Naahuel

Mm. Viéndolo otra vez, seguramente se está ejecutando la función en error. Si es así, el error es con la consulta.

Código Javascript:

error : function(XMLHttpRequest, textStatus, errorThrown) {
                $('#cityname').removeClass().addClass('in_error');
            }
 

Poné un alert o algo ahí. Si se ejecuta, es que no se está completando el pedido AJAX. ¿Estás ejecutando el código localmente o en servidor?

Con la consulta? En el php?

Lo estoy ejecutando en localhost, rollo http.//localhost/proyecto

El php que "consulta" es este:

Código PHP:

  <?php 
 
$return['msg'] = 'You\'ve entered: ' . $_POST['email']; 
 
echo json_encode($return); 
 
?>   

No hay más, es una simple prueba :S

Modifiqué el ajax.js

Código Javascript:

$.ajax({
            type: 'POST',
            url: 'post.php',
            dataType: 'json',
            data: {
                email : $('#cityname').val()
            },
            success : function(){
                alert('entró')
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                $('#cityname').removeClass().addClass('in_error');
            }
        });
 

Y tampoco :S !! Vaya cosa más rara..

Gracias