Visualforce remoting is not working

Question

i read this article https://www.salesforce.com/us/developer/docs/pages/Content/pages_js_remoting.htm

there are two examples given

<script type="text/javascript">
        function sayHello(helloTo) {
            ChildRemoteController.sayHello(helloTo, function(result, event){
                if(event.status) {
                    document.getElementById("result").innerHTML = result;
                }
            });
        }
    </script>

and

Visualforce.remoting.Manager.invokeAction(
    '{!$RemoteAction.RemoteController.setMessage}',
    {'apexType':'thenamespace.RemoteController.MyClass', 'myString':'Lumos!'}, 
    handleResult
);

in annotation 2 every thing is fine i can call apex function but in annotation 1.i have

function clickHandler(){
 console.log('--coming here---');
  var x= $('#searchAskInputContainer').val();
  $('#article-section').appendChild()  ;
  SampleController.getArticleVersions(x,function(result){
  console.log('coming here');
  });

 }

and in apex side

public with sharing class SampleController {
  @RemoteAction
    public static List<KnowledgeArticleVersion> getArticleVersions(String firstParam){
      System.debug('first param is'+firstParam);    
      List<List<KnowledgeArticleVersion>> kav =  [FIND :firstParam IN ALL FIELDS RETURNING KnowledgeArticleVersion (Id Where language='en_US' AND PublishStatus='Online')] ;
       return kav[0];   
   }

}

when i call SampleController.getArticleVersion its giving me error

Uncaught TypeError: undefined is not a function 

please tell why its not working when i directly use it ??

Answer 1

Assuming you have $ defined to be jQuery, jQuery does not have a function appendChild but rather a function append and that would generate the specific error you get.

So your code will work better if for now you comment out this line:

// $('#article-section').appendChild()  ;

(Hopefully you are defining your function only when the page is ready otherwise the page elements e.g. searchAskInputContainer are unlikely to be found.)

Answer 2

It could be the structure of your VF page and the selectors.

Try

function clickHandler(){
 console.log('--coming here---');
  var x= $('[id$=searchAskInputContainer]').val();
  SampleController.getArticleVersions(x,function(result,event){
  console.log('coming here');
  });

 }