CODEWITHSUNDEEP
phpjavascriptjquery
Genadinik
Genadinik

Reputation: 18629

How to get parameters from a link that callls a jQuery function?

I have a link that looks like this:

<p class="half_text">
    <?php echo $upvotes; ?>
    <strong><a class="vote_up" style="color: #295B7B; font-weight:bold;" href="#">Vote Up</a></strong> |
    <?php echo $downvotes; ?>
    <strong><a class="vote_down" style="color: #295B7B; font-weight:bold;" href="#">Vote Down</a></strong>
</p>

and I have the jQuery code that looks like this:

<script type="text/javascript">
$(document).ready(function() 
{
    $('.vote_up').click(function() 
    {        
            alert("up");

alert ( "test: " + $(this).attr("problem_id") );

//                $(this).attr("data-problemID").

        $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {           
                    // ? :)



                }
            });


        //Return false to prevent page navigation
        return false;
    });

    $('.vote_down').click(function() 
    {
        alert("down");

        //Return false to prevent page navigation
        return false;
    });    
});
</script>

How can I get the parameter value which is problem_id ? If I add a url in the href parameter, I think the browser will just go to the url, no? Otherwise - how can I pack parameter values into the jQuery?

Thanks!

Upvotes: 0

Views: 233

Answers (3)

Vyriel
Vyriel

Reputation: 199

do you mean, getting variables from the php page posted?

or to post?

anyway here's a snippet to replace the $.ajax

$.post('/problems/vote.php', {problem_id: problem_id, action: 'up'}, function(data) {
// data here is json, from the php page try logging or..
// console.log(data);
// alert(data.title);
}, 'json');

{problem_id: problem_id, action: 'up'} are the variables posted... use $_POST['problem_id'] and $_POST['action'] to process..

use simple variables names with jQuery.data and make sure you have latest jQuery.. let me try to round it up..

<a href="#" data-problemid="11" data-action="up" class="votelink">up</a>
<a href="#" data-problemid="11" data-action="down" class="votelink">down</a>

<script type="text/javascript">
  $('.votelink').click(function() {
    $.post('/problems/vote.php', {problem_id: $(this).data('problemid'), action: $(this).data('action')}, function(data) {
      // data here is json, from the php page try logging or..
      // console.log(data);
      // alert(data.title);
    }, 'json');
  });
</script>

Upvotes: 1

jfriend00
jfriend00

Reputation: 707158

If what you're trying to figure out is how to embed the problem ID in the link from your PHP so that you can fetch it when the link it clicked on, then you can put it a couple different places. You can put an href on the link and fetch the problem ID from the href. If you just do a return(false) from your click handler, then the link will not be followed upon click.

You can also put it as a custom attribute on the link tag like this:

<a class="vote_up" data-problemID="12" style="color: #295B7B; font-weight:bold;" href="#">Vote Up</a>

And, then in your jQuery click handler, you can retrieve it with this:

$(this).attr("data-problemID").

Upvotes: 1

Rob W
Rob W

Reputation: 348972

Because your $.ajax is defined in the same scope of the variable, you can use problem_id to obtain the variable value.

An overview of your current code:

var problem_id = "something"; //Defining problem_id
...

$.ajax(
  ...
  success: function(){
    ...
     //problem_id can also be accessed from here, because it has previously been 
     // defined in the same scope
    ...
 }, ...)
 ....

Upvotes: 2

Related Questions