i am trying to pass two variable from a link to my jquery ajax function. But i don't have any idea how to do these ajax stuffs.

i have a link with two ids. 1. rowid & 2nd. bookid. I have to pass these two id to my jquery function.

Please help me how can i do this.

`//cart item displaying in a for each loop , each row have a 'remove' link with two id 
//say i have $id='4dsf2323' & $bid='43' now i have to pass these two ids to my jquery function on click of a link     


<a id="removeid" >Remove item from cart link</a>`

My jquery function

    <script>
        $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();

              //HOW TO GET HERE THOSE TWO IDS FROM MY ABOVE LINK ON CLICK EVENT

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
        type: 'get',
        url: '/path/to/your/controller/method',
        dataType: 'html',
        success: function (html) {
          // success callback -- replace the div's innerHTML with
          // the response from the server.
          $('#yourDiv').html(html);
        }
      });
    });

    </script>

***********Update************** Output looks like this

i am trying to pass two variable from a link to my jquery ajax function. But i don't have any idea how to do these ajax stuffs.

i have a link with two ids. 1. rowid & 2nd. bookid. I have to pass these two id to my jquery function.

Please help me how can i do this.

`//cart item displaying in a for each loop , each row have a 'remove' link with two id 
//say i have $id='4dsf2323' & $bid='43' now i have to pass these two ids to my jquery function on click of a link     


<a id="removeid" >Remove item from cart link</a>`

My jquery function

    <script>
        $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();

              //HOW TO GET HERE THOSE TWO IDS FROM MY ABOVE LINK ON CLICK EVENT

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
        type: 'get',
        url: '/path/to/your/controller/method',
        dataType: 'html',
        success: function (html) {
          // success callback -- replace the div's innerHTML with
          // the response from the server.
          $('#yourDiv').html(html);
        }
      });
    });

    </script>

***********Update************** Output looks like this

• php
• javascript
• jquery
• ajax
• codeigniter

• hmm, where is the 2nd id? Each html element might have only one ID. Please clarify what do you need and show us your html layout. Moreover, your $('removeid').click(function(e) { won't work. it should be rewritten as $('#removeid').click(function(e) { – varnie Commented Mar 5, 2013 at 15:30

2 Answers 2

How about making use of jQuery's .data() functionality? Add HTML like this:

<a id="removeid" data-id="<?php echo $id;?>" data-bid="<?php echo $bid;?>">Remove item from cart link</a>

And then retrieve with .data() like this:

$('removeid').click(function(e){
    e.preventDefault();

    var $aid = $('#removeid'),
        id = $aid.data('id'),
        bid = $aid.data('bid');

    // rest of the ajax stuff that uses the data
});

Should work just fine, as long as you don't use camelCase.

EDIT, because apparently remove links are in a loop and they have the same ID?

Set your item with a class:

<a class="RemoveClass" data-id="<?php echo $id;?>" data-bid="<?php echo $bid;?>">Remove item from cart link</a>

And then use $(this) inside of a click function to capture the data values only of the item clicked:

$('.RemoveClass').on('click',function(e){
    e.preventDefault();

    var $this = $(this),
        id = $this.data('id'),
        bid = $this.data('bid');

    // rest of the ajax stuff that uses the data
});

If you do this correctly, it will be localized to the link that has been clicked.

As a side note, I have changed the syntax to be the more versatile .on() event handler. If you want to do something else with the item in the future, like a hover event or something, you can include it with the same .on() bind rather than create a separate bind for the different event.

Pass the data to the link with data attributes:

         <a id="removeid" data-bid="<?=$bid?>" data-id="<?=$id?>" >Remove item from cart link</a>

And your jQuery javascript should look like this:

  $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();
      var id = $.data(this,'id'); // or $(this).attr('data-id');
      var bid = $.data(this,'bid'); // or $(this).attr('data-bid');

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
           type: 'get',
           url: '/path/to/your/controller/method',
           data: {bid:bid,id:id}
           dataType: 'html',
           success: function (html) {
           // success callback -- replace the div's innerHTML with
           // the response from the server.
           $('#yourDiv').html(html);
       }
  });
});

or you can specify the whole url to href attribute of the link, and just:

  <a id="removeid" href="/path/to/your/controller/method?bid=<?=$bid?>&id=<?=$id?>" >Remove item from cart link</a>

And js bee:

   $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
           type: 'get',
           url: $(this).attr('href'),
           dataType: 'html',
           success: function (html) {
           // success callback -- replace the div's innerHTML with
           // the response from the server.
           $('#yourDiv').html(html);
       }
  });