Link:
this is the page I am working on
So, I am trying to create a page that will produce a playlist of vimeo videos that will play one after another. Eventually I will have them hide and show using jquery or something so that only one embedded video iframe will appear at a time. In the meantime I am simply trying to get the vimeo api to give me control over each individual object.
So the desired result for now would be have each set up buttons control each video with its same $nummy value
where $nummy is the order in the list
The issue is that at the moment ONLY THE LAST video in the list responds to its own button-set's commands.
Here's the code WITH PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test The Loop2</title>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
</head>
<body>
<?
//db connect
$con = mysql_connect("d######t","db######104","no#######s");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
//db select
mysql_select_db("db337100104", $con);
$result = mysql_query("SELECT * FROM vim_playlist1");
while($row = mysql_fetch_array($result))
{
$nummy = $row['listnum'] ;
$url = $row['url'] ;
$nexty = $nummy+1 ;
//not an area of php
?>
<iframe class="vimeo" id="play<? echo $nummy ?>" src="http://player.vimeo.com/video/<? echo $row['url'] ?>?api=1&player_id=play<? echo $nummy?>" width="500" height="281" frameborder="0"></iframe>
<br />
<button id="playButton<? echo $nummy ?>">Play</button>
<button id="pauseButton<? echo $nummy ?>">Pause</button>
<button id="unloadButton<? echo $nummy ?>">Unload</button>
<script>
function ready(player_id)
{
$f('play<? echo $nummy?>').addEvent('ready', function()
{
$f('play<? echo $nummy?>').addEvent('finish', onFinish);
});
function onFinish(play<? echo $nummy?>)
{
$f('play<? echo $nexty ?>').api('play');
}
document.getElementById('playButton<? echo $nummy ?>').addEventListener('click', function() {
$f('play<? echo $nummy?>').api('play');
});
document.getElementById('pauseButton<? echo $nummy ?>').addEventListener('click', function() {
$f('play<? echo $nummy?>').api('pause');
});
document.getElementById('unloadButton<? echo $nummy ?>').addEventListener('click', function() {
$f('play<? echo $nummy?>').api('unload');
});
}
window.addEventListener('load', function() {
//Attach the ready event to the iframe
$f(document.getElementById('play<? echo $nummy?>')).addEvent('ready', ready);
});
</script>
<hr />
<?
//end of loop
}
?>
</body>
</html>
You are overwriting your ready function in every iteration of your loop. So only the last ready function will be executed.
An example solution would be to replace ready with ready<?php echo $nummy ?> (I suppose that $nummy is unique):
function ready<?php echo $nummy ?>(player_id) {
// your function body
}
window.addEventListener('load', function() {
//Attach the ready event to the iframe
$f(document.getElementById('play<? echo $nummy?>')).addEvent('ready', ready<?php echo $nummy ?>);
});
P.s.: It is not an ideal solution. But a possible solution.
Related
thanks for reading this,
I'm making a website. I have a popup box that asks if you are 18 years or older. Once you click "yes", the forum I'm making appears. When you click the reply button, for some unknown reason, the popup box reappears.
Why is that?
this is the php file.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Umich Chan</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
</script>
</head>
<body>
<div id="confirmage">
<h2 style="text-align:center;">Are you older than 18 years old?</h2>
<button id="close" style="display:block;margin-left:auto;margin-right:auto;margin-bottom:5px;">Yes</button>
<button id="linknoclose" style="display:block;margin:auto;">No</button>
</div>
<div id="fadeina" style="opacity:0;">
<p>
</p>
Post Anonymously Now<br>
<br>
<?php
// Connect to server and select database.
$con = mysqli_connect("$host", "$username", "$password", "$db_name") or die ("cannot connect");
$result = mysqli_query($con, "SELECT * FROM Table_forum ORDER BY `key` DESC");//
// Start looping table row
while($rows = mysqli_fetch_array($result)){
$key=$rows['key'];
$name=$rows['name'];
$input=$rows['input'];
echo "<div class='answerbox'>";
echo '<font color="blue">' .$name. '</font>';
echo "<br />";
echo "$input.";
echo "<a class='reply' href=''>Reply</a>";
echo "</div>";
echo "<div class='replybox'><textarea></textarea></div>";
/*
echo "<div class='commentbox'>";
$namecomment = mysqli_query($con, "SELECT namea FROM `postcomments` WHERE keya = '1'");//
echo ".$name.";
$inputcomment = mysqli_query($con, "SELECT input FROM `postcomments` WHERE keya = '" .mysql_real_escape_string .$key."'");//
echo ".$inputcomment.";
echo "</div>";
*/
}
mysql_close();
?>
</div>
</body>
</html>
This the js file.
$(document).ready(function() {
$(".replybox").hide();
$(".reply").css("color","blue");
$("#fadeina").hide();
$(".reply").click(function(){
$(".replybox").show();
});
$("#close").click(function(){
$("#confirmage").remove();
});
$("#close").click(function(){
$("#confirmage").empty();
});
$("#close").click(function(){
$("#fadeina").fadeTo('slow',1);
});
$("#linknoclose").click(function(){
history.back();
return false;
});
});
The popup box reappears because your Reply link has an empty href:
"<a class='reply' href=''>Reply</a>";
As Stated in RFC 2396: A URI reference that does not contain a URI is
a reference to the current document. In other words, an empty URI
reference within a document is interpreted as a reference to the start
of that document
try using href="javascript:;".
Unlike the <button> elements, the "reply" anchor needs e.preventDefault() (or return false) to inhibit its natural hyperlink behaviour, which will cause the page to reload.
The code will also simplify quite significantly.
$(document).ready(function() {
$(".replybox, #fadeina").hide();
$(".reply").css("color","blue").on('click', function(e) {
e.preventDefault(); //<<<<<<<<
$(".replybox").show();
});
$("#close").on('click', function() {
$("#confirmage").remove();
$("#fadeina").fadeTo('slow', 1);
});
$("#linknoclose").on('click', function() {
history.back();
});
});
I am having a problem with how to echo javascript in php. I have a form which on submit will execute itself and echo some text and will redirect to a page in 5secs. I am currently echoing this:
header("Refresh: 5;url=index2.php?ID=".$objResult["ID"]."");
echo '<html>';
echo '<head>';
echo '<title>Klant toevoegen</title>';
echo '<link rel="stylesheet" href="style.css" type="text/css" media="screen" />';
echo '</head>';
echo '<body>';
echo '<fieldset>';
echo ''.$Naam.' is added to the database, u will be redirected in a couple of seconds.<br><br>';
echo '</fieldset>';
echo '</body>';
echo '</html>';
The javascript I have is a countdown which counts down from 5 to 1. The code is this:
<script>
var countdownFrom = 5; // number of seconds
var countdownwin;
var stp;
function CountDownStart() {
stp = setInterval("CountDownTimer('CountDownTime')",1000)
}
function CountDownTimer(id)
{
if (countdownFrom==0) {clearInterval(stp); window.close(); }
else {
var x
var cntText = "Closing in "+countdownFrom+" seconds";
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = cntText; }
else if (document.all)
{
x = document.all[id];
x.innerHTML = cntText; }
}
countdownFrom--
}
</script>
<title>Untitled</title>
</head>
<body onload="CountDownStart()">
<Div id="CountDownTime"></div>
</body>
Now I would like to echo this countdown script to replace the <fieldset> in the html. I have tried several things like just add the whole code in 1 echo ''; and I tried to echo all the lines seperately but with both it crashes my whole script. If anyone knows how to do this it would be great!
I Wouldn't write all those echo's, instead, leave all the HTML and JS outside the PHP block
<?php
some php code
?>
HTML AND JS
<?php
More php if required
?>
And use
<?=$Naam?>
To inject your values where required
Alternatively you should look into template engines
Try to use
echo <<<EOT
/* some text here */
EOT;
You can put the script in a separate .js file and echo the script tag:
<? echo "<script type='text/javascript' src='path/to/script.js' ></script> ?>
Don't forget to remove any HTML tags from the JS file, like <body>, <head>, etc.
hey ive got a working php script, and as far as i can tell my jquery ajax function mimics anything ive seen on SO, but somehow this wont work. im posting my HTML, php, and js. can someone please help me out here? ive been at this for days without success.
on submit it seems as though the page flickers for a short (refresh?) period, but nothing happens.
HTML/js:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trade diving equipment online at DiveBay</title>
<link rel="stylesheet" type="text/css" href="dbstylesheet.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
%("#searchdivebay").submit(function(){
var word = $("#searchbox").val();
$.ajax({
type: "GET",
url: "trysearch.php",
data: $("#searchdivebay").serialize(),
context: '#content',
success: function(data){
$(this).html(data);
}
});
});
});
</script>
</head>
<body>
<center>
<div id="wrapper">
<div id="header">
<div id="hbackground">
<img src="db3.jpg" alt="hbackground" width="100%" height="100%" style="z-index:1;" />
<div id="htitle">
<span class="banner">DIVEBAY.COM</span>
<span class="byline">GET INTO DIVING, TRADE DIVING EQUIPMENT ONLINE</span>
</div>
</div>
</div>
<div id="searchandlog">
<div id="search">
<form id="searchdivebay" action="#" method="get">
<div id="searchboxholder"><input type="text" name="searchbox" id="searchbox" /></div>
<div id="searchbuttonholder"><input type="submit" name="searchbutton" id="searchbutton" value="Search DiveBay"/></div>
</form>
</div>
<div id="login">
<ul class="signreg">
<li><i>Existing user?</i>SIGN IN</li>
<li><i>or, new?</i>REGISTER</li>
</ul>
</div>
</div>
<div id="searchresults">Search results for <span id="searchword" class="word"></span></div>
<div id="content">
</div>
<div id="sitemap">
</div>
</div>
</center>
</body>
</html>
PHP:
<?php
echo '
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>searchdbresults</title>
<link rel="stylesheet" type = "text/css" href = "styledb.css" />
</head>
<body>';
$user = 'root';
$pass = null;
$pdo = new PDO('mysql:host=localhost; dbname=divebay;', $user, $pass);
$search = $_GET['searchbox'];
if($search == ""){
echo '<p style="color:black; font-size:18pt; font-family: Impact; "> You didn"t search for anything!</p>';
}
else{
try{
$stmt = $pdo->prepare('SELECT * FROM auction WHERE name LIKE ?');
$stmt->bindValue(1, '%'. trim($search) .'%');
$stmt->execute();
$numrows = 0;
echo '<table id="showresult">';
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$numrows++;
$ID = $row['ID'];
$img = $row['img'];
$name = $row['name'];
$owner = $row['owner'];
$cprice = $row['cprice'];
$iprice = $row['iprice'];
$incprice = $row['incprice'];
$etime = $row['etime'];
echo '
<tr class = "resultindex">
<td class = "imgholder">' .$img. '</td>
<td class = "infoholder">
<div style ="height:4px;"></div>
<div class = "infodiv">'.$name.'</div>
<div class = "locdiv"></div>
<div class = "userdiv"><span class="fromuser">From user: </span><br/>'.$owner.'</div>
</td>
<td style = "width:2px; background-color:#330066;"></td>
<td class ="priceholder">
<div class = "currentp"><span class="currentbid">Current Bid: </span><br/>'.$cprice.'</div>
<div class = "instantp"><span class="instantbid">Instant Sale: </span><br/>'.$iprice.'</div>
<div style = "height:5px;"></div>
<div class = "incp"><span class="nextbid">Next Bid:</span><br/>'.$incprice.'</div>
</td>
<td style = "width:2px; background-color:#330066;"></td>
<td class = "timer"><span class="timeleft">Time Left: </span><br/>'.$etime.'</td>
</tr>';
}
if($numrows == 0){
echo '
<tr>
<td colspan="4">Sorry your search for '.$search.' returned no results</td>
</tr>';
}
else{
echo '
<tr>
<td colspan="4">Displaying'.$numrows.'results</td>
</tr>';
$pdo = null;
}
}catch(PDOException $e){
echo $e->getMessage();
}
}
echo '
</table>
</body>
</html>';
?>
When you submit the form, the browser loads a new page, which creates a fresh JS environment.
Prevent the default event. (The event object is the first argument to your submit handler function, you need to capture that before you can call methods on it).
$(document).ready(function(){
%("#searchdivebay").submit(function(e){
var word = $("#searchbox").val();
$.ajax({
type: "GET",
url: "trysearch.php",
data: $("#searchdivebay").serialize(),
context: '#content',
success: function(data){
$(this).html(data);
}
});
e.preventDefault();
});
});
You need to create a separate PHP file as your Ajax handler which returns only the HTML that is supposed to go in the content section of your search results.
Right now, you are returning a complete HTML page would break the semantics and the structure of the DOM.
You're seeing a flicker because the page automatically refreshes when you click the submit button. You need to call the e.preventDefault() method to prevent that, or return false at the end of your submit handler.
In addition to all other answers, it seems that all you need to do to load the content from php file, right?
You don't need the whole ajax function for that, simply use load() with the php's path as string parameter. This will load whatever is echoed out in the php where you call load().
In addition to the prevent default comments it looks like your success function does not correctly update the html. If you want to put the search results into the #searchresults div then you'll want your success function to be:
success: function(data){
$('#searchresults').html(data);
}
I'm trying to get the value which is the id in the mysql database. However, each time I click on the image, I get null. I used this to get the value but it is not working as it keeps giving me null in the alert box.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);
while($row= mysql_fetch_array($result)){
echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this.value);'>";
echo "<br>";
}
?>
<script type="text/javascript" >
function getrating(row_id){
var x = document.getElementById(row_id);
alert(x);
}
</script>
</body>
</html>
What is the problem?
You need getrating(this.id) instead. Images don't have a value property.
Try this:
echo "<img src='".$row['filepath']."' id='".$row['ID']."' onclick='getrating(".$row['ID'].");'>";
Or you can pass this.id
<img id="row_12" onclick="getrating(this.id)" alt="image"/>
function getrating(id){
alert(id);
}
Or you can use the event object and the currentTarget propety
<img id="row_12" onclick="getrating(event)" alt="image"/>
function getrating(e){
alert(e.currentTarget.id);
}
value isn't a valid attribute of the img tag. You could use the id, or just do
echo "<img ... onclick='getrating($row[ID]);'>";
An <img> doesn't have a value property.
You are doing unnecessary work in your function too. Your code should look like this:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);
while($row= mysql_fetch_array($result)){
echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this);'>";
echo "<br>";
}
?>
<script type="text/javascript" >
function getrating(element){
alert(element);
}
</script>
</body>
</html>
By passing this to your function through the onclick event, you already have the element you are looking for without needing to use document.getElementById().
They way how you escape the ID could be the problem. I know this is already answered but just in case for those people who needs another solution.
onclick="getrating(\''.$row['ID'].'\')"
I've just started using Gigya to allow users to connect to my site. I already have a login system so I just want to connect existing users to the Gigya service.
To do this I have called the "gigya.services.socialize.notifyLogin" function which returns a Gigya User object with the UID provided by my site. [fig 1]
Do I need to do anything with this User object, like add it to a cookie or is it just for reference.
The problem that Im having is on another page, I want to allow users to connect to their social media accounts. I use the "showAddConnectionsUI" function passing my api key, but the returned object does NOT have the User object in, although the documentation says it should. How do I get the users conenctions and the key information from this function. Do I need to send any additional information along with my api key. [fig 2]
I have spent several days reading the wiki, documentation and forum for advice but I am still stuck. Any help would be greatly appreciated. Thanks in advance, Ben
[fig 1]
<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=<?php echo $key; ?>"></script>
<script type="text/javascript">
var gigyaConf = { APIKey: "<?php echo $key; ?>", signIDs: "true" }
var signature = "<?php echo $signature; ?>";
var siteUID = "<?php echo $userId; ?>";
var timestamp = "<?php echo $timestamp; ?>";
var gigyaParams =
{
siteUID:siteUID,
timestamp:timestamp,
signature:signature,
callback:gigyaNotifyLoginCallback
};
gigya.services.socialize.notifyLogin(gigyaConf, gigyaParams);
function gigyaNotifyLoginCallback(eventObj) {
if ( eventObj.errorCode != 0 ) {
alert('Gigya Error: ' + eventObj.errorMessage);
}
}
</script>
[fig 2]
<script type="text/javascript" lang="javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=<?php echo $key; ?>"></script>
<script>
var conf = { APIKey: '<?php echo $key; ?>', signIDs: 'true' };
$(document).ready(function(){
gigya.services.socialize.getUserInfo(conf, { callback: renderUI });
gigya.services.socialize.addEventHandlers(conf,
{
onConnectionAdded: renderUI,
onConnectionRemoved: renderUI
});
});
</script>
<script>
function renderUI(res) {
if (res.user != null && res.user.isConnected) {
document.getElementById("name").innerHTML = res.user.nickname;
if (res.user.thumbnailURL.length > 0)
document.getElementById("photo").src = res.user.thumbnailURL;
else
document.getElementById("photo").src = "http://cdn.gigya.com/site/images/bsAPI/Placeholder.gif";
document.getElementById("profile").style.display = "block";
} else {
document.getElementById("profile").style.display = "none";
}
}
</script>
<div id="content">
<h5>Step 1: Connect</h5>
<div id="divConnect"></div>
<script type="text/javascript">
gigya.services.socialize.showAddConnectionsUI(conf, {
height:65,
width:175,
showTermsLink:false,
hideGigyaLink:true,
useHTML:true,
containerID: "divConnect"
});
</script>
<br />
<h5>Step 2: See User Info</h5><br />
<div id=profile style="display:none;">
<img id="photo" src="" width="60" />
<br />
<span id="name" ></span>
</div>
</div>
Any help, advice, code snippits that would help will be greatly appreciated
Re: your first question, not required to do anything special with the Gigya User object. It's for your reference.
Re: your code, I can't tell if you're using JQuery but I was getting an error with your $(document).ready function. I modified your code slightly by adding body onLoad and everything worked. This assumes you have connected with a provider. Here's my code... hope it helps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" lang="javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=<?php echo $key; ?>"></script>
<script>
var conf = { APIKey: '<?php echo $key; ?>', signIDs: 'true' };
function onLoad() {
gigya.services.socialize.getUserInfo(conf, { callback: renderUI });
gigya.services.socialize.addEventHandlers(conf,
{
onConnectionAdded: renderUI,
onConnectionRemoved: renderUI
});
}
</script>
<script>
function renderUI(res) {
if (res.user != null && res.user.isConnected) {
document.getElementById("name").innerHTML = res.user.nickname;
if (res.user.thumbnailURL.length > 0)
document.getElementById("photo").src = res.user.thumbnailURL;
else
document.getElementById("photo").src = "http://cdn.gigya.com/site/images/bsAPI/Placeholder.gif";
document.getElementById("profile").style.display = "block";
} else {
document.getElementById("profile").style.display = "none";
}
}
</script>
<body onload="onLoad()">
<div id="content">
<h5>Step 1: Connect</h5>
<div id="divConnect"></div>
<script type="text/javascript">
gigya.services.socialize.showAddConnectionsUI(conf, {
height:65,
width:175,
showTermsLink:false,
hideGigyaLink:true,
useHTML:true,
containerID: "divConnect"
});
</script>
<br />
<h5>Step 2: See User Info</h5><br />
<div id=profile style="display:none;">
<img id="photo" src="" width="60" />
<br />
<span id="name" ></span>
</div>
</div>
</body>
</html>