Question

I am trying to:

click on the link shown below and have the value passed to an JQUERY $.get (I think it has to be done like that) and this should be made available to a SQL snippet which will include it its WHERE clause.

LINK

$sOutput .= '"<a href=\"#whatever?' .addslashes($aRow['id_cruise']) .'\" class=\"flip\">'.addslashes($aRow['from_country']).'</a>",';

When I click on the link, you see that Flip class. That does open alright a slide pannel within which I have a div that would be populated after a SQL query works with the value sent:

JQUERY SNIPPET

<script type="text/javascript"> 
$(document).ready(function(){
$('a.flip').live('click',function(){
    $(".panel").slideToggle("slow");

  });
});
</script>

As you can see, it uses the LIVE function so that up on clicking indeed activates the slide pannel open. But I need that last bit more, the one that sends the value (of id_cruise). When I hover down the rows, I can see that the value of ID changes, which is great, but however I am not getting to make it passed to the snippet and picked up by the SQL query.

So I can see that in the link, where I write “whatever”, indeed it doesnt matter, as long as it has the # sign. Note that the Link is part of the server processing file, whilst the JQUERY is on the user visible page file, they are in two different pages.

UPDATED FROM HERE, INCLUDING NOW THE CODE FROM JEFF:

The link looks so now:

$sOutput .= '"<a href=\"#id?' .addslashes($aRow['id_cruise']) .'\" class=\"flip\">'.addslashes($aRow['from_country']).'</a>",';

Jeff wisely indicated how there should be a third file which would get the parameter from the second JQUERY snippet, return it and this second would pass it to a third one located just below. This third snippet is the one that forwards it to the DIV box located inside the slide panel.

<script type="text/javascript"> 

$(document).ready(function(){
$('a.flip').live('click',function(){
$(".panel").slideToggle("slow");
      DoSomethingWith(this.id);

     });

});
</script>


 <script type="text/javascript">

function DoSomethingWith(id) {
  $.get("SendIdToDatabase.php", {idCruise: id}, AnotherFunction);
}
function AnotherFunction(str) {
  $("#reviews").html(str);
}
</script>

OTHER CONTRIBUTOR SAID THAT IT COULD BE MERGED AND SIMPLIFIED INTO THIS:

$(function() {
      $('a.flip').live('click',function() {
            $('.panel').slideToggle(slow');
            $('#reviews').load('SendIdToDatabase.php', {idCruise: this.id});
      });
});

SO NOW I CREATE THE PHP CODE (SendIdToDatabase.php) THAT WILL HANDLE THE SQL REQUEST

 <?php


$id_crucero = $_REQUEST['id_cruise']; //this is what I (hopefully) should get from the page
              require ('mysqli_connect.php');

                    $sql ="SELECT description
                        FROM cruises
                        WHERE id_cruise
                        = '".$id_crucero."'";

                        $result = @mysql_query ($sql);

                    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {


                    $reviews = ($row['description']);
                    echo "$reviews";
                    }        

                      ?>

AND FROM HERE IT SHOULD ECHO IT TO THE SECOND AJAX CODE SNIPPET WHICH FORWARDS IT TO THE PANEL (WHICH I HAVE RENAMED TO “REVIEWS” AND IT IS A DIV, NOT AN HTML)

BUT SOME LINK MUST BE BUGGY AS AT SOME POINT THE VALUE IS NOT PASSED OR RECEIVED.

AS OF 1 DECEMBER THE VALUE IS STILL NOT PASSED ON. I HARDCODED SOME TEXT IN THE PHP SCRIPT AND YES, THAT IS SHOWN IN THE DIV BOX INSIDE THE PANEL BUT IT DOES NOT SHOW THE VALUE

Answer 1

I believe what you are looking for is the “this” object. Within the “this” object, you can get the id property. For example:

<script type="text/javascript"> 
$(document).ready(function(){
$('a.flip').live('click',function(){
    $(".panel").slideToggle("slow");
    DoSomethingWith(this.id);
  });
});
</script>

Once you have the id, you can then pass it to another script with Ajax for processing:
For Example:

<script type="text/javascript">
function DoSomethingWith(id) {
  $.get("SendIdToDatabase.php", {idCruise: id}, AnotherFunction);
}
function AnotherFunction(str) {
  $(".panel").html(str);
}
</script>

Check out jQuery Get for documentation on sending “get” Ajax calls.

You would need to write the php script (SendIdToDatabase.php) to do whatever you wanted with the id. Don’t forget to remove the #Whatever, from the id before using it.

As for why it needs to be a separate script, you need to understand the “disconnected” nature of http requests. Here are some decent explanations and diagrams.