0

El problema que tengo es que cuando registro un administrador ejecuto una función JS con Ajax y funciona perfecto del lado del servidor, el problema que tengo es que cuando retorna, la página se recarga y es justamente lo que espero que no suceda, igualmente si los datos que se ingresan (contraseña) no cumplen con las condiciones especificadas tambien la pagina se recarga, lo he intentado hacientolo con POST y GET sin obtener resultados satisfactorios.

¿Qué puedo estar haciendo mal?

Código JS:

function CreateAdministrator() {

    var name = $('#name').val();
    var lastName = $('#lastName').val();
    var user = $('#user').val();
    var a = $('#password').val();
    var b = $('#password2').val();

    if (a !== b) {
        alert('Los passwords deben ser identicos');
        return false;
    } else if (password.length < 10) {
        alert('El password debe contener minimo 10 caracteres');
        return false;
    }

    var may = false;
    var min = false;
    var num = false;
    for (var i = 0; i < a.length; i++) {
        if (a.charCodeAt(i) >= 65 && a.charCodeAt(i) <= 90)
            may = true;
        else if (a.charCodeAt(i) >= 97 && a.charCodeAt(i) <= 122)
            min = true;
        else if (a.charCodeAt(i) >= 48 && a.charCodeAt(i) <= 57)
            num= true;
    }

    if (min === false && may === false) {
        CancelSubmit( 'El password debe contener letras');
        return false;
    }
    if (num === false) {
        CancelSubmit( 'El Password debe contener numeros');
        return false;
    }

    $.ajax({
        type: "GET",
        url: "About.aspx/CreateAdministrator",
        data: JSON.stringify({ name: name , lastName: lastName, user: user, password: a }),
        contentType: "application/json; chartset=utf-8",
        datatype: "json",
        success: function (data) {
            var respuesta = JSON.parse(data.d);
            if (respuesta.Description === 'Administrador creado satisfactoriamente') {
                console.log(respuesta);
                alert(respuesta.Description);
                NavePage('Default.aspx');
            }
            else {
                alert(respuesta.Description);
            }
        },
        complete: function () {
            console.log('CREATEADMINISTRATOR');
        }
    }); 

}

function CancelSubmit(msj) {
    document.getElementById('validacion').innerHTML = msj;
    document.getElementById('validacion').style.display = 'block';
    setTimeout(HideValidation, 10000);
}

function HideValidation() {
    document.getElementById('validacion').style.display = 'none';
    $('#password').val('');
    $('#password2').val('');
}

function NavePage(page) {
    window.location.href = page;
}

Código Html:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

     <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
     <link href="/Content/bootstrap.min.css" rel="stylesheet" />
     <link href="/Content/bootstrap.css" rel="stylesheet" />
     <link href="/Content/css/global.css" rel="stylesheet" />
     <script src="/Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
     <script src="/Scripts/jquery-3.3.1.js" type="text/javascript"></script>
     <script src="/Scripts/js/global.js" type="text/javascript"></script>


 <div class="row" style="margin-top:5%;">

       <div class="col-md-4">
          <div class="divBan container">
          <h4>Nuevo Administrador</h4><br>
          <input type="text" id="name" name="name" placeholder="Ingrese Nombre" required class="form-control" autocomplete="off"/><br />
          <input type="text" id="lastName" name="lastName" placeholder="Ingrese Apellido" required class="form-control" autocomplete="off"/><br>
          <input type="text" id="user" name="user" placeholder="Ingrese Nombre de Usuario" required class="form-control" autocomplete="off"/><br />
          <label id="validacion"  class="validacionField"></label>
          <input type="password" id="password" name="password" placeholder="Ingrese Password" required class="form-control" />
          <label id="msjPassword" class="lblMsj">10 caracteres minimo, combine letras y numeros</label><br />
          <input type="password" id="password2" name="password2" placeholder="Confirme Password" required class="form-control" /><br />

          <label class="checkbox-inline"><input type="checkbox" id="check" required class="btn btn-primary" /> No soy un robot</label><br /><br />
          <input type="submit" id="registrar" value="Registrar" class="voton btn btn-primary" onclick="CreateAdministrator();" />
          <input type="reset" id="cancelar" value="Cancelar" onClick="NavePage('Default.aspx');" class="voton btn btn-primary" />
       </div>

       </div>
    <br /><br />

</div>

</asp:Content>

Código C#:

 [WebMethod]
        public static string CreateAdministrator (string name , string lastName , string user, string password)
        {
            ResponseWM response = new ResponseWM();
            response.Description = "Fallo crear administrador";
            response.Result = false;
            try
            {
                password = EngineTool.ConvertirBase64(user + password);
                EngineProject Funcion = new EngineProject();
                Administrator adm = Funcion.SetAdministrator(name, lastName, user, password);
                EngineDb Metodo = new EngineDb();
                bool result = Metodo.CreateAdministrator(adm);
                if (result)
                {
                    response.Description = "Administrador creado satisfactoriamente";
                    response.Result = true;
                }
            }
            catch { }

            return JsonConvert.SerializeObject(response);
        }

1 respuesta 1

1

El problema es que defines un boton como type=submit y esto es lo que genera quenla pagina se actualice

Aqui tienes varias alternativas

1.Dejar de usar un boton type=submit cambiandolo por un boton comun

<input type="button" id="registrar" value="Registrar" class="voton btn btn-primary" onclick="CreateAdministrator();" />

2.Retornar un false para detener el evento

function CreateAdministrator() {

    //resto codigo

    return false;
}

es importante el return en el onclick

<input type="submit" id="registrar" value="Registrar" class="voton btn btn-primary" onclick="return CreateAdministrator();" />

En este casi siempre retornas un false porque no quieres que se realice el submit

3.Usar el e.preventDefault() de jquery

    <input type="submit" id="registrar" value="Registrar" class="voton btn btn-primary" />

defines el evento en codigo javascript

<script>
   $(function(){

       $('nombre_Id_form').submit(function(e)){
          CreateAdministrator();
          e.preventDefault();
       }
   });
</script>

jquery submit

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.