remoteField not triggering action call

Question

So I am attempting to create a search field that will filter contacts on the fly. So I have the main results being displayed in a template (Contact/list.gsp):

<%@ page import="contactmanager.Contact" %>
<!doctype html>
<html>
<head>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <g:set var="entityName" value="${message(code: 'contact.label', default: 'Contact')}" />
    <title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
    <div id="list-contact" class="mainContent-contact" role="main">
        <h1><g:message code="default.list.label" args="[entityName]" /></h1>

        <g:if test="${flash.message}">
            <div class="message" role="status">${flash.message}</div>
        </g:if>

        <div id="searchBox">
            Instant Search: <g:remoteField name="q" update="searchResults" paramName="q" url="[controller:'contact', action:'search']"/>
        </div>

        <g:render template="searchResults"/>

        <div class="pagination">
            <g:paginate total="${contactInstanceTotal}" />
        </div>

    </div>
</body>

Here is my template (_searchResults.gsp):

<%@ page import="contactmanager.Contact" %>


        <div id = "searchResultsDiv">
                <table>
                    <thead>
                        <tr>
                            <g:sortableColumn property="firstName" title="${message(code: 'contact.firstName.label', default: 'First Name')}" />
                            <g:sortableColumn property="lastName" title="${message(code: 'contact.lastName.label', default: 'Last Name')}" />
                            <g:sortableColumn property="phone" title="${message(code: 'contact.phone.label', default: 'Phone')}" />
                            <g:sortableColumn property="email" title="${message(code: 'contact.email.label', default: 'Email')}" />
                            <g:sortableColumn property="title" title="${message(code: 'contact.title.label', default: 'Title')}" />
                            <g:sortableColumn property="jobFunc" title="${message(code: 'contact.jobFunc.label', default: 'Job Func')}" />
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${contactInstanceList}" status="i" var="contactInstance">
                            <g:if test="${contactInstance.isActive}">
                                <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">

                                <td><g:link action="show" id="${contactInstance.id}">${fieldValue(bean: contactInstance, field: "firstName")}</g:link></td>
                                <td>${fieldValue(bean: contactInstance, field: "lastName")}</td>
                                <td>${fieldValue(bean: contactInstance, field: "phone")}</td>
                                <td>${fieldValue(bean: contactInstance, field: "email")}</td>
                                <td>${fieldValue(bean: contactInstance, field: "title")}</td>
                                <td>${fieldValue(bean: contactInstance, field: "jobFunc")}</td>

                                </tr>
                            </g:if>
                    </g:each>
                    </tbody>
                </table>
        </div>

So currently, when I enter my text, nothing is happening. I added a printout in my search method and that's not being called at all. It's almost as if my remoteField is stagnant and is not active.

Am I missing a pre-requisite to this tag? I looked at the official API online, but didn't see anything at all indicating such. Is there something new to 2.0.0?

I am using the searchable plugin to pull results in the Controller, just FYI.

Thank you all for the help!

Update: So I added the javascript library call explicitly in my main.gsp and I seem to be getting some response back from the server, which is great news (missingPropertyException):

I had to add the plugin definition to the library call of jQuery (library = jquery and plugin= query)

What javascript provider are you using, Jquery, Prototype, Dojo ? For grails 2.x Default is jquery — Sudhir N, Feb 14 '12 at 04:16
Thank you for comments: The output from Firebug appears to be that jQuery is not defined on the contact/search method call. I'm not explicitly declaring a javascript provider, so default would be jQuery (list.gsp): <g:message args="[entityName]" code="default.list.label"></g:message> — user82302124, Feb 14 '12 at 13:05
Sorry for the markup in the comment. That was not suppose to happen. — user82302124, Feb 14 '12 at 13:11
So the remoteField is working now and when you change the value of the text field - it makes ajax call to the server right ? So what's your issue now ! — Sudhir N, Feb 14 '12 at 14:54
Looks like the issue now is that my model that is returned from the Contact controller is now being read by my template (see above for template). The table in the template should take the searchResults sent by the controller via the model and update the table with the query. My render looks as such (confirmed searchResults has my query): render(template:'searchResults', model: [contactInstanceList:searchResults]) So once I returned the contactInstanceList, the template should update. But it is not. — user82302124, Feb 14 '12 at 15:53

score 0 · Accepted Answer · answered Feb 14 '12 at 17:27

First, thank you to those with the advice. I was able to figure out Firebug was a useful tool and that output pointed me to my library calls.

So I am now seeing action from my server using the correct jQuery library call. My last problem was that I was referencing the template name in the update of the remoteField, not the name of the main div within the template.

Once I fixed those, I am working. Thanks for all advice!

remoteField not triggering action call

1 Answers1