i'm just trying the ajax Jquery function in GSP, here is the GSP:
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="layout" content="main" />
<title>Insert title here</title>
<g:javascript library='jquery' plugin='jquery' />
<script type="text/javascript">
function callAjax(){
$(document).ready(function(){
$('button').click(function(){
var URL="${createLink(controller:'book',action:'checkJquery')}"
$.ajax({
url:URL,
data: {id:'1'},
success: function(resp){
console.log(resp);
$("#author").val(resp.author)
$("#book").val(resp.bookName)
}
});
});
});
}
</script>
</head>
<body>
<button class="testMe" onclick="callAjax();">test</button>
<div class="body" id="divBody">
<g:textField name="author" id="author"/>
<g:textField name="book" id="book"/>
</div>
</body>
</html>
here is the checkJquery action in the controller :
def checkJquery() {
def s=Book.get(params.id)
render s as JSON
}
the problem that when i click the button ,it doesn't do anything , but if i clicked it again it prints the below in chrome console, the question why from the first click it didn't work , and why printing the response twice.
Object {class: "test.Book", id: 1, author: "a1", bookName: "book1"}
Object {class: "test.Book", id: 1, author: "a1", bookName: "book1"}
i'm just trying the ajax Jquery function in GSP, here is the GSP:
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="layout" content="main" />
<title>Insert title here</title>
<g:javascript library='jquery' plugin='jquery' />
<script type="text/javascript">
function callAjax(){
$(document).ready(function(){
$('button').click(function(){
var URL="${createLink(controller:'book',action:'checkJquery')}"
$.ajax({
url:URL,
data: {id:'1'},
success: function(resp){
console.log(resp);
$("#author").val(resp.author)
$("#book").val(resp.bookName)
}
});
});
});
}
</script>
</head>
<body>
<button class="testMe" onclick="callAjax();">test</button>
<div class="body" id="divBody">
<g:textField name="author" id="author"/>
<g:textField name="book" id="book"/>
</div>
</body>
</html>
here is the checkJquery action in the controller :
def checkJquery() {
def s=Book.get(params.id)
render s as JSON
}
the problem that when i click the button ,it doesn't do anything , but if i clicked it again it prints the below in chrome console, the question why from the first click it didn't work , and why printing the response twice.
Object {class: "test.Book", id: 1, author: "a1", bookName: "book1"}
Object {class: "test.Book", id: 1, author: "a1", bookName: "book1"}
-
even when i mented
$(document).ready()still the same behavior – Sherif Commented Jan 2, 2016 at 19:19
1 Answer
Reset to default 6So there are a couple things to point out here.
function callAjax(){
$(document).ready(function(){
$('button').click(function(){
var URL="${createLink(controller:'book',action:'checkJquery')}";
$.ajax({
url:URL,
data: {id:'1'},
success: function(resp){
console.log(resp);
$("#author").val(resp.author);
$("#book").val(resp.bookName);
}
});
});
});
}
Lets start with just the logic. So this is creating a function that contains a document ready. What this means is when the function executes it will give the function to the document ready method which will delay the execution of it until the page's body is parsed and in the dom.
Now lets look at the html.
<button class="testMe" onclick="callAjax();">test</button>
This is defining a button that will call the callAjax() method when it is clicked. So lets follow the logic. You create your function that will be executed later. Your page is rendered and the button exists.
You click the button which executes the method. That method then gives the function to the document ready to wait for the page to be parsed. But... we already know it is. Cause you called it based on an interaction with the page. So the document ready is pointless.
Another point, that call is going to happen -every- time that button is clicked. Meaning your method will happen multiple times, which means your binding will happen multiple times, and so on and so forth.
You should really consider binding in your javascript instead of inline in order to separate your concerns and to minimize/eliminate the redundancy.
So first off the html would change to be something like..
<button class="testMe">test</button>
And your javascript...
$(document).ready(function(){
$('.testMe').click(function(){
var URL="${createLink(controller:'book',action:'checkJquery')}";
$.ajax({
url:URL,
data: {id:'1'},
success: function(resp){
console.log(resp);
$("#author").val(resp.author);
$("#book").val(resp.bookName);
}
});
});
});
Now your markup would be only your markup, and your bindings would happen after the page loads, and only once.