0

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 enter image description here

Dan
  • 2,086
  • 11
  • 71
  • 137
  • 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 Mar 05 '13 at 15:30

2 Answers2

7

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.

Community
  • 1
  • 1
PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40
  • that is html5.. it will not support in all browser. i will wait for some other answer if i am not getting correct answer then i will apply `data` functionality as you recomended – Dan Mar 05 '13 at 15:33
  • from what I'm interpreting of this: http://stackoverflow.com/questions/6509841/jquery-data-not-retrieving-data, as long as you don't use camel case you're fine – PlantTheIdea Mar 05 '13 at 15:36
  • writingYourVariablesLikeThis ... capitalizing first letter of words following the first word – PlantTheIdea Mar 05 '13 at 15:45
  • still i am unclear. what it means ` capitalizing first letter of words following the first word`? – Dan Mar 05 '13 at 15:47
  • `data-idwithoutcamelcase` <- no capitalization, `data-idWithCamelCase` <- camelCase capitalization – PlantTheIdea Mar 05 '13 at 15:48
  • ok i got that. Now i have a serious problem. it is only reading the first link from my cart(teste through a alert). , As i said in my question my `remove` link is in loop, so each link has different `id` & `bid` which should pass into my jquery function on click. I updated a image of my out put. please check my update question above, and help me to solve this problem – Dan Mar 05 '13 at 16:21
  • EDIT: you have your link in a loop? and each have the exact same ID? your synatically invalid HTML is the cause of the problem them, as jQuery will create an array of items with that id and only grab the first one. ill edit my answer to show what it should be. – PlantTheIdea Mar 05 '13 at 16:26
  • +1 Thanks. I learn something new. What do you mean by `e.preventDefault();` ? – Dan Mar 05 '13 at 16:35
  • you had it as well, in your question, so ... read your own notes. but basically it prevents the default event from taking place. in this case, normally the browser window would navigate to the link destination. this prevents that action, and performs the AJAX call instead. – PlantTheIdea Mar 05 '13 at 16:38
  • new doubt: i am trying to pass the received id into my ajax.. But i think this is not correct ,can you tell why this is not correct `$.ajax({ type: 'get', url:"",` – Dan Mar 05 '13 at 16:44
2

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 become:

   $('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);
       }
  });
Kovge
  • 2,019
  • 1
  • 14
  • 13