Grails using ajax submit a form

Question

I'm stacking with issues related to ajax in grails, please help! In domain book, I got book name and book type, then I generated a controller and view base on that domain. Then in update action of bookController, I use jquery to pop up input book name and book type, then I used ajax technique to update that book. I hope you got me. Here my code:

For Update function

def update(Long id, Long version) {
    def bookInstance = Book.get(id)
    if (!bookInstance) {
    flash.message = message(code: 'default.not.found.message', 
                    args: [message(code: 'book.label', default: 'Book'), id])
            redirect(action: "list")
            return
     }

    if (version != null) {
       if (bookInstance.version > version) {
      bookInstance.errors.rejectValue("version", "default.optimistic.locking.failure",
      [message(code: 'book.label', default: 'Book')] as Object[],
       "Another user has updated this Book while you were editing")

            render(view: "edit", model: [bookInstance: bookInstance])
            return
            }
        }

      bookInstance.properties = params

     if (!bookInstance.save(flush: true)) {
          render(view: "edit", model: [bookInstance: bookInstance])
          return
     }

    flash.message = message(code: 'default.updated.message', 
    args: [message(code: 'book.label', default: 'Book'), bookInstance.id])
        redirect(action: "show", id: bookInstance.id)
    }

here is the text box

<div id="dialog" title="Edit book" style="display: none">
        <form id="ajaxForm">
            Book name: <input type="text" name="name"><br>
            Book type: <input type="text" name="type"><br><br>
            <input type="submit" value="Ok">
        </form>
</div>

And this is what I faced with trouble.

     <script>
            function showDialog() {
                $( "#dialog" ).dialog()
            }
            function getRequest(){
                $("#ajaxForm").form({
                    type: 'POST'
                    url: '/test/book/update?name=&type='
                })
            }
     </script>

Please help me to finish ajax code. Thanks for advance.

Answer 1

@user3504966 you have syntax error in your ajax native code.make changes accordingly as below :

  <script>
        function showDialog() {
            $( "#dialog" ).dialog()
        }
        function getRequest(){
            $("#ajaxForm").form({
                type: 'POST',
                url: '/test/book/update',
                data:{"name":nameValueHere ,"type":typeValuehere}
            });
        }
    </script>

alternative #2

<script>
    $.ajax({context: $(this),
    url:"${resource()}"+"/yourcontroller/youraction",
    type:"POST",
    data:{"param0":value1,"parma1":'value2'}});
</script>

Answer 2

Try replacing your <form> with this

<g:formRemote name="myForm" url="[controller: 'book', action: 'update']">
    Book name: <input type="text" name="name"><br>
    Book type: <input type="text" name="type"><br><br>
    <input type="submit" value="Ok">
</g:formRemote>