Passing parameters to a JQuery function

Question

I'm creating HTML with a loop that has a column for Action. That column is a Hyperlink that when the user clicks calls a JavaScript function and passes the parameters...

example:

<a href="#" OnClick="DoAction(1,'Jose');" > Click </a>
<a href="#" OnClick="DoAction(2,'Juan');" > Click </a>
<a href="#" OnClick="DoAction(3,'Pedro');" > Click </a>
...
<a href="#" OnClick="DoAction(n,'xxx');" > Click </a>

I want that function to call an Ajax jQuery function with the correct parameters.

Any help?

tvanfosson · Accepted Answer · 2010-07-28T23:58:43.470

94

Using POST

function DoAction( id, name )
{
    $.ajax({
         type: "POST",
         url: "someurl.php",
         data: "id=" + id + "&name=" + name,
         success: function(msg){
                     alert( "Data Saved: " + msg );
                  }
    });
}

Using GET

function DoAction( id, name )
{
     $.ajax({
          type: "GET",
          url: "someurl.php",
          data: "id=" + id + "&name=" + name,
          success: function(msg){
                     alert( "Data Saved: " + msg );
                   }
     });
}

EDIT:

A, perhaps, better way to do this that would work (using GET) if javascript were not enabled would be to generate the URL for the href, then use a click handler to call that URL via ajax instead.

<a href="/someurl.php?id=1&name=Jose" class="ajax-link"> Click </a>
<a href="/someurl.php?id=2&name=Juan" class="ajax-link"> Click </a>
<a href="/someurl.php?id=3&name=Pedro" class="ajax-link"> Click </a>
...
<a href="/someurl.php?id=n&name=xxx" class="ajax-link"> Click </a>

<script type="text/javascript">
$(function() {
   $('.ajax-link').click( function() {
         $.get( $(this).attr('href'), function(msg) {
              alert( "Data Saved: " + msg );
         });
         return false; // don't follow the link!
   });
});
</script>

edited Jul 28 '10 at 23:58

answered Dec 16 '08 at 03:31

tvanfosson

524,688
99
697
795

2

You don't have to change anything for GET, except changing TYPE to GET. Querystring will automaticly be build. – Pim Jager Jun 18 '09 at 10:01
@Pim -- updated, thanks. I was still pretty new to jQuery when I wrote this. – tvanfosson Jun 18 '09 at 12:11
1

If you want to pass more than one parameter to the URL,use data as data:{id:'123' , name:"MyName"} where the 123 is the value of the parameter id myName is the value for the parameter name the value here can be string or variable having the value to be passed. just a simple trick to avoid string concatenation. – frictionlesspulley Jun 28 '10 at 16:09
This accepted answer looks excellent to me, but I can't help but wonder, how would this look with the onClick bindings done in jQuery instead of right in the tags? I am led to believe jQuery is meant to handle the event bindings too. – Marcus Jul 28 '10 at 23:34
@Marcus - the way I would actually do it is generate the URL as the href attribute. Then I'd add a click handler that gets the url from the anchor's href element and posts/gets that via ajax, returning false from the click handler. I can add that as an alternative. – tvanfosson Jul 28 '10 at 23:53
@tvanfosson I tried the click link get href alternative you posted (I did a copy/paste), but for some reason, this line --> $.get( $(this).attr('href') do nothing (no alert), any idea? – Patricio Carvajal H. Mar 07 '17 at 05:16
@PatricioCarvajalH. use the browser debugger to see if your request is failing for some reason - that would be my guess, that it's not getting back a valid response. – tvanfosson Mar 07 '17 at 14:45

score 5 · Answer 2 · answered Jan 05 '09 at 16:57

5

If you want to do an ajax call or a simple javascript function, don't forget to close your function with the return false

like this:

function DoAction(id, name) 
{ 
    // your code
    return false;
}

answered Jan 05 '09 at 16:57

tanathos

5,566
4
34
46

score 0 · Answer 3 · edited Jan 17 '10 at 22:46

try something like this

#vote_links a will catch all ids inside vote links div id ...

<script type="text/javascript">

  jQuery(document).ready(function() {
  jQuery(\'#vote_links a\').click(function() {// alert(\'vote clicked\');
    var det = jQuery(this).get(0).id.split("-");// alert(jQuery(this).get(0).id);
    var votes_id = det[0];


   $("#about-button").css({
    opacity: 0.3
   });
   $("#contact-button").css({
    opacity: 0.3
   });

   $("#page-wrap div.button").click(function(){

score 0 · Answer 4 · answered Dec 16 '08 at 23:19

Do you want to pass parameters to another page or to the function only?

If only the function, you don't need to add the $.ajax() tvanfosson added. Just add your function content instead. Like:

function DoAction (id, name ) {
    // ...
    // do anything you want here
    alert ("id: "+id+" - name: "+name);
    //...
}

This will return an alert box with the id and name values.

score 0 · Answer 5 · answered Dec 18 '11 at 10:41

0

<script type="text/javascript" src="jquery.js">
</script>

 <script type="text/javascript">

  function omtCallFromAjax(urlVariable)
{ 
    alert("omt:"+urlVariable);
     $("#omtDiv").load("omtt.php?"+urlVariable);
}

 </script>

try this it work for me

answered Dec 18 '11 at 10:41

Dhiral Pandya

10,311
4
47
47

Passing parameters to a JQuery function

5 Answers5

Linked