0

Mi problema parece ser sencillo pero no puedo lograr que funcione como quisiera. Ya que quiero registrar el valor de un rich text. El formulario solo tiene un rich text usando CKEditor y un boton para registrar.

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
    </head>
    <body>
    <div class="container">
        <form>
            <h2>Register demo</h2>
            <div class="form-group row">
                <textarea name="editor1"></textarea>
            </div>
            <div class="form-group row">
                <button class="btn btn-danger" onclick="registrar()">Agregar</button>
            </div>

            <script>
                function registrar(){
                    var data = CKEDITOR.instances.editor1.getData();
                    $.ajax({
                        type : "GET",
                        url : "/apolo/registrar",
                        contentType: 'application/json',
                        data: {
                            "data" : data
                        },
                        success: function(result) {
                            alert(result);
                        },
                        error : function(e) {
                            alert("error");
                        }
                    });
                }
            </script>
            <script>
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

Al registrar quiero que me redireccione a otra vista donde esta la lista de post registrados.

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Demo</h1>
        <div th:each="test : ${tests}">
            <span th:utext="${test.texto}"></span>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

En mi controlador hago un return hacia la vista, pero no funciona, el result que que va al ajax me muestra un html y la url tiene la data registrada.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

import com.example.richtext.demo.entity.Test;
import com.example.richtext.demo.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;

@Controller
public class TestController {

    @Autowired
    private TestService testService;

    @GetMapping(value = {"/index", "/"})
    public String index(Model model){
        Test test = new Test();
        model.addAttribute("test", test);
        return "index";
    }

    @RequestMapping(value = "/registrar", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public String registrar(@RequestParam("data") String data){
        System.out.println("entro registrar");
        System.out.println("data: "+data);
        Test test = new Test();
        test.setTexto(data);
        testService.registrar(test);
        return "list";
    }

    @GetMapping(value = "/list")
    public String list(Model model){
        List<Test> tests = (List<Test>) testService.listTest();
        model.addAttribute("tests", tests);
        return "list";
    }
}

Lo que veo que funciona es que si registra y cuando ingreso a la lista por url tambien me salen los post.

1
  • ¿Por qué piensas que lo que describes está relacionado con el CKEditor y no es simplemente Spring?
    – SJuan76
    el 5 sep. 2018 a las 9:45

1 respuesta 1

0

A ver, creo que te confundes.

Spring recibe una petición, y devuelve una página web. Funciona correctamente.

El funcionamiento "normal" del navegador es hacer una petición al servidor, recibir un HTML de respuesta y mostrarlo.

Ajax está pensado para hacer peticiones sin redirección. La respuesta no se muestra automáticamente; se pasa a javascript para que el javascript decida que hacer según su lógica.

En este caso, el servidor te envía la nueva página web; el navegador la pasa al handler success y éste la muestra en un alert.

Si quieres navegar a una nueva página al enviar el formulario no uses Ajax, haz un submit normal y corriente.

En nota aparte, las peticiones GET:

  • Se supone que se usan para operaciones que no cambian datos (idempotentes). Si vas a guardar el texto en BD, GET no es el método que toca.

  • Tienen restricciones en el tamaño de los parámetros porque los parámetros pasan como parte de la URL, y hay límites -que dependen del servidor- en lo grandes que las URLs pueden ser. Un texto libre no debería ir por GET.

3
  • en principio intente hacerlo por el submit, con las propiedades del form, pero a mi controlador llegaba null el valor del textarea, o desconozco cual seria la forma para tomar el valor del richt text con thymeleaf a diferencia de un simple textarea, intente con th:value, th:field y seguia devolviendo null.
    – Santiago
    el 5 sep. 2018 a las 19:08
  • Bueno, pues ésa es la pregunta que deberías hacer (en una pregunta separada, por favor). Esto que intentas aquí es como si se te estropeara el coche de carreras y, en lugar de intentar repararlo, quisieras quedar campeón de F1 con un tractor.
    – SJuan76
    el 5 sep. 2018 a las 22:11
  • Tienes razón, aparte de que no intente con otras alternativas, a las finales probe con el SummerNote y con solo poner th:field="*{texto}" ya no me salta error.
    – Santiago
    el 6 sep. 2018 a las 2:48

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.