I need to get all statistics from a Youtube channel so that I can create a document using PHP containing all of the data.
I want information such as the dates the video was viewed, if it has been liked, if it has been blogged and so on.
Is it possible to do this?
Thanks
Please see the sample code below for how you can do some of this. You can find a basic demo here. As seen, you do not necessarily need to write any PHP code to do this. More details are available in developer documents.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
var dataContainer = $("#data ul");
$.ajax({
url:'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=jsonc&v=2&callback=?',
dataType: "jsonp",
timeout: 5000,
success: function(data){
$.each(data.data.items,
function(i, val) {
if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
dataContainer.append('<li>'+val.title+'</li>');
}
});
}
});
});
});
</script>
</head>
<body>
<h2>Header</h2>
<p>Paragraph</p>
<p>Paragraph.</p>
<button>Click me</button>
</body>
</html>
Related
I've used jQuery to create a page where users can click on a cell in a table that says, "delete," and it will send an ajax request to delete that entry from a database based on the id of the cell and then it will alter the CSS to hide the cell.
I created a test page while I was creating/tweaking the jQuery code. This page works perfectly. Here is the code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
(function( $ ){
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
})( jQuery );
});
</script>
</head>
<table border="1">
<tr>
<td>Cell 2, Row 2</td><td onclick="$(this).deleterow(event);" id="13376">delete</td>
</tr>
</table>
<html>
Now I'm working on getting the code to work in the actual page that it's going to be used in. This page has a short form where users can select their name and a date. This form sends an ajax request that returns the results in a div. The data that is returned is a table , and this is where I'm trying to get my function to work. This table has a tablesorter script attached to it and also my function attached to it.
The tablesorter still works fine, but nothing happens when I click the cell with "delete" in it. I used FireBug to look at the issue and it gives me the error, "TypeError: $(...).deleterow is not a function"
Here is the code for the main page where the user submits a form and where the result is loaded in a div:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#myTable').tablesorter();
}
);
</script>";
</head>
<body id="my-students">
<?php include 'header.php'; ?>
<?php include 'nav-tutoring.php'; ?>
<div id="content">
This is where you can view students whom you have assigned to tutoring.
<p>
You may change the way each column is sorted by clicking on the column header.
<p>
<b>Select your name and the date to view students you have assigned for that day.</b>
<form> My form is here; removed to make post shorter </form>
<script>
$('#submit').click(function()
{
$.ajax({
type: 'POST',
url: "mystudents.php",
data: $('#name').serialize(),
success: function(data) {
$("#list").empty();
$('#list').append(data);
}
});
return false;
});
</script>
<div id="list"></div>
Here is the code for the page that is inserted into the div underneath the form. This is the page where the tablesorter works, but I cannot get my function to work. I've also made sure that I include these script libraries in the head of the main page where this div is.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#myTable').tablesorter();
(function($) {
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
})(jQuery);
});
</script>
<table id='myTable' class='tablesorter' border="1">
<thead><tr><th>ID Number</th><th>Last</th><th>First</th><th>Tutoring<br>Assignment</th><th>Assigning Teacher</th><th>Delete?</th></tr></thead><tbody>
<?php
while($row = mysql_fetch_array($data)){
echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='$(this).deleterow(event);' id='".$row['pk']."'>Delete</td></tr>";
}
?>
</tbody></table>
I've done many searches based on the error I'm getting, but I just can't seem to fix the problem. Any help would be greatly appreciated.
First it makes no sense to include the $.fn.deleterow = function(event) { inside the document.ready. You should move it outside of that method.
Personally I would change the code to not rely on the inline event handlers in the table. You are using jQuery, so utilize it. Use event bubling to your advantage.
Add it to the table level and listen for click events on the td's that have ids.
$("table tbody").on("click", "td[id]", function(e){
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = this.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
});
jsFiddle
Test if jQuery loaded in console (check for jQuery variable)...
You should wrap your code this way:
(function( $ ){
$(document).ready(function(){
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
});
})( jQuery );
But the most important is check if jQuery are loading correctly and solve it...
Hope it help
try rewriting to a usual javascript function
function deleterow(id) {...}
and in php
echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='deleterow(".$row['id']. ")' id='".$row['pk']."'>Delete</td></tr>";
It's due to this:
<td onclick='$(this).deleterow(event);'
JavaScript can't see this as a function due to the enclosing ' '.
What I advise doing is this:
<td class='deleterow'>
then
$(body).on('click', '.deleteRow', function(event) {
$(this).deleterow(event);
});
You'd be better off binding those events using jQuery's handers instead of onclick, which is poor practice. Eg:
$('#myTable').on('click', 'td', function(e) {
$(this).deleterow(e);
});
I am trying to use jQuery's ajax to call a php script onload. This script will return xml from a url web service, parse through it, and then display bits and pieces of it into a div tag when the page loads (onload). I'm okay with php when it comes to using forms, but getting php scripts to run onload is not working for me. Could someone please look through my code and give me your advice? Thanks in advance.
HTML:
<!doctype html>
<html>
<head>
<title>Word of the Day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<h3>Word of the Day: </h3>
<div id="word_day"></div>
</body>
</html>
JavaScript:
$(document).ready(function() {
$(window).load(function() {
$.ajax({
post: "GET",
url: "word_day.php"
}).done(function() {
alert(this.responseText);
}).fail(function() {
alert(this.responseText);
});
});
});
I did not add my PHP code since I was pretty sure that it wasn't the cause of my frustration.
You don't need those two handlers, just one:
$(document).ready(function()
{
$.ajax(
{
post: "GET",
url: "word_day.php"
}).done(function()
{
alert(this.responseText);
}).fail(function()
{
alert(this.responseText);
});
});
As you had it you were trying to create one handler when the handler fired which was never going to work.
Edit:
Your done/fail part should look like:
}).done(function(data)
{
alert(data);
}).fail(function(jqXHR, textStatus, errorThrown)
{
alert(textStatus);
});
I got a left_column with a #form, when I sumbmit it should load the results on #content_div without refreshing the page.
Im using this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dateform').submit(function(evt) {
evt.preventDefault();
$.ajax({
url: "charts/client.php",
type: 'POST',
data: $(this).serialize(),
success: function(result) {
$('#content_div').html(result);
}
});
});
});
</script>
<div id="content_div">
Nothing seems to appear.
And firebug reports this:
ReferenceError: google is not defined
This charts/client.php is using google api, and yes i've declared it like this:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
What am I doing wrong?
Thanks
use ajax form
<script>
// wait for the DOM to be loaded
$(document).ready(function()
{
// bind 'myForm' and provide a simple callback function
$("#tempForm").ajaxForm({
url:'../calling action or servlet',
type:'post',
beforeSend:function()
{
alert("perform action before making the ajax call like showing soinner image");
},
success:function(e){
alert("data is"+e);
alert("now do whatever you want with the data");
}
});
});
</script>
you can find the plugin here
It seems that the error you get is from the client.php, not from the actual jquery ajax script.
Probably you tried to call a google method before creating a new instance of the google object you used. I could help you out more if you post the client.php's code here.
For example, when i have worked with gmaps api:
trying to do:
geocoder.geocode( { 'address': target}, function(results, status) {...
before setting :
var geocoder = new google.maps.Geocoder();
will return "google is not defined";
i want to pass a variable from jquery to php but my code doesnt work .I tried very hard but no luck . When i click the button nothing happens.plz help thank you
one more thing i tried this without passing variable and i use only echo command then it works but when i pass variable nothing happens
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("button").click(function(){
var var_data = 5;
$.ajax({
url: "myscript.php",
data: { var_php_data: var_data },
success: function(data) {
// do something;
alert(data);
}
});
});
</script>
</head>
<body>
<button>Change Content</button>
</body>
</html>
myscript.php contains the following code
<?php
echo $_GET['var_php_data'];
?>
Try wrapping your script in a document ready handler. Also you have a trailing comma (,) after the success callback that you should remove. Also you should use a , instead of ; after the data parameter. Specifying the HTTP verb for your AJAX request might also be useful:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
var var_data = 5;
$.ajax({
url: 'myscript.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
alert(data);
}
});
});
});
</script>
</head>
<body>
<button>Change Content</button>
</body>
</html>
The reason you need to wrap your click registration in a document ready handler is because you put your script inside the <head> section of your markup and the button hasn't yet been loaded by the browser when you attempt to subscribe to its click handler.
You can install Firebug (Firexox plugin), or user something similar for your browser to see real HTTP request and response. If you will post them here it will be more simple to find the problem.
Track request in FireBug. You can find by FB did request success (200) as well as date send by request.
Also, try http://{your_host}>/myscript.php?var_PHP_data=echoText
Addition:
Darin Dimitrov described the problem right way
I'd like to track when people click the Facebook "Like" button on my website.
I have a small script set-up, but it doesn't seem to work and I'm out of ideas of what it could be. Any suggestions? The AppID is correct and this script is just for testing so don't mind the lack of validation:
index.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>FB Like Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({appId: 'x', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
$.ajax({
type: 'POST',
url: 'like-sql.php',
data: ({liked : 1})
});
});
FB.Event.subscribe('edge.remove', function(response) {
$.ajax({
type: 'POST',
url: 'like-sql.php',
data: ({liked : 0})
});
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'http://connect.facebook.net/nl_NL/all.js#appId=x&xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
});
</script>
<fb:like href="http://x.x.x" layout="button_count" show_faces="true" width="500"></fb:like>
</body>
</html>
like-sql.php
<?php
$status = $_POST['liked'];
mysql_query("UPDATE `fb_like` SET umk_like = $status WHERE user_id = '3432'");
?>
I'm new to this whole jQuery ajax thingy, so I don't really know how I should debug this. Any suggestions are welcome :)
EDIT: Nevermind guys I got it.
I'm testing this in an external file, where I don't have jQuery included by default ;) I can't believe it took me this long to figure it out, lol. Thanks anyway for all the help!
Try to alert() something in the event listener itself, to see if it is subscribed correctly
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Like caught !');
$.ajax({
type: 'POST',
url: 'like-sql.php',
data: ({liked : 1})
});
});
and add notify=true to fb:like
<fb:like notify="true" href="http://x.x.x" layout="button_count" show_faces="true" width="500"></fb:like>
I had the same problem with "comment.create", and I solved it by notify="true", and subscribing to "comments.add" ! but I still can't subscribe to "comment.remove"!
Nevermind guys I got it.
I'm testing this in an external file, where I don't have jQuery included by default ;) I can't believe it took me this long to figure it out, lol. Thanks for all the help though!