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.

This should point you in the right direction. http://stackoverflow.com/questions/572161/converting-from-prototype-to-jquery — Flobbo, Mar 22 '13 at 07:44
@Jai : i dont know much about jquery. So please post the equivalent code in jquery as answer. — Can Can, Mar 22 '13 at 07:46
@Pooja what is `abc` above? To me it seems that this is the siteurl. — Jai, Mar 22 '13 at 07:53

Code Lღver · Accepted Answer · 2013-12-11T12:11:12.953

13

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,

edited Dec 11 '13 at 12:11

answered Mar 22 '13 at 07:46

Code Lღver

15,573
16
56
75

hi thanks. i will try this code any let u know whether its working or not. – Can Can Mar 22 '13 at 07:47
var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {. here abc is a div. i want to replace this div with the content in the add_bill_detail file. – Can Can Mar 22 '13 at 08:40
2

wow. super its working.. :) thatnks @OSSCUbe Solution. giving +1 – Can Can Mar 22 '13 at 09:03
one more doubt. if i am replacing one div its working. but if i am going to replace one table its not working – Can Can Mar 22 '13 at 09:17
the table is .. and in script i given like this success: function(returnData){ $("bill_details").html(returnData); }. but its not working :(
– Can Can Mar 22 '13 at 09:20
2

`$("#bill_details").html(returnData);` use this. and you can ask more question or any doubt on my blog. it is : http://zenddevelopment.blogspot.in – Code Lღver Mar 22 '13 at 09:25
in projotype i have given insertion: Insertion.Bottom like this for inserting rows. how to do the same in Jquery. – Can Can Mar 22 '13 at 09:28
@poojaagarwal let us [continue this discussion in chat]. come here. (http://chat.stackoverflow.com/rooms/26710/discussion-between-osscube-solution-and-pooja-agarwal) – Code Lღver Mar 22 '13 at 09:31

Jai · Answer 2 · 2013-03-22T08:52:22.320

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

$.get() or jQuery.get()
$.post() or jQuery.post()
$.getJSON() or jQuery.getJSON()
$.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');

var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {. here abc is a div. i want to replace this div with the content in the add_bill_detail file. — Can Can, Mar 22 '13 at 08:39
@Pooja just updated the answer. Even you can try this one: `.load()`. — Jai, Mar 22 '13 at 08:53

score 1 · Answer 3 · answered Mar 22 '13 at 08:03

1

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/

answered Mar 22 '13 at 08:03

grigno

3,128
4
35
47

Ravindra Shekhawat · Answer 4 · 2013-03-22T08:38:33.213

1

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

      });

   });

edited Mar 22 '13 at 08:38

answered Mar 22 '13 at 08:33

Ravindra Shekhawat

116
2
10

var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {. here abc is a div. i want to replace this div with the content in the add_bill_detail file – Can Can Mar 22 '13 at 08:40

What is the equivalent of Ajax.updater in Jquery?

4 Answers4

Linked