What is the equivalent of Ajax.updater in Jquery?

Question

Please let me know the equivalent of below prototype code in Jquery.

var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {
      method: 'get',
      parameters: pars,
      insertion: Insertion.Bottom
});

I want to perform the same action using Jquery.

Thanks in Advance.

Answer 1

In jQuery the Ajax will use as following:

$.ajax({
   url: "/billing/add_bill_detail",
   type: "get",
   dataType: "html",
   data: {"pars" : "abc"},
   success: function(returnData){
     $("#abc").html(returnData);
   },
   error: function(e){
     alert(e);
   }
});

Use #abc if abc is the id of the div or use .abc if abc is a class.

You can place the returnData iin your HTML where you want,

Answer 2

There are some ways using ajax like jQuery.ajax({...}) or $.ajax({...}) other than this there are some simplified versions of these too like:

1. $.get() or jQuery.get()
2. $.post() or jQuery.post()
3. $.getJSON() or jQuery.getJSON()
4. $.getScript() or jQuery.getScript()

$ = jQuery both are same.

As you are using method : 'get', so i recommend you to use $.ajax({...}) or $.get() but remember to include jQuery above this script otherwise ajax function wont work Try to enclose the script in the $(function(){}) doc ready handler.

'abc' if you could explain it

Try adding this with $.ajax():

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
   $(function(){
      $.ajax({
        type: "GET",
        url: "/billing/add_bill_detail",
        data: pars,
        dataType: 'html'
        success: function(data){
           $('#abc').html(data); //<---this replaces content.
        },
        error: function(err){
           console.log(err);
        }
      });
   });
</script>

or with $.get():

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
   $(function(){
      $.get("/billing/add_bill_detail", {data: pars}, function(data) {
          $('#abc').html(data); //<---this replaces content.
      }, "html");
   });
</script>

or more simply use the .load() method:

$('#abc').load('/billing/add_bill_detail');

Answer 3

You can use .load() method

Load data from the server and place the returned HTML into the matched element.

Read docs: http://api.jquery.com/load/

Answer 4

   $(function(){
      $.ajax({
        type: "GET",
        url: "abc/billing/add_bill_detail",
        data: data,
        success: function(data){
            alert(data);
        }

      });

   });