I have 2 buttons, 1 simple and other Facebook like button, I want to make that after my simple button is clicked, It activated(clicked) Facebook button too, but It wont work. I've used this code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$("#test").click(function(){
$("#fb-root").click(); //this doesn't click Like button
alert("Like is clicked"); // this alert when button is clicked
});
});
</script>
<div class="fb-like" data-href="https://facebook.com/myPage" data-layout="button" data-action="like" data-show-faces="false" data-share="false" ></div>
<input type="button" id="test" name="test" value="Test" />
This is other code.After my Like button is clicked It alert "I just clicked like button", but this line not working $(this).remove();. (But I need to make like I said in first case. Click "Test" button to get clicked "fb-like" button.)
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(e) {
FB.Event.subscribe('edge.create', function(response) {
$(this).remove(); // I used this to remove button after clicking, but not working
alert('I just clicked like button');
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Maybe some lines from this code are needed, something like these window.fbAsyncInit = function(e) {
FB.Event.subscribe('edge.create', function(response) {?
Sadly, you won't be able to click the Facebook like button this way.
This is a security limitation in place to prevent you from clicking anything on a third party site that you don't want to. Here's more information about clickjacking and the same-origin policy.
Related
I have a little problem hopefully someone can help with :)
I have a Facebook like button on a page, that I would like to, when 'clicked' to display a form underneath it. So far I have tried .click and it doesn't work, however, .hover does! But I don't want it that way.
Any info would be greatly appreciated!
(for testing purposes the like button doesn't refer to any page yet, also for facebook script to work needs to be on a server, localhost or otherwise)
Here is my code:
<!-- Add Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--My styles -->
<style>
#form{display: none;width:400px;}
</style>
<!-- Facebook Code -->
<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- MY click Event -->
<script>
$(document).ready(function(){
$(".fb-like").click(function(){ //click doesnt work, hover does
$("#form").css("display","block");
});
});
</script>
<!-- the Button -->
<div class="fb-like" data-href="#" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<!-- The Form -->
<form id="form">
<input type="text" name="name" value="First Name"><br>
<input type="email" name="email" value="Your Email">
<button type="submit" name="submit" value="submit">Sign Up</button>
</form>
A scratch my previous answer. I looked again and found out that the like button is rendered in an iframe. That means it is protected by first origin policy and you CANNOT access DOM components on another domain. Tough luck.
I have a simple html with a button
I subscribed to mailchimp (newsletter and forms widget)
and I got from them a code for my site that works when
you load the page.
I want the page to execute the code (open the pop up)
only when I click the button. can you help me with it?
(I feel it's kind of a easy one but I'm get a bit scared
cause it's a script code - I don't know why...)
this is my page - in the head there's the script
<html>
<head>
<script type="text/javascript" src="//s3.amazonaws.com
/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-`config="usePlainJson: true, isDebug: false"></script>`
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) })</script>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>
also,
I upload it to a server - so this is the page online:
http://judamenahem.com/popuplp2/popup.html
You just have to add to the onClick of the button the code which is in the head who load the current popup.
function myFunction() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) });
}
and use :
<button type="button" onclick="myFunction()">Click Me!</button>
You can use standard popup boxes (those boxes that most sites use for: "Hey, you won X, do you really want to leave?") to ask the person a question via alert().
Here is some documentation on them. http://www.w3schools.com/js/js_popup.asp
You would simply need to attach a ClickEventHandler onto your button in your JS that triggers alert().
function myFunction() {
alert("I am an alert box!");
}
<button type="button" onclick="myFunction()">Click Me!</button>
So when you Click on Submit button then it open alert box
There is also prompt() function, which lets the user interact with the box
I want to disable back and front button of browsers. I have tried with the following code and Iam using onload for div tag and div tag id is order.
<script type="text/javascript">
$(document).ready(function() {
var back= noback();
$("#order").load("back");
function noback() {
window.history.forward(-1);
alert('backbtn');
}
setTimeout("noback()", 0);
alert('loading');
});
</script>
When i tested, alert backbtn is working fine but i can navigate to back page. Please help me how to make disable those buttons.
That would not be a good approach to disable the browser back button rather you should add code to handle the functionality as to what happens when the user clicks on back button.
On approach could be to place this script in the head section of the page so as to dont allow the user to visit the page again
<script>
function restrictback(){window.history.forward();}
setTimeout("restrictback()", 0);
window.onunload=function(){null};
</script>
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">
I've added a Facebook like button to my website, by following these instructions. Basically, I added this HTML:
<div class="fb-like" data-href="http://www.festivals.ie"
data-send="false" data-width="100"data-show-faces="false" data-font="verdana"
data-layout="button_count">
</div>
And this JavaScript:
(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_GB/all.js#xfbml=1&appId=29208799875673";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
When the button is pressed, the following popout appears:
The popout contains some text that describes the website (circled in red). This text seems to be copied from the first non-empty <p> element that appears on the page (starting from the top).
Is there a way that I can change this to something that better describes the site? I tried adding a
<meta name="description" content="my website description"/>
But it didn't make any difference.
Use the opengraph description meta tag. You might also want to add the title unless your page title is always what you want to appear on Facebook.
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
See https://developers.facebook.com/docs/opengraph/objects/ for further information.
jqueryui is used to show a dialog box, then if there is a click the 'dialog_insider' on the dialog box ,not on the flat (correct wording?) webpage , an ajax call will be made. The file in the called through the ajax
html:
<div id="dialog" style="border:1px solid green; width:150px; margin:auto;">
<div class="dialog_insider">this is the dialog</div>
<!-- end of class dialog_insider-->
</div>
<!- end of id dialog-->
jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").click(function(){
my_dialog = $(this).clone();
my_dialog.dialog();
$(".dialog_insider", my_dialog).click(function(){
alert("clicked");
$.post("replace.php",function(response){
});
});
});
});
</script>
the file replace.php contains:
<script type="text/javascript">
$(document).ready(function(){
alert("hi");
$("dialog_insider",my_dialog).html('4444444');
});
</script>
I don't get any functionality(i.e. no alert, no html changing) from the replace.php page
I tried with $("opener.dialog_insider",my_dialog).html('4444444');, but no result.
What is the solution?
To make javascript from ajax-called page running, you need to apped it to the current document.
And opener won't work when you make an AXAJ call, works only with opened window.
$.post("replace.php", {}, function(response){
$('body').append(response);
});
JS will execute when you append it, or make eval();