How to send a variable from a PHP loop to Javascript

Question

I have a loop that looks like this:

     <?
     $i=1;
     while ($u=mysql_fetch_array($result1)){
     ?> 
     <table>
          <tr>
            <td>Sport</td>
          </tr>
          <tr>
            <td><?php echo $u['sport_id'];?></td>
            <td>
            <a id="modal_window" href="#" rel="open">Make Question</a>
            </td>
          </tr>
     <?php
     $i++;
     } 
     ?>
     </table>

The following modal window is opened when someone clicks on "Make Question":

            <div id="mascara"></div>
            <div id="ventana">
            <a class="ventanatitulo" href="#" rel="close">Close Window</a>
            <h2>Write your question:</h2><br/>
            <form>
            <input type="text" id="question"/>
            <br />
            </form>
            <a href="#" onClick="ajax_question();"/>Send question</a>
            </div>

What I want to do, is that every time someone clicks on "Make Question", capture into a variable the question that was written on the modal window (no problem to do this), and the sport_id that was clicked (I DON´T KNOW HOW TO DO THIS!!)

This is the code for the modal window:

$(document).ready(function(e) {         
    $('a[rel="open"]').click(function(e) {
        e.preventDefault();

        var ancho = $(window).width();
        var alto = $(document).height();

        var mascara = $("#mascara");
        var ventana = $("#ventana");

        mascara.css({
            "width" : ancho,
            "height" :  alto
        });

        mascara.fadeIn("fast", function() {

            ventana.css({
                "top" : (alto / 3) - (ventana.height() / 2),
                "left" : (ancho / 2) - (ventana.width() / 2)
            });

            ventana.fadeIn("fast");
        });
    });

    $("a[rel='close']").click(function(e) {
        e.preventDefault();
        $("#ventana").fadeOut("fast", function() {
            $("#mascara").fadeOut("fast");
        });
    }); 
});

And finally this is the code where I want to capture all the variables and send them to page1.php:

function ajax_question(){
var question=$('#question').val(); //WRITTED QUESTION IS CAPTURED WITHOUT PROBLEM!
var sport_id= //HOW DO I CAPTURE THE SPORT_ID THAT WAS CLICKED?
$.ajax({
    url:'page1.php',
    type:'POST',
    dataType:'text/html',
    data:'question='+question + '&sport_id='+sport_id,
    success: function(return){
                some code...
    }
});
}

I hope you understand what I'm trying to do. Thanks in advance to anyone who can help me!

Answer 1

You just need to grab the previous sibling with jQuery, get the Sport ID value from your <td>SPORT ID</td> clause and give it as a parameter to the opened window which stores it in a hidden input field.

Here's a sample code:

$(document).ready(function(e) {         
    $('a[rel="open"]').click(function(e) {
        e.preventDefault();

        var tmp_sport_id = $(this).parent().prev().text();
        alert(tmp_sport_id);
    });
});

jsFiddle

Important Note:

When using element IDs such as <a id="modal_window" href="#" rel="open">Make Question</a> in your loop, you should be careful that IDs are unique. You are not allowed to use the same ID twice. Change that to class="modal_window".