facebook share producing white / blank page with php and javascript - 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.

Related

Jquery is not working on html echoed by php

I echo my html in the body using php.
Like this:
<body>
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</body>
In this html I have a button with the id set to button. Then, in Jquery,I have this code:
$(document).ready(function(){
$("#button").click(function(){
alert("It works");
});
});
However, It works is not getting printed. What should I do?
It also depends on where your Javascript Code is located within the DOM and also if you have jQuery included in the page in question.
Something like this could hopefully work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<title>Demo</title>
</head>
<body>
<div class="container">
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$("#button").on("click", function(e){
alert("It works");
});
});
})(jQuery);
</script>
</body>
</html>
Please note that the above Snippet is assumed to live inside a PHP File (index.php - for example).

JS script function not working in php

Here is my JS function:
function checkError() {
var field = 'error';
var url = window.location.href;
document.write('test');
window.alert('please work');
if(url.indexOf('?' + field + '=') != -1)
document.write('The username and password do not match. Do not use your full email.');
return true;
}
and then in my body paragraph I have:
<?php echo '<script> checkError();</script>' ?>
It doesn't have any errors calling it. But the function does nothing on my page. Any thoughts? I've tried putting the JS script in the page and in a JS file and correctly called for its inclusion.
Full script:
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<script type="text/JavaScript" src="js/functions.js"></script>
<link href="stylesheets/mainStyle.css" rel="stylesheet" type="text/css">
<link href="stylesheets/formStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php include('header.php'); ?>
<div id="mainContent">
<h1>Member Login</h1>
<div id="mainParaText">
<?php echo '<script> checkError();</script>' ?>
</div>
</body>
</html>
TURNS OUT JS Function is UNDEFINED. Ugh, can't figure out why (thought I fixed this problem a while back lol)
try like this:
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<script type="text/JavaScript" src="js/functions.js"></script>
<link href="stylesheets/mainStyle.css" rel="stylesheet" type="text/css">
<link href="stylesheets/formStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function checkError(){
var field = 'error';
var url = window.location.href;
document.write('test');
window.alert('please work');
if(url.indexOf('?' + field + '=') != -1)
document.write('The username and password do not match. Do not use your full email.');
return true;
}
<?php
echo "checkError();";
?>
</script>
</head>
<body>
<?php include('header.php'); ?>
<div id="mainContent">
<h1>Member Login</h1>
<div id="mainParaText">
<?php echo '<script> checkError();</script>' ?>
</div>
</body>
</html>
JS is client side and PHP is server side.
That means that everything in PHP code will be processed on server and then "echoed" to your browser where you get undefined error.
When debugging this you should always check source code in the browser first so you see exactly what your server echoed.
I'm guessing a bit but try with double quotes instead of single.
And not related to the question ...
You are checking username and password with JS? How exactly will you do this? With ajax call back to the server? If you check with JS that means password should be in the source code somewhere and that is NOT secure. Username / pass validation should always be made on serverside (either with ajax request or usual submit form).

switch pages using AJAX PHP

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";
}
?>

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>

Stop cookie setting immediately on page load

having an issue with some JS where the cookie is setting as soon as the page is loading, when it should only be setting when I've click to close the box.
Any help would be appreciated. Code below:
<!doctype html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://resources.site.co.nz/scripts/jquerycookie.js"></script>
<script type="text/javascript">
$(function() {
$('a.close').click(function() {
$(this).parent().fadeOut(1500);
$.cookie('hidden', 'true', { expires: null});
alert($.cookie('hidden'));
return false;
});
if($.cookie('hidden','true')){
$('#errororganinfoinchide-this').hide();
}
});
</script>
</head>
<body>
<div id='boxes'>
<aside class='warning' id='errororganinfoinchide-this'>
<a href='#errororganinfoinchide-this' class='close'><img src='http://resources.site.co.nz/backgrounds/close.png' /></a>
<img src='http://resources.site.co.nz/backgrounds/icon_warning.png' class='messageimg' />
<h4>Warning - Organisation Info</h4>
<p>Sorry, there was an error opening the "Organisation Info" Box. Please try again later.</p>
</aside>
</div>
</body>
Doesn't the line "if($.cookie('hidden','true')){" set the cookie instead of reading it?
It should probably be something like this instead...
if($.cookie('hidden') == 'true'){

Categories