I want to be able to update/replace embedded facebook posts in my website.
For example say i have this code (part of the codesnippet is taken from facebook here):
<html>
<title>My Website</title>
<body>
<button onclick="replacePost();">replace</button>
<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.2"async></script>
<div id="myDiv">
<div class="fb-post"
data-href="https://www.facebook.com/FacebookDevelopers/posts/1234"
data-width="500"></div>
</div>
<script>
function replacePost()
{
var newHTML = '<div class="fb-post"';
newHTML += 'data-href="https://www.facebook.com/FacebookDevelopers/posts/123"';
newHTML += 'data-width="500"></div>';
$("#myDiv").html(newHTML);
}
</script>
</body>
</html>
Here as an example, when the page loads, there is a button and then the facebook post with the id 123 will pop up as expected. And when i click the button, i use jQuery to find the parent div of the facebookpost, and replace it with some new HTML. In this case, a post with the id 1234. But the post will not pop up :-( (Hopefully, you can see what i am trying to do).
So how do i dynamically delete a post and replace it with another post?
You need to parse your html again so that the facebook sdk can fetch the new post. If you change your JavaScript to the following:
<script>
function replacePost()
{
var newHTML = '<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"data-width="500">';
$("#myDiv").html(newHTML);
FB.XFBML.parse() //<---- add this
}
</script>
Then each time you call replacePost you html will be parsed again. Instead of parsing the whole page you can parse a specific tag for the sake of efficiency:
FB.XFBML.parse(document.getElementById('foo'));
Docs here: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
Related
I'm trying to integrate Facebook JS sdk with my BackboneJS spa.
When the page is new, ie; router has not navigated to any where, the Facebook share code works perfectly.
After I navigate to some other page. The FB.api() callbacks never fire.
The fb-root div <div id="fb-root"></div> is automatically getting created automatically.
But once i navigate to any other route, my body is getting cleared and new html will be loaded.
How to keep the <div id="fb-root"></div> in body while navigating to the other routes.
Or is there anyother way to getting though this issue.
pease help =)
Try to render your views in a new element, not directly in the body :
<body>
<div id="fb-root"></div>
<div id="container"></div> <!-- Here for example -->
</body>
I have read many topics regarding this issue but almost all of them aims at how to retain the values of the form once the form is submitted. But in my case I don't want to submit the form.I'm having 3 checkboxes and based on the selection of the checkbox by the user some values are displayed dynamically without submitting the page. The default values of the checkboxes are chk1val1 chk2vala chk3val1. Now if the user makes the selection as chk1val2 chk2val3 chk3val2, then even after the user refresh the page I want to retain that selection done by the user. Any pointers on this one??
Thanks in advance.
I finally found an answer for this question.
To temporarily store the form values we can use the localStorage of Javascript. Below is an example which explains how to use it,
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("io").value = localStorage.getItem("item1");
});
</script>
<script>
$(window).on('beforeunload', function() {
localStorage.setItem("item1",document.getElementById("io").value);
});
</script>
</head>
<body>
<form>
<input type="text" id="io" name="io">
<input type="submit">
</form>
</body>
</html>
Run the above code and type something in the textbox. Now even if the page is refreshed the value within the textbox will persist i.e. will not change.
I'm maintaining a website which has a series of forms that user submits. Each form does an HTTP POST to the server, which then renders the next form to the browser.
i.e., index.html contains a <form action="form1.php" method="post">, and then form1.php renders a <form action="form2.php" method="post">, etc.
When I navigate using the back button from say, form2.php to form1.php on my iPhone, the request is an HTTP GET for form1.php, rather than a resubmit using HTTP POST.
This happens intermittently, but more reliably if I minimize safari and then re-open it again before I hit the 'back' button.
Note: This happens whether I'm using chrome or safari on my iPhone.
My expectation was that these requests would be resubmitted using POST. Is that wrong?
I have a small repro set up here:
http://kong.idlemonkeys.net/~shaun/fi/
Sources -- sorry about some of the extra cruft, but they should convey the point.
index.html:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="start-form" method="post" action="form1.php">
<input type="hidden" name="foo" value="bar"/>
</form>
<div id="click-me" style="width: 200px; height: 200px; background-color: pink;">Click me</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#click-me').click(function() {
$('#start-form').unbind('submit').submit();
});
});
</script>
</html>
form1.php:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<?php if($_SERVER['REQUEST_METHOD'] !== 'POST') { ?>
<h2> you're doing it wrong </h2>
<?php } ?>
<h1> This is form 1: <?php echo time(); ?></h1>
<h1> You requested this page with: <?php echo $_SERVER['REQUEST_METHOD'] ?></h1>
<form id="form1" method="post" action="form2.php">
<button type="submit" value="submit" name="submit">Submit</button>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').submit(function () {
alert('starting form submit');
});
});
</script>
</html>
form2.php:
<html>
<body>
<h1> This is form 2: <?php echo time(); ?></h1>
<h1> You requested this page with: <?php echo $_SERVER['REQUEST_METHOD'] ?></h1>
<form method="post" action="form3.php">
<button type="submit" value="submit" name="submit">Submit</button>
</form>
</body>
</html>
Repro Steps:
Load http://kong.idlemonkeys.net/~shaun/fi/ in safari or chrome on iOS
Click the 'click me' button, which submits a POST to form1.php
Click the 'submit' button, which submits a POST to form2.php
Minimize safari (i.e., go to the home screen), then bring it back up.
Hit the 'back' button, notice that form1.php now informs you it was fetched via HTTP GET
I've been able to confirm the sequence of events using wireshark
My expectation was that these requests would be resubmitted using POST. Is that wrong?
I believe it is wrong. POST requests may not be idempotent, i.e. issuing the same post multiple times may change the state of the server each time, and that can be dangerous. The browser has no way of knowing whether you really intend to resubmit the form that got you to the current page, for example, so it can't assume that it's safe to send the POST again. Instead, it uses a GET because a GET won't affect the state of the server.
This very StackOverflow page is a fine example. After I click the 'save' button at the bottom, my browser will no doubt issue a POST to send my answer to the server, and then show me the resulting web page that includes my new answer. If I hit the back button, should my browser again issue the POST? That could result in a whole new copy of my answer being added, which doesn't seem like the right thing to do at all. Using a GET, on the other hand, will safely reload the previous page without resending my answer.
It is probably a good idea to always send HTTP 302 redirect after POST то avoid this sort of inconsistent browser behavior http://en.wikipedia.org/wiki/Post/Redirect/Get
I have an oscommerce shopping cart site and I'm trying to set up an automatic redirect with 30-second time-delay from one product page to another product page, and include a message like "this prod. is now replaced by [new catalogue number]. You will be automatically redirected." How do I get into the raw HTML/PHP coding for each product so I can put a redirect meta-tag or javascript coding in? Note: I only want to set up the redirect for a handful of product pages (not all products currently on the site).
<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "productpage.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new
location!</p>
</body>
</html>
you can use Js redirect look like above
check from here > http://jsfiddle.net/JnUVF/
I guess I have an easy question, I have not found the right answer yet though.
I have an iframe in my page that comes from an external domain. After submitting the form which is inside this iframe, I would like to redirect the whole page, not just the content inside the iframe - I guess the right way to achieve might be via "target" attribute.
The sample html:
<html>
<body>
<h1>main page</h1>
<iframe src="http://example.com">
<form url="http://example.com/action">
...
</form>
</iframe>
</body>
</html>
Submitting the form should show me the result of submitting the POST request as a new page (not in the iframe)
I have put target='_parent' in the iframe but I haven't done this initially in the form element. After adding target='_parent' attribute to form it started to work as expected.
Add a target attribute to the form within the iframe:
<form action="foobar" method="post" target="_parent">
...
</form>