My website is not loading on refreshing the page once the url is updated by window.pushState. My website is saved on this location: http://localhost/ajax.test/index.html
but after clicking the link with href="1" the url changes to http://localhost/ajax.test/1
.. here is the source code:
html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<ul>
<li class="list" id="1">home</li>
<li class="list" id="2">project</li>
<li class="list" id="3">about</li>
</ul>
<div id="dynamic"></div>
</body>
</html>
jQuery:
var url = 0;
var state=0;
$(document).ready(function(){
$('ul a').click(function(e) {
e.preventDefault();
alert(e.target);
url = $(this).attr("href");
history.pushState({page:url}, url,url);
loadContent(url);
});
});
$(window).bind('popstate', function(e){
state = event.state;
if(state){
loadContent(state.page);
}else{
loadContent("home");
}
});
function loadContent(currentPage){
alert(currentPage);
$.ajax({
type: "GET",
url: "ajax.php",
data: "id="+currentPage,
success: function(data){
$('#dynamic').html(data);
}
});
};
php:
<?php
$response = $_GET['id'];
if($response=="1")
{
echo "<h1>You loaded HOME</h1>";
}
else if($response=="2")
{
echo "<h1>You loaded PROJECT</h1>";
}
else if($response=="3")
{
echo "<h1>You loaded ABOUT</h1>";
}
?>
Related
So i have this code, (i'm learning Backbone, but the console tells me: "Uncaught ReferenceError: $ is not defined", and i don't have any idea why, i have the exact code of the video tutorial, the error is in this line: el : $('#container')
Here is my code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backbone Project</title>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/template" id="task_template">
<label>Task: </label>
<input type="text" id="task_desc"/>
<input type="button" value="Add Task" id="btn"/>
</script>
<div id="container"></div>
<script type="text/javascript">
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
</script>
</body>
</html>
The example is using jQuery to select DOM elements, add the library to your head...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- load other libraries that depend on jquery *after* jquery -->
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!-- ... time passes ... -->
<script type="text/javascript">
// use jQuery onReady wrapper to ensure DOM has loaded before
// executing JS that might depend on DOM elements, and scripts to exist
$(function(){
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
});
</script>
I want to add Facebook share button in my website so that user can share any post ,content of given url.
I want to know how can I get that either user is shared something or not on Facebook because I have to store user data in database if user share any post,content of given url from my website.
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
I have found a solution .
code :-
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>My Feed Dialog Page</title>
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
</head>
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<a onclick='postToFeed(); return false;' style="cursor:pointer;"><img src="img/xyz.jpg"></a>
<p id='msg' style="display:none"><?php echo $_REQUEST['id'] ?></p>
<script>
FB.init({appId: "your app id", status: true, cookie: true});
function postToFeed() {
var obj = {
method: 'feed',
//redirect_uri: 'YOUR URL HERE',
link: 'https://www.abc.in/',
picture: 'http://fbrell.com/f8.jpg',
name: 'abc',
caption: 'User Has Won points ',
description: 'Share Test.'
};
function callback(response) {
//document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
var id=$("p").html();
if(response['post_id']!=null)
{
$.ajax({
url:'customer.php',
data:'fbpoints='+'1'+'&customer_id='+id,
dataType:'html',
success:function(res){ alert(res);
}
});
}
}
FB.ui(obj, callback);
}
</script>
</body>
</html>
I'm running the simple Echo example of WebSockets but it doesn't seem to establish a connection. This is happening on Windows 7, Eclipse, and Tomcat.
The error messages in firefox are:
"NetworkError: 404 Not Found - http://my_ip_address:8080/websockets/echo"
and
Firefox can't establish a connection to the server at ws://my_ip_address:8080/websockets/echo.
What am I missing? Is there some configuration I need to set up?
The jars I have in the build path are javax.annotation_1.0.jar and websocket-api-0.2.jar
The code I'm running:
package org.javaee.glassfishwebsocket;
import org.glassfish.websocket.api.annotations.WebSocket;
import org.glassfish.websocket.api.annotations.WebSocketMessage;
#WebSocket(path="/echo")
public class EchoBean {
#WebSocketMessage
public String echo(String message) {
System.out.println("##################### Message received");
return message + " (from your server)";
}
}
This is index.jsp:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<meta charset="utf-8">
<title>WebSocket Echo Client</title>
<script language="javascript" type="text/javascript">
console.log("trying to connect");
var wsUri = "ws://my_ip_address:8080/websockets/echo";
console.log("wsUri = ");
console.log(wsUri);
var websocket = new WebSocket(wsUri);
console.log("websocket = " );
console.log(websocket);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
function init() {
console.log("init called");
output = document.getElementById("output");
}
function send_echo() {
console.log("sending_echo with " + textID.value);
websocket.send(textID.value);
writeToScreen("SENT: " + textID.value);
}
function onOpen(evt) {
console.log("onOpen");
writeToScreen("CONNECTED");
}
function onMessage(evt) {
console.log("onMessage");
writeToScreen("RECEIVED: " + evt.data);
}
function onError(evt) {
console.log("onError");
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2 style="text-align: center;">WebSocket Echo Client</h2>
<div style="text-align: center;"><img style=" width: 64px; height: 64px;" alt=""src="HTML5_Logo_512.png"></div>
<br></br>
<div style="text-align: center;">
<form action="">
<input onclick="send_echo()" value="Press me" type="button">
<input id="textID" name="message" value="Hello WebSocket!" type="text"><br>
</form>
</div>
<div id="output"></div>
</body>
</html>
I have a sample app that has a 'Like' button. It works before but now it doesn't.
I've tested this on jsfiddle.net before and it works too. But after I've uploaded my files on a server it has a bug. The 'Like' button pops up and then has this error:
https://www.facebook.com/plugins/error/confirm/like?iframe_referer=https%3A%2F%2Fns2383.hostgator.com%2F~caryucla%2Fbpcontest%2FHTML%2FContestHome.php%2F&secure=true&plugin=like&return_params=%7B%22api_key%22%3A%22301719366592208%22%2C%22locale%22%3A%22en_US%22%2C%22sdk%22%3A%22joey%22%2C%22ref%22%3A%22.UKWNYwbFB-8.like%22%2C%22channel_url%22%3A%22https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D17%23cb%3Df13bb8c95%26origin%3Dhttps%253A%252F%252Fns2383.hostgator.com%252Ff2bf9f920%26domain%3Dns2383.hostgator.com%26relation%3Dparent.parent%22%2C%22href%22%3A%22https%3A%2F%2Fwww.facebook.com%2Fpages%2FDummy-Page-for-Testing%2F375795832160%22%2C%22node_type%22%3A%22link%22%2C%22width%22%3A%2290%22%2C%22font%22%3A%22arial%22%2C%22layout%22%3A%22button_count%22%2C%22colorscheme%22%3A%22light%22%2C%22action%22%3A%22like%22%2C%22show_faces%22%3A%22false%22%2C%22send%22%3A%22false%22%2C%22extended_social_context%22%3A%22false%22%2C%22ret%22%3A%22sentry%22%2C%22act%22%3A%22connect%22%7D
I've already read this article on SO already and followed the answer but still didn't work. Any views on this error?
PS:
I am all in all fairly new to this.
and here's the sample code I'm using:
<?php
include_once("../incs/dbcon.php");
require_once('AppInfo.php');
require_once('utils.php');
require_once('../sdk/src/facebook.php');
//This gets the signed_request from FB which checks the 'liked' status on the current page
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
$app_data = isset($data["app_data"]) ? $data["app_data"] : '';
$_REQUEST["fb_page_id"] = $data["page"]["id"];
$access_admin = $data["page"]["admin"] == 1;
$has_liked = $data["page"]["liked"] == 1;
$facebook = new Facebook(array(
'appId' => AppInfo::appID(),
'secret' => AppInfo::appSecret(),
));
$user_id = $facebook->getUser();
if ($user_id) {
try {
// Fetch the viewer's basic information
$basic = $facebook->api('/me');
} catch (FacebookApiException $e) {
// If the call fails we check if we still have a user. The user will be
// cleared if the error is because of an invalid accesstoken
if (!$facebook->getUser()) {
header('Location: '. AppInfo::getUrl($_SERVER['REQUEST_URI']));
exit();
}
}
// This fetches some things that you like . 'limit=*" only returns * values.
// To see the format of the data you are retrieving, use the "Graph API
// Explorer" which is at https://developers.facebook.com/tools/explorer/
$likes = idx($facebook->api('/me/likes?limit=4'), 'data', array());
// This fetches 4 of your friends.
$friends = idx($facebook->api('/me/friends?limit=4'), 'data', array());
// And this returns 16 of your photos.
$photos = idx($facebook->api('/me/photos?limit=16'), 'data', array());
// Here is an example of a FQL call that fetches all of your friends that are
// using this app
$app_using_friends = $facebook->api(array(
'method' => 'fql.query',
'query' => 'SELECT uid, name FROM user WHERE uid IN(SELECT uid2 FROM friend WHERE uid1 = me()) AND is_app_user = 1'
));
}
// Fetch the basic info of the app that they are using
$app_info = $facebook->api('/'. AppInfo::appID());
$app_name = idx($app_info, 'name', '');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo he($app_name); ?></title>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# bpapptestbpapptest: http://ogp.me/ns/fb/bpapptestbpapptest#">
<meta property="fb:app_id" content="301719366592208" />
<meta property="og:type" content="bpapptestbpapptest:video" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Video" />
<meta property="og:image" content="https://ns2383.hostgator.com/~caryucla/bpcontest/Images/BPIcon.png" />
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object#">
<meta property="fb:app_id" content="301719366592208" />
<meta property="og:type" content="object" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Object" />
<meta property="og:image" content="https://ns2383.hostgator.com/~caryucla/bpcontest/Images/BPIcon.png" />
<link href="https://ns2383.hostgator.com/~caryucla/bpcontest/CSS/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function logResponse(response) {
if (console && console.log) {
console.log('The response was', response);
}
}
$(function(){
// Set up so we handle click on the buttons
$('#postToWall').click(function() {
FB.ui(
{
method : 'feed',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendToFriends').click(function() {
FB.ui(
{
method : 'send',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendRequest').click(function() {
FB.ui(
{
method : 'apprequests',
message : $(this).attr('data-message')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
});
</script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '301719366592208', // App ID
channelUrl : ' https://ns2383.hostgator.com/~caryucla/bpcontest/HTML/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true,
xfbml : true // parse XFBML
});
// Listen to the auth.login which will be called when the user logs in using the Login button
//FB.Event.subscribe('auth.login', function(response) {
// We want to reload the page now so PHP can read the cookie that the
// Javascript SDK sat. But we don't want to use
// window.location.reload() because if this is in a canvas there was a
// post made to this page and a reload will trigger a message to the
// user asking if they want to send data again.
//window.location = window.location;});
//FB.Canvas.setAutoGrow();
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);});
};
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=301719366592208";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<link rel="stylesheet" href="https://ns2383.hostgator.com/~caryucla/bpcontest/CSS/jquery-ui.css" /><!--http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css-->
<script src="https://ns2383.hostgator.com/~caryucla/bpcontest/javascript/jquery-1.8.2.js"></script><!--http://code.jquery.com/jquery-1.8.2.js-->
<script src="https://ns2383.hostgator.com/~caryucla/bpcontest/javascript/jquery-ui.js"></script><!--http://code.jquery.com/ui/1.9.1/jquery-ui.js-->
<script src="https://ns2383.hostgator.com/~caryucla/bpcontest/javascript/jquery.bgiframe-2.1.2.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
FB.Event.subscribe('edge.create',
function(response) {
$(function onclick() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:250,
modal: true,
buttons: {
"Register?": function() {
window.location="https://ns2383.hostgator.com/~caryucla/bpcontest/HTML/RegForm.php";
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
);
</script>
</head>
<body>
<div id="Content">
<div id="header">
<div id="LogoDiv">
<img id="logo" src=" https://ns2383.hostgator.com/~caryucla/bpcontest/Images/Bp logo.png"></div><!--end of LogoDiv-->
<div id="LogoTextDiv">
<p id="LogoText">Fashion & Compassion Contest</p></div><!--end of LogoTextDiv-->
</div><!--end of header-->
<div id="DummyRow1"></div><!--end of DummyRow-->
<div id="BGForm">
<div id="Home">
<div id="Welcome">
<h1 id="WelcomeText">Welcome to Banana Peel's Fashion and Compassion Contest App!</h1>
</div><!--end of Welcome-->
<div id="HomeMechanics">
<h2>Contest Mechanics:</h2>
<div id="FBLogIn" class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" autologoutlink="true" onlogin="OnRequestPermission();"></div><!--end of FBLogIn div-->
<p id="Mec">To join the contest, Participants must first Log In through Facebook and LIKE Banana Peel's Facebook Fan Page. After liking the page you will be able to click the registration link button.</p>
<div id="LikeBox">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="https://www.facebook.com/pages/Dummy-Page-for-Testing/375795832160" addthis:title="Banana Peel Page" onclick="onclick()"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<div id="dialog-confirm">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin: 0 7px 20px 0;"></span>Thank you for liking our page!</p>
</div><!--end of dialog-confirm div--><!--end of class addthis_toolbox addthis_default_style-->
<script type="text/javascript" src="https://ns2383.hostgator.com/~caryucla/bpcontest/javascript/addthis_widget.js"></script>
</div><!--end of LikeBoxhttp://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50a0584951afe01c-->
</div><!--end of HomeMechanics-->
<div id="ContestantsBG">
<img src="https://ns2383.hostgator.com/~caryucla/bpcontest/Images/BPpic.jpg"/>
</div><!--end of ContestantBG-->
<div id="GalleryButton">
<a id="BackLink" href="../HTML/ContestantGallery.php"><input type="button" value="VIEW GALLERY OF CONTESTANTS"></a>
</div><!--end of GalleryButton-->
</div><!--end of Home-->
</div><!--end of BGForm-->
</div><!--end of Content-->
</body>
</html>
This message is what Facebook use to stop Like-jacking and prevent spam. It can also appear if the Like button has been added to a website / domain for the first time. Give it time and the message will disappear once Facebook is satisfied that your site isn't doing any of the above things.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com /2008/fbml">
<head>
<style>
body { font: 12px Calibri; }
</style>
</head>
<body>
<fb:like href="http://www.facebook.com/pages/Trololo/236069739747588?sk=app_229260073773183" width="450" show_faces="false" font="arial"> </fb:like>
<?php
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
if (empty($data["page"]["liked"])) {
//Does not like
} else {
//Likes
}
?>
<div id="fb-root"></div><script src="http://connect.facebook.net/se_SV /all.js#appId=113202612108305&xfbml=1"></script>
<script type="text/javascript">
$(function() {
FB.init({appId: '229260073773183', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(response) {
//clicked "like"
});
FB.Event.subscribe('edge.remove', function(response) {
//clicked "unlike"
});
});
</script>
</body>
</html>
Test-app url: http://www.facebook.com/pages/Trololo/236069739747588?sk=app_229260073773183
My problem: Can't see the like-button. Did I miss something?
Thanks!
Try putting the fb-root before the php block AND the fb:like element.
<body>
<div id="fb-root"></div><script src="http://connect.facebook.net/se_SV /all.js#appId=113202612108305&xfbml=1"></script>
<fb:like href="http://www.facebook.com/pages/Trololo/236069739747588?sk=app_229260073773183" width="450" show_faces="false" font="arial"> </fb:like>