I have a grails project I need to select the fields that I want to delete and when I click delete, I need a function to delete all selected items:

html code:

<form name="bookForm" action="list" method="post">
    ....
    <a onclick="deleteBooks();">Delete</a>
    ....
    ....
    <g:checkBox id="select_all" name="select_all" value="" onclick="selectAll();" />
    ....
    <g:each in="${bookList}" status="i" var="bookInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
            <td><g:checkBox id="${bookInstance.id}" name="delete_checkbox" value="" /></td>
        </tr>
    </g:each>
    ....
</form>

javascript code:

<script type="text/javascript">
    function selectAll(){
        var select = document.getElementById("select_all");
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        if (select.checked){
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = true;
        }else{
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = false;
        }
    }

    function deleteBooks(){
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        var counter = 0;
            for (i = 0; i < checkboxes.length; i++){
                if(checkboxes[i].checked){
                    counter ++;
                    ${g.remoteFunction(action:'delete', controller:'book', id:checkboxes[i].id) }
                }
            }
            if (counter == 0) alert("select books to delete");
        }
    </script>

selectAll function works fine, but deleteBooks function cause this error when i add ${g.remoteFunction(action:'delete', controller:'book', id:checkboxes[i].id) }

Exception:

Error 500: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book', id: checkboxes[i].id)] on line [26]: Cannot get property 'null' on null object
Servlet: grails
URI: /myProject/grails/book/list.dispatch
Exception Message: Cannot get property 'null' on null object 
Caused by: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book', id: checkboxes[i].id)] on line [26]: Cannot get property 'null' on null object 
Class: list.gsp 
At Line: [26] 
Code Snippet:

and if I substitute it with ${g.remoteFunction(action:'delete', controller:'book') }

Exception:

Error 500: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book')] on line [27]: No javascript provider is configured
Servlet: grails
URI: /myProject/grails/book/list.dispatch
Exception Message: No javascript provider is configured 
Caused by: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book')] on line [27]: No javascript provider is configured 
Class: list.gsp 
At Line: [27] 
Code Snippet:

How can I call a controller action from a javascript function or jquery?

I have a grails project I need to select the fields that I want to delete and when I click delete, I need a function to delete all selected items:

html code:

<form name="bookForm" action="list" method="post">
    ....
    <a onclick="deleteBooks();">Delete</a>
    ....
    ....
    <g:checkBox id="select_all" name="select_all" value="" onclick="selectAll();" />
    ....
    <g:each in="${bookList}" status="i" var="bookInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
            <td><g:checkBox id="${bookInstance.id}" name="delete_checkbox" value="" /></td>
        </tr>
    </g:each>
    ....
</form>

javascript code:

<script type="text/javascript">
    function selectAll(){
        var select = document.getElementById("select_all");
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        if (select.checked){
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = true;
        }else{
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = false;
        }
    }

    function deleteBooks(){
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        var counter = 0;
            for (i = 0; i < checkboxes.length; i++){
                if(checkboxes[i].checked){
                    counter ++;
                    ${g.remoteFunction(action:'delete', controller:'book', id:checkboxes[i].id) }
                }
            }
            if (counter == 0) alert("select books to delete");
        }
    </script>

selectAll function works fine, but deleteBooks function cause this error when i add ${g.remoteFunction(action:'delete', controller:'book', id:checkboxes[i].id) }

Exception:

Error 500: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book', id: checkboxes[i].id)] on line [26]: Cannot get property 'null' on null object
Servlet: grails
URI: /myProject/grails/book/list.dispatch
Exception Message: Cannot get property 'null' on null object 
Caused by: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book', id: checkboxes[i].id)] on line [26]: Cannot get property 'null' on null object 
Class: list.gsp 
At Line: [26] 
Code Snippet:

and if I substitute it with ${g.remoteFunction(action:'delete', controller:'book') }

Exception:

Error 500: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book')] on line [27]: No javascript provider is configured
Servlet: grails
URI: /myProject/grails/book/list.dispatch
Exception Message: No javascript provider is configured 
Caused by: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book')] on line [27]: No javascript provider is configured 
Class: list.gsp 
At Line: [27] 
Code Snippet:

How can I call a controller action from a javascript function or jquery?

• javascript
• jquery
• grails

4 Answers 4

function deleteBooks(){
    var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
    var counter = 0;
    for (i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
              counter ++;
              var bookId = checkboxes[i].id;
              <g:remoteFunction controller="book" action="delete" id="${bookId}" /> 
        }
    }
    if (counter == 0) alert("select books to delete");
}

please notify me if any error

GSP is working on server side, JavaScript on client side. You can't mix it, use ajax:

$.ajax({
   type: 'POST',
   url: "${createLink(action:'delete', controller:'book')}/" + checkboxes[i].id
});

remoteFunction is fine, however you need to have a javascript library. Have a look at http://grails/plugin/jquery and how it can be installed.

If you write the javascript inline, you can do that. However if the javascript is in a file that you are including - it will not work. Also you dont need the "g." in the remoteFunction.