To understand a line of jQuery

Question

What does the following line mean?

    jQuery.post('/codes/handlers/delete_a_question.php', 
    { question_id: jQuery(this).attr('question_id') }

Context in HEAD

jQuery('a.delete_question').live('click', function(){
    jQuery.post('/codes/handlers/delete_a_question.php', 
    { question_id: jQuery(this).attr('question_id') }, 
        function(data){
            alert ("Output of the delete.php -page: " + data );
                                        // `data` is probably unnecessary
    }) 
});

My handler in /codes/delete_a_question.php

$dbconn = pg_connect("host=localhost port=5432 dbname=noa user=noa password=123");
$result = pg_prepare ( $dbconn, "delete_question_query",
    "DELETE FROM questions
    WHERE question_id = $1"
);
$result = pg_execute ( $dbconn, "delete_question_query", array ( $_GET['question_id'] ) );
header( "Location: /codes/index.php?successful_removal");

HTML

 echo ("<a href='#' class='delete_question'"
      . " id=question_id'" . $question_id . "'"   // to have question_id777
      . ">delete</a>"
 );

I am trying to remove a question if the user clicks a link first by getting the question_id from GET. However, I have not managed to get the jQuery code to work. I get the following popup and the question is not removed.

I get now as a popup this code after solving the problem with one ( and changing $_GET to $_POST.

Answer 1

post

Load a remote page using an HTTP POST request.

In this case loads delete_a_question.php

attr

The second parameter is key/value pairs or the return value of the .serialize() function that will be sent to the server.

In this case the attribute question_id of the clicked anchor is taken

function(data)

is the callback function to be executed when the data is loaded successfully.

live

binds a handler to an event for the matched element.

In this case binds a click event handler.

Answer 2

The method signature for $.post is:

jQuery.post( url, [data], [callback], [type] )

So in this line:

jQuery.post('/codes/handlers/delete_a_question.php', 
{ question_id: jQuery(this).attr('question_id') }

the first string parameter is the URL the post request will be sent to, and the second is an object containing data as key/value pairs. The third (which in the case of your code appears on the next line) is a callback function. The only mandatory parameter is the first one.

JQuery's $.post method encapsultes an $.ajax call with the type option set to "POST".

Answer 3

Your solution doesn't exactly relate to your question, but you're missing a ) on the pg_execute line in your PHP and that's what the error's about.

Answer 4

It looks to me like the problem is in the PHP code and not the jQuery -

The problem you are having is likely related to the fact that you are getting the parameter "question_id" using the $_GET method:

$_GET['question_id']

which only retrieves parameters from a GET request. In this case you are making a POST request (with the jQuery.post() function), so you should use

$_POST['question_id']

instead.

Answer 5

If you translate it to plain English this code:

jQuery.post('/codes/handlers/delete_a_question.php', 
{ question_id: jQuery(this).attr('question_id') }

reads:

"Asynchronously make a POST request to '/codes/handlers/delete_a_question.php' with the parameter 'question_id' who's value should be the value of 'question_id' html attribute of 'this'."

In your case 'this' would refer to the link being clicked on to delete a question. It's looking for an attribute named 'question_id' which is not a valid HTML attribute (or XHTML) attribute for an anchor tag. This may be causing the problem.

Where in the link tag are you storing the question id? If you are using XHTML you could use the "rel" attribute, who's job it is to define the relationship between an anchor and what it links to (in this case it could be the relationship between the link and the question to be deleted).

So change this:

<a href="#" class="delete_question" question_id="123">delete</a>

To this:

<a href="#" class="delete_question" rel="123">delete</a>

and then in your javascript/jQuery change this:

{ question_id: jQuery(this).attr('question_id') }

to this:

{ question_id: jQuery(this).attr('rel') }