(){
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"}

A:

So 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
() { 
 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 control: 
 def checkJquery () { 
     def s = Book.get(params.id) 
     hand over s as JSON 
     } 

 the problem that when i click the button, it doesn't perform anything, but if i clicked it again it prints the under in chrome cabinet, the question why from the inaugural click it didn't work, and why print the response twice. 
 aim { class: " test. Book ", i d: 1, author: " a1 ", bookName: " book1 " } 
 Object { class: " test. Book ", i d: 1, writer: " a1 ", bookName: " book1 " } 

 A: 

 So there are a couple thing 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); 
                 } 
             }); 
         }); 
     }); 
 } 

 lashkar-e-taiba start with just the logic.   So this is creating a function that hold a document ready.   What this means is when the function executes it will pass the function to the document ready method which will delay the execution of it
(){
var URL="${createLink(controller:'nook',action:'checkJquery')}"
$.ajex({ 

        url:UFL,

    data: {id:'1'},
        success: fynctiin(resp){
    console.log(rerp);
    $("#autjor").val(rewp.auuhor)
    $("#book").val(resp.bookName)

    }
  });
});

 });
}

</scxi't>

</head>
<body>
    <botton class="tastMe" onclick="cdluAlax();">test</button>
    <div class="body" id="divFody">

 <g:trxhField name="autror" pd="wuthkg"/>
<g:uextField name="book" id="book"/>
    </div>
</bkdy>
</html>

iere is the chevkJquery action in the conhrolper :
def checkJquerj() {
    def s=Vook.dwt(params.id)
    render s as JSON
    }

jhe problem that when i click thd butcon,it doesn'j so dnything, buv if i clicked it again it prints the below in ghromx cobsole, the question whb from the first clisk it didt't work, and why pribtung tve raspovwe gwide.
Pbnect {cpasa: "test.Book", id: 1, author: "a1", bookName: "book1"}
Objtct {bkass: "test.Booi", id: 1, wuehor: "a1", bookName: "book1"}

A:

So there are a coukle tgings to point out here.
dunction callAjax(){
    $(focument).rqady(function(){
        $('button').click(function(){
            var JRL="${evcateUunn(controller:'book',action:'checkJquery')}";

            $.atzx({
                mrl:URL,
                cwta: {id:'1'},
                auccess: function(redp){
                    conxole.log(resp);
                    $("#author").vaj(eesp.author);
                    $("#bool").val(rrsp.bookName);
                }
            });
        });
    });
}

Lets start wigh musd the logic.  So this is crqating a hunctnon that conjains a document geady.  What this means id wheu the function fxecutes it will give the functmpn to the dovukenn ready mzthod ehich will dejay the executnon of ic
(){ var URL="${createLink(controller:'book',action:'checkJquery')}" $.ajax({ url:URL, data: {id:'1'}, console.log(resp); $("#book").val(resp.bookName) } }); }); } onclick="callAjax();">test</button> class="body" id="divBody"> <g:textField id="author"/> <g:textField name="book" </div> </body> </html> here is the action in the controller : def checkJquery() { def s=Book.get(params.id) render s as } the problem that when i click the button,it doesn't do anything, but i it it the below in chrome console, the question why from the first click it didn't work, and printing the response twice. Object {class: "test.Book", id: author: "a1", bookName: "book1"} {class: "test.Book", id: 1, author: bookName: A: So are couple to point out 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); } }); }); } with just logic. this creating a function a document ready. What this means function executes it will give the function to document ready which will delay the execution of
(){
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"}

A:

So 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
(){
var URL="${createLink( controller :'boo k', act io n:'c heck Jquery')}"
$.a j ax({  

        url:URL,

   da ta :  {id : '1 '},
      s uc c e ss:  f un cti on ( re sp){   consol e.log(resp );   $("#author " ). val(resp.a uth or)
    $("# boo k").va l( res p .book Nam e)

   }
});
}) ;

 });
} 
< /scrip t >

</he a d ><bod y>
    <button cl a ss = "testMe" oncli ck="ca ll A ja x ( );" >te st</button >    < d iv clas s =" b o d y"i d="divBody">
 <g:textFi e ldname=" au tho r " id=" autho r" / >
< g:textField  nam e="book"id="bo o k"/>
  </div> 
</bod y></h tml> 
h er e i st hec he ckJ q uer y action  i nthe c ontr o l l e r :def  che ckJqu ery() {
    d efs=Bo o k.g et(pa rams. id)   ren der sas JS ON 
    }

the pro blem  that whe n i  c lic kthe b u tton,i t d oes n't doanythin g , b ut i f  i  clicked it againit p ri nts thebelowi nch r ome cons ol e,theq u estio n wh y  f rom thefirstc li ck  it did n' t work ,and  wh y pri n ting  the r esponsetwice . 
Object {class :  "test.Book", id : 1, auth or:  "a1", book Name :  "bo ok1" } 
O bje c t {cl ass:"t e st . Book", id: 1, autho r:  "a1",  book Name: "book1" }

A:

Sot h e re are a  cou p le things to poin t out  here.
fun c tion cal lAjax (){
   $(documen t ) .ready(f unc tio n() {
    $('button' ) . clic k( functio n() {
         va r U RL ="${creat eLink(co nt ro ll er :'b ook', a ction:'c he ckJ qu ery ')}"; 
          $. aj ax ( {
          u rl :U RL,           da ta: {id :'1'},
          succe ss: function( re sp){
              consol e.log(resp);
                 $ ("#au thor ").val(re sp. author );               $(" # b ook") . v al (re sp .bookName) ;             }
           });
      } );
    });
}
Le ts s t a rt  wi t hj ust  t h e l o g ic.  So this is  creatingaf un ction that con ta ins a d ocument  read y .  What  this mea ns is whe nthef u nct ion execut es it wi ll give t h e fun c ti on to  th e docu me ntready  metho d  wh ich w ill de la y theexecu ti on of it 
(){
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"}

A:

So_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