Passing parameters to a JQuery function

JavascriptJqueryHtmlFunctionParameters

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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>

Solution 2 - Javascript

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;
}

Solution 3 - Javascript

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.

Solution 4 - Javascript

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(){
    

Solution 5 - Javascript

<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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjmpenaView Question on Stackoverflow
Solution 1 - JavascripttvanfossonView Answer on Stackoverflow
Solution 2 - JavascripttanathosView Answer on Stackoverflow
Solution 3 - JavascriptLeandro ArdissoneView Answer on Stackoverflow
Solution 4 - JavascriptRoko MiseView Answer on Stackoverflow
Solution 5 - JavascriptDhiral PandyaView Answer on Stackoverflow