1

I am implementing Put method with Ajax:

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#submitPut').click(  function () {
                console.log("click");
                var sendName = $('#name').val();
                var sendDescription = $('#description').val();

                $.ajax({
                    url: '/musicalstyle',    //Your api url
                    type: 'PUT',   //type is any HTTP method
                    data: {
                        name: sendName,
                        description: sendDescription,

                    },      //Data as js object
                    success: function () {
                    }
                })
                ;

            });
        });
    </script>
</head>
<body>
    <form> 
        <label for="name">Nombre</label>
        <input type="text" id="name"  />
        <label for="description">Descripción</label>
        <input type="text" name="description" id="description"/>
        <input id="submitPut" type="button"  value="SubmitPut">

    </form>
</body>
</html>

This form is working fine but when introduce it on real environment the script isn't called (my view in production environment is using Thymeleaf and Boostrap). It's like <button class="btn btn-primary" id="submitPut" type="button">Actualizar</button> isn't triggering the submitPut function.

Here form of production environment:

    <form>
        <div class="form-group row">
            <label for="name" class="col-sm-2 col-form-label">Nombre</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="name">
            </div>
         </div>
         <div class="form-group row">
            <label for="description" class="col-sm-2 col-form-label">Descripción</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="description">
            </div>
          </div>
          <br>
         <button class="btn btn-primary" id="submitPut" type="button">Actualizar</button>
    </form>

How can I force to button call ajax function?

Thanks,

onox
  • 21
  • 7
  • your code is working fine , does your browser console has any error? Also does this form is dynamically generated? – Swati May 20 '20 at 13:48
  • @Swati this form isn't generated dinamically but other forms in the same page are generated. In additional, browser console is showing the next error: ```Uncaught TypeError: $.ajax is not a function at HTMLButtonElement. (musicalstyle:42) at HTMLButtonElement.dispatch (VM26 jquery-3.5.1.slim.min.js:2) at HTMLButtonElement.v.handle (VM26 jquery-3.5.1.slim.min.js:2)``` – onox May 20 '20 at 15:32
  • Could you show how you import JQuery library and the whole script in which you call the ajax function?? – Eric May 20 '20 at 17:51
  • Check [this](https://stackoverflow.com/a/44212249) answer this will solve your problem. – Swati May 20 '20 at 18:03
  • @Eric I am importing with ```

    ``` And I am only call the ajax function in form below

     – onox May 20 '20 at 21:42
  • That is because you use slim version of jquery. Use the standard file. – Eric May 20 '20 at 22:05
  • 1
    @Swati seems that as you show, I should import the JQuery with `````` – onox May 20 '20 at 22:15
  • @onox check and see it should work. – Swati May 21 '20 at 03:56
  • Are we CERTAIN there is ONLY ONE button on the webpage with the id = "submitPut"? – Kasey Chang May 21 '20 at 07:59
  • There was only a button which id is submitPut. The ajax script didn't called because JQuery wasn't imported correctly. – onox May 21 '20 at 14:01

3 Answers3

0

Your id of input is submit while you called onclick function on query, submitPut. So, 

<input id="submitPut" type="button"  value="SubmitDelete"/>
Biplove Lamichhane
  • 3,337
  • 3
  • 11
  • 28
0

@Biplove I have eddited my comment. Id of input is equal than name of onclick function.

onox
  • 21
  • 7
0

After import JQuery with <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script>window.jQuery || document.write('<script src="../js/jquery.slim.min.js"> <\/script>')</script><script src="../js/bootstrap.bundle.js"></script></body>

Ajax is executed.

My method Put in Controller should redirect to another view and seems to be redirecting. The Spring logs show:

2020-05-21 16:04:15.367 DEBUG 552 --- [nio-8182-exec-9] o.s.web.servlet.DispatcherServlet        : PUT "/musicalstyle", parameters={masked}
2020-05-21 16:04:15.368 DEBUG 552 --- [nio-8182-exec-9] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.musicnet.springboot.controller.SystemAdministratorController#updateStyle(Style, Model)
2020-05-21 16:04:15.558 DEBUG 552 --- [nio-8182-exec-9] o.s.w.s.v.ContentNegotiatingViewResolver : Selected '*/*' given [*/*]
2020-05-21 16:04:15.632 DEBUG 552 --- [nio-8182-exec-9] o.s.web.servlet.DispatcherServlet        : Completed 200 OK

Here the style is updated so put method is working fine but the view isn't showed on browser. I suspect that Spring doesn't have any problem in order to redirect view, the problem is that ajax script isn't redirecting to the returned view.

How can I modify the ajax script to process the view returned by Spring?

Edit

In fact, I get the redirect putting in ajax script:

success: function () {
            window.location.reload();
     }
onox
  • 21
  • 7