CODEWITHSUNDEEP
phpjavascriptjqueryajax
DavidT
DavidT

Reputation: 2481

Purpose of function(data){} in JQuery $.get()

In my MySQL database there is a column for VideoID and VideoCode

I have a PHP function in backend.php that aims to pick the next video in the list as follows:

$VideoID = 0;

function nextvideo(){
    global $VideoID;
    $VideoID = $VideoID + 1;
    $sql = mysql_query("SELECT * FROM Videos WHERE VideoID = '".$VideoID."'");
    $result = mysql_fetch_array($sql);
    return $result[2];
}

$VideoCode = nextvideo();

I then have the $VideoCode variable echo in my front end file inside a url that gives the embedded video.

That is all fine and it works, each time the nextvideo() function is called it picks the next $VideoCode correctly. However I want to implement a 'next' button that allows the user to effectively call the nextvideo() function and therefore load the next video. So I know i need to use AJAX and the .get() function but I have no idea how to use it and have tried reading up on it. So far I have this:

<script type="text/javascript">
  function next() {
      $.get("backend.php", *1*, *2*);
      return false;
  }
</script>

<a href="#" onclick="next();">Next</a>

I know that after backend.php in the $.get() function i need some more info, *1* being something to send to the backend file and *2* being what to do with the result once its sent back. This is where I am stuck.

Does *1* need to be nextvideo() because that's the PHP function i wish to call, then *2* be something that will refresh the page so that the $VideoCode variable is updated and the next video is updated? Reading the documentation i know it needs to look something like:

$.get("test.php", function(data){
    alert("Data Loaded: " + data);
});

But what is function(data)?

Upvotes: 0

Views: 453

Answers (2)

Olivier Lamothe
Olivier Lamothe

Reputation: 1

The function signature is :

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url : The url you want to make a "get" http request to. It could be an html file, a plain text file, an image, etc.. In your case, it is a php file that will execute itself entirely every time you call it.

[data] : optional parameter , the data you want to send with your request, in the form of key - values pairs. For example you could send , with your request : { id : 1 } , which your server (php script in that case) would receive and could use to serve the appropriate response to your client (your javascript in that case)

[success] : optional parameter , the callback function to be executed once the server has answered. It is an optional parameter, but you will , most probably, always want to do something once the server has done it's job and served you a response.

In the example you provided :

function(data){
   alert("Data Loaded: " + data)
};

is an anonymous function (is not named). When executed, that function will receive up to 3 parameters: success(data, textStatus, jqXHR). We are interested in the data sent back from the server. It can be anything : text, xml , html , json etc. Since it is only an example on the jquery documentation website, the function only alert(annoying message box from the browser) the data it received, and does really nothing useful with it. I'm not really sure I understand what you want to do in your specific case, but I hope my general answer will help you.

Upvotes: 0

Bad Wolf
Bad Wolf

Reputation: 8349

function(data) is a javascript function which is called when the request completes, passing in the variable data which is the page returned from the server. So in other words, when the request completes the code in that function will be executed and the variable data will contain whatever the server sent back from your request.

What you want to do is something like this

<script type="text/javascript">
  function next() {
     var currentVideoId = $('#videoId').val();
     $.get("backend.php", { videoId: currentVideoId }, function(data) {
        $('#video').html(data); 
        $('#videoId').val($('#videoId').val() + 1);
     });
     return false;
  }
</script>

<a href="#" onclick="next();">Next</a>

Where you have a hidden input field with id videoId which has a value of the current video's id and an element with id video which is the element to be updated with the new video.

Your PHP script would look something like this:

$VideoID = intval($_GET['videoId']) + 1;
$sql = mysql_query("SELECT * FROM Videos WHERE VideoID = '".$VideoID."'");
$result = mysql_fetch_array($sql);
echo $result[2];

This accepts the $_GET variable being passed in by the AJAX function and prints out the video code which is sent to the data variable in the javascript.

Hopefully this helps, if you're still unsure of anything please ask!

Upvotes: 3

Related Questions