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!

Bassem · Accepted Answer · 2013-06-28T23:40:55.817

0

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".

edited Jun 28 '13 at 23:40

answered Jun 28 '13 at 23:32

Bassem

3,135
2
25
41

1

Good solution. Perhaps you should mention, though, that IDs need to be unique. OP should use `class=` instead of `id=modal_window`. – cssyphus Jun 28 '13 at 23:37
Thank you very much jsFiddle for your answer. Just 2 more questions: – Freddie Jun 29 '13 at 00:11
1) How do I send the var tmp_sport_id to function ajax_question? 2) How can I capture the variable sport_id if it is on the following link, and where should I put it: Make Question Thanks again! – Freddie Jun 29 '13 at 00:16
The answer to 1) is in the answer I provided (hidden input field) and the answer to 2) is `Make Question` – Bassem Jun 29 '13 at 00:17
Thanks BassemDy, but I'm still stuck! 1) If I put this code on the opened window: 2) Which is the correct code to use in step of var tmp_sport_id = $(this).parent().prev().text(); to capture the sport_id from title? – Freddie Jun 29 '13 at 01:16
1) `$("id_sport").val()` you need to make sure the ID there is always the one clicked (by clearing it out when the window is closed etc, u need to cover all scenarios) 2) `$(this).attr('title')` You really need to do some research on how to use jQuery, I can't help you past thing point. All your questions have answers on Stack Overflow already. – Bassem Jun 29 '13 at 02:17

How to send a variable from a PHP loop to Javascript

1 Answers1