switch pages using AJAX PHP - javascript

Good day all, I'm working on a jquery game and I'm making a welcome screen. I'm using ajax to switch pages. So far the pages are switching exactly but the page index.php where game's elements are running has stopped working and no animation is working. Here are the codes:
welcome.php script:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
function swapContent(cv) {
var url = "page-switch.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
</script>
</head>
<body>
Play!
Scoreboard
<div id="myDiv"></div>
</body>
page-switch.php script:
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
header('Location: index.php');
} else if ($contentVar == "con2") {
header('Location: score-post.php');
}
?>
index.php script:
<head>
<title>Space Game Test 01</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-collision.js"></script>
<script src="js/core-animation.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/content-style.css">
</head>
<body onload="start()">
<div id="content">
<div id="galaxy"><img src="images/galaxy.png" /><img src="images/galaxy.png" /></div>
</div>
<div id="linkpanel"></div>
<div id="scoreboard">Score<br><div id="score">0</div><input type="button" id="pause" value="Pause" /><br>
<input type="button" id="resume" value="Resume" /></div>
<script>
var pause = null;
$("#resume").click(function () {
if(!pause)
{
pause = setInterval(scroll_ns, 50)
}
});
$("#pause").click(function () {
clearInterval(pause);
pause = null;
});
</script>
</body>
Am I doing wrong here? I'm pretty noob in ajax but I really need to learn. Please help! Tnx.

you can use load function also
<script>
function swapContent(page) {
jQuery( "#myDiv" ).load(page);
}
</script>
Play!
Scoreboard
<div id="myDiv"></div>

You may try something like this you have to redirect to the page after getting response from ajax.
<script>
function swapContent(cv) {
var url = "page-switch.php";
$.post(url, {contentVar: cv} ,function(data) {
//alert(data)
if(data="first"){
window.location.href = "index.php";
}
if(data="second"){
window.location.href = "score.php";
}
});
}
</script>
</head>
<body>
Play!
Scoreboard
<div id="myDiv"></div>
</body>
page-switch.php script:
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
echo "first";
} else if ($contentVar == "con2") {
echo "second";
}
?>

Related

How do I create a Rewind Functionality for YouTube video

Hi Friends I want to develop a rewind functionality that when i clicked on rewind button the YouTube Video which is shown in I-frame rewind for 10 sec But I could not get How can I Create this If you have any solution Please share with me soon.
Here is my code.
[![<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube videos proxy server</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<?php
$val="";
$vid="0TvTyj5FAaQ";
$str = file_get_contents('video.json');
$json = json_decode($str, true);
foreach ($json as $value) {
if($value\["id"\]==$vid){
$val="TRUE";
break;
}else{
continue;
}
}
if($val=="TRUE"){ ?>
<div>
<div style="height: 345px;width: 700px;background: black;">
<span style="color: white;">This video has restricted content.</span>
</div>
</div>
<?php }else{
?>
<div id="player">
<iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
<br/>
<button id='rwnd' onclick="rewind()" >Rewind</button>
</div>
<?php } ?>
<script type="text/javascript">
var player=document.getElementById("player");
var rewind= function(){
if (! player){alert("no obj");
}else{
alert('hello');
var currentTime = player.getCurrentTime();
console.log(currentTime);
if(currentTime>5){
player.seekTo(currentTime - 5, true);
player.playVideo();
}
}
};
</script>
</body>
</html>][1]][1]
Here is video.json file.
[
{
"id": "0dV1Bwe2v6c"
},
{
"id":"0dmhKtQ74wo"
},
{
"id":"0dV1Bwe2v6c"
}
]
Friends I got the answer now hope it will help you too. json file is same as in the question i added in code.
Here is the solution....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube videos proxy server</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<?php
$val="";
$vid="0TvTyj5FAaQ";
$str = file_get_contents('video.json');
$json = json_decode($str, true);
foreach ($json as $value) {
if($value["id"]==$vid){
$val="TRUE";
break;
}else{
continue;
}
}
if($val=="TRUE"){ ?>
<div>
<div style="height: 345px;width: 700px;background: black;">
<span style="color: white;">This video has restricted content.</span>
</div>
</div>
<?php }else{
?>
<div id="player1">
<iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
<br/>
<button id='rwnd' disabled>Rewind</button>
</div>
<?php } ?>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerReady
}
});
}
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#rwnd').prop('disabled', false);
$( "#rwnd" ).click(function() {
rewind();
});
}else{
$('#rwnd').prop('disabled', true);
}
}
function rewind(){
var currentTime = player.getCurrentTime();
if(currentTime>10){
player.seekTo(currentTime - 10, true);
player.playVideo();
}else{
player.stopVideo();
console.log("Try to rewind video when current playing time greater than 10.");
}
};
</script>
</body>
</html>

JQuery Post Callback filter select data

Ich have the following site with JQuery:
<html>
<head>
<title>Testpost</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sendtest = $("#sendtest");
sendtest.keyup(function(){
$.post(
"test.php",
{ nur: sendtest.val() },
function(data) {
$('#receivetest').html(data);
}
);
});
});
</script>
</head>
<body>
<input type="text" name="season" id="sendtest"/>
<div id="receivetest"></div>
</body>
</html>
And following test.php:
<?php
$nur = $_POST['nur'];
echo $nur;
?>
<p id="hello">Hello World!</p>
Now I want to see on the receivetest-div only echo $nur; !
What must I do for that?
It is not a good practice to code like this. It would be better to add a parameter in your PHP file which will hide the div when you don't need it.
However, you can hide the div like that:
$('#receivetest').find('#hello').hide();
This will keep the html of the <div id="hello"> and its content, and hide it to the client.
You can also remove the div by doing this:
$('#receivetest').find('#hello').remove();
You can the below code
<html>
<head>
<title>Testpost</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sendtest = $("#sendtest");
sendtest.keyup(function(){
$.post(
"asd.php",
{ nur: sendtest.val() },
function(data) {
$('#receivetest').html(data);
$('#receivetest').find('#hello').remove();
}
);
});
});
</script>
</head>
<body>
<input type="text" name="season" id="sendtest"/>
<div id="receivetest"></div>
</body>
</html>

How can I get the data that is sent from my html file to php and recieve and show the data

I found a program which is sending the data from the form to php file from jquery. But when I have tried to find it, it is displaying nothing. When I am clicking on the Load Data button nothing is coming. Is something wrong in the program ?
main.php
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
index.html
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Please resolve the problem. Thanks in advance
Your <script> tag for loading jQuery has an invalid href attribute.
Remove the ending slash from the address so it looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use your browser's developer tools to find out what's wrong with your clientside script, they're really handy. Hit F12.
try this code:
$(document).ready(function() {
$("#driver").click(function(event){
$.post( "main.php", { name: "Zara"})
.done(function( data ) {
$('#stage').html(data);
});
});
});
for detail see link
Please the version of this file:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
code:
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert('hi');
$("#driver").click(function(){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

facebook share producing white / blank page with php and javascript

ok basically i am getting a white page when i try to use the facebook share buttons, both the new and the sharer.php version
i am trying to share a url like the following:
https://www.facebook.com/sharer/sharer.php?u=https://**.com/3e68ec7f58134f66d09a1c05c2783385/index.html
now the page loads fine if i paste in a new browser window, or even when i refresh the white / black page
here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<link rel="stylesheet" href="onlinedojo/css/layout.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="onlinedojo/js/hideshow.js" type="text/javascript"></script>
<script src="onlinedojo/js/jquery.tablesorter.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="onlinedojo/js/jquery.equalHeight.js"></script>
<title>post</title>
</head>
<body>
<div id="fb-root"></div>
<script>
function postToFb(){
window.open('<?php echo $fburl ?>','1317220786706','width=400,height=400,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');
window.close();
return false;
}
</script>
<form class="submit_link" style="float:right">
<input type="submit" class="alt_btn" value="Share on Facebook" onclick="postToFb();" />
</form>
</body>
</html>
any help would be appreciated - this is driving me crazy!
You don't need a form or submit button here. so just remove form and button and put simple share link and try this
HTML:
<a href="javascript: void(0)" onClick="fbpopup('<?php echo urlencode($fburl); ?>')">
Share on Facebook
</a>
Javascript
<script>
function fbpopup(popwhat) {
window.open( popwhat, "fbshare", "height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" )
}
</script>
Well, yo try this
<script>
function postToFb(url) {
window.open(url, '_blank', 'width=530,height=460,left=' + (screen.availWidth / 2 - 250) + ',top=' + (screen.availHeight / 2 - 250) + '');
return false;
}
<?php
$title = urlencode('your title');
$summary = urlencode('your sumary');
$url_base = urlencode('url to share');
$url_image = urlencode('thumbnail url');
$url_to_share = "http://www.facebook.com/sharer/sharer.php?s=100&p[title]=$title&p[summary]=$summary&p[url]=$url_base&p[images][0]=$url_image";
?>
postToFb('<?php echo urlencode($url_to_share) ?>') {
</script>
I hope this help you.

How to render the html page after getting response from the function

I want to call a function on my body load. I want to render my html page after getting the response from the function. For example:
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
</script>
</head>
<body onload="welcome()">
<p>hai</p>
</body>
I want the hai to be displayed after pressing ok in the alert box. Can anyone help me with this?
You could do something like this:
<head>
<script type="text/javascript">
alert("Welcome");
</script>
</head>
<body>
<p>hai</p>
</body>
This would alert before the body is loaded, then when you clicked 'ok' it would load the body.
You can do it that way:
<html>
<head></head>
<body onload="render()">
<script>
var content = '<h1>Hello, World!</h1>';
function render() {
var answer = confirm('Do you want to render the page?');
if (answer) {
document.body.innerHTML = content;
}
}
</script>
</body>
</html>
And a live demo.
try this
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
welcome();
</script>
</head>
<body>
<p>hai</p>
</body>
You could add a class to the body to make contents not visible and remove it after the function is called..
<html>
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.body.className = '';
}
</script>
<style type="text/css">
.invisible{visibility:hidden;}
</style>
</head>
<body onload="welcome()" class="invisible">
<p>hai</p>
</body>
</html>
Try this code,
<body onload="welcome()">
<p id='hi'></p>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.getElementById('hi').innerHTML='hi';
}
</script>
</body>

Categories