not sure if this helps - but iwas doing some 'proactive' play /learning to understand jquery and script (bit new to all this)
so my working page looks abit like this
in my html body i define a form like this - i've been trying tiuse grails and was having some difficulty hence the dummy page. I was trying to get ajax to work from grails tag (still having an error i posted on the grails site), and the other was a had crafted ajax call which i trigger from an event handler on input element
$(
"input#ajaxCall").click (function (event) {jqueryAjax (event);} );
i put this in the readdy handler to set up the listerner - see the first input tag in the form below.
<g:form action="jqAjax">
<g:textArea name="content" id="textContent" rows="3" cols="25"></g:textArea>
<br />
<g:submitToRemote value="submit"
url="[controller: 'jqTest', action: 'jqAjaxGet']"
update="results"
onSuccess="clearContent ()"
onLoading="showSpinner (true)"
onComplete="showSpinner(false)" />
<input id="ajaxCall" style="button" value="manual submit" />
<img id="spinner" style="display:none"
src="<g:createLinkTo dir='/images' file='spinner.gif' />"
/>
</g:form>
back in the ready handler i have a event handler function like this
function jqueryAjax (event) {
$.ajax ({
url:
'/JqueryTest/jqTest/jqAjaxGet',
type:
'GET',
dataType:
'html',
data : {model:
'full ajax call hello william'
},
//query params
success :
function (response) {say ("ajax call completed successfully"); tidyUp (response); },
error :
function (xhr, errorStatus, exception) {say ("got ajax error " + errorStatus); },
complete:
function (xhr, completionStatus) {say ("completed ajax call successful") },
});
}
in this example my tidyUp fucntion just takes the server response and updates the div
tidyUp (response) {
$(
"textarea#textContent").val ("");// clear the text on the input field
$(
"div#results").html ("<p>results div:</p>" + response); //update our ajax results div
$(
"img#spinner").hide (); //hide the spinner
}
this handler makes the ajax call - takes the response rendered back in the call (return from your php script) and updates the div id=results with the return from the server.
dont wory about the grails tag <g:submitToRemote thats there for me trying the other way .
so
1 define your form
2. add input /button etc and set event handler on it
3. write the exception handler in your $.ready script
4. click on input element - fires event - which does the ajax get.
5. provide callback function to the $.ajax call - that takes the server response and updates some placeholder on the page where the dynamic response is to seen.
hope that helps
