I have used this same call in other IFRAME Facebook apps, but it gives me nothing at all in terms of output. I am trying it on Yii and getting nothing.
<script type="text/javascript">
window.onload = function() {
FB_RequireFeatures(["XFBML"], function() {
FB.init('xxxxxx', 'xd_receiver.htm');
FB.XFBML.Host.get_areElementsReady().waitUnitlReady(function()
{
document.getElementById("container").style.visibility = "visible";
});
});
};
</script>
<script type="text/javascript">
function publish() {
FB_RequireFeatures(["Connect"], function() {
FB.init('xxxxxx', 'xd_receiver.htm');
FB.ensureInit(function() {
FB.Connect.streamPublish();
});
});
}
</script>
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://apps.facebook.com/ixxxx"
method="POST"
invite="true"
type="rrrrr"
content="rrrrr <?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/XXXX\" label=\"Authorize My Application\"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use SuperThief.">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
It might be helpful to check that you have your new Yii site setup correctly for Facebook. You might not be including the right JavaScript libraries in the layout file's , or you may have forgotten to add the right xmlns attribute to the tag. For a refresher on this stuff head over to the Facebook documentation here:
http://wiki.developers.facebook.com/index.php/Connect/Setting_Up_Your_Site
Related
There are so many posts for this. I have gone through all of those, yet no luck. I'm struggling for so long (Onload event is not working ). I dint find any solution.
I have tried..
1.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
document.getElementById('pdfcontent').onload = function() {
alert("working");
}
</script>
</head>
<body >
<div id="loadingpdf">Loading pdf</div>
<iframe src="http://prodevapp.com/ArmyPublicRelation/pdf/royalthaiarmynews/news_20141103173559.pdf" id="pdfcontent" />
</body>
</html>
2.
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('object').hide();
$('#loadingpdf').show();
},
complete: function() {
$('#loadingpdf').hide();
$('object').show();
},
success: function() {
$('#loadingpdf').hide();
$('object').show();
}
});
var $container = $('object');
$container.load(function(){
alert("Image loaded.");});
3.
<body >
<script>
function my_code(){
alert(" working");
}
var iframe = document.createElement("iframe");
iframe.src = "http://prodevapp.com/ArmyPublicRelation/pdf/royalthaiarmynews/news_20141103173559.pdf";
document.body.appendChild(iframe);
iframe.onload=my_code;
</script>
</body>
4.
$("iframe").on('load', function() {
alert('Image Loaded');
}).each(function() {
if(this.complete) $(this).load();
}); //this worked one time but later it doesn't work it seems some cache problem.
How to fix this?
You might find help here
The selected answer on this thread, interestingly, suggests you cant track a pdf load.
Duplicate of getElementById() returns null even though the element exists and you are also missing the end tag for the <iframe>.
You are using an iframe, not Ajax, so watching for Ajax things won't work
You try to use the iframe variable before you assign a value to it.
After editing it - you try to use a function before it has been defined. While functions are hoisted, they aren't hoisted from later scripts.
After editing it again - it works.
Also a duplicate of getElementById() returns null even though the element exists
With this javascript I'm printing list of records:
<script type="text/javascript">
$(document).ready(function(){
function hide(){
$('#friend_list').fadeIn(100);
$('#friend_list').load("friend_list.php");
};
setInterval( hide,100 );
});
</script>
in friend_list.php I'm getting all the records relevant for user and returning it like this:
echo "<div class='friend' id='friend'>" . $a["username"] . "<input type='hidden' value='$id'/>" . "</div>";
And I'm using this simple script to make overlay:
<script type="text/javascript">
$(document).ready(function(){
function overlayerOn(){
$('#overlayer').fadeIn(800);
}
function overlayerOff(){
$('#overlayer').fadeOut(800);
};
$('#board').click(function(e){e.stopPropagation();});
$('.friend').click(function(e){
e.preventDefault();
overlayerOn();
var $br = $('#board');
$br.css('display', 'block');
});
$('#overlayer').click(function(e){
overlayerOff();});
});
</script>
Overlay is working as long as I trigger it with some other id or class than the one used from friend_list.php. But that is the one I need. Any idea why overlay is not working when triggered by class .friend?
Thank you...
Use (live is deprecated)
$('.friend').live('click', function(e){
// your code
});
If you are using latest version of jquery then use
$('body').on('click', 'div.friend' , function(e){
// your code
});
It's happening because you are loading content dynamically using
$('#friend_list').load("friend_list.php");
so click is not working because those contents were not in the DOM when it was loaded.
I'm building a web application inside CodeIgniter and I've decided to have a fiddle with jQuery and Javascript - something I've never really used before.
I have included jQuery in my header using Google Libraries:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And now I'm fiddling with the SIMPLEST of jQuery but it's not working.
<p><?php if ($post->love) { echo $post->love; } else { echo 0; } ?></p>
<script type="text/javascript">
$("#lovecounter").click(function() {
alert("Click");
});
</script>
I am clicking on the lovecounter link but there is no alert. If I add simple javascript to the actual anchor tag it works though.
<p><?php if ($post->love) { echo $post->love; } else { echo 0; } ?></p>
Any ideas? What am I doing wrong?
Wrap your code in ready handler:
$(document).ready(function(){
$("#lovecounter").click(function() {
alert("Click");
});
});
Working Example
This works perfectly fine for me:
<p>asdf</p>
<script type="text/javascript">
$(document).ready(function() {
$("#lovecounter").click(function() {
alert("Click");
});
});
</script>
You should include a $(document).ready(function() {}); just like Sarfraz said. Otherwise, it would not find anything with an id of lovecounter because nothing on the page has loaded yet. If you wait for it to load, then it will find the element. Here is some documentation: http://www.w3schools.com/jquery/event_ready.asp. Here is a full jQuery lesson: http://www.codecademy.com/tracks/jquery.
I have got the following code to show a dialog box when the image is clicked. Instead of running FB.ui I want to run PHP code. It's for facebook.
<html>
<head>
<style> img#share_button { cursor: pointer; } </style>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
This is the image:
<img id = "share_button" src = "img.png">
And this is the code I need to change:
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui({
method: 'feed',
name: 'TabPress1',
link: 'http://www.hyperarts.com/',
picture: 'http://www.hyperarts.com/',
caption: 'I am a fan of TabPress',
description: 'TabPress -- Gotta love it!',
message: ''
});
});
});
</script>
</body>
</html>
I don't know any JS, hope you can help me!
If you don't know any javascript, perhaps it's best if you check out some beginner tutorials, like those at http://net.tutsplus.com/category/tutorials/javascript-ajax/?tag=basix , but in regard to your question...
It looks like your using jQuery. The best way to do what your describing is to use AJAX, and jQuery has nice functionality for that.
To select an element from the DOM based on it's ID in jQuery, just do this:
$("#TheIdOfYourImage")
now, to listen for when it's been clicked,
$("#TheIdOfYourImage").click(function(){
//DO SOMETHING
}
Now, for the AJAX fun. You can read the documentation at http://api.jquery.com/category/ajax/ for more technical details, but this is what it boils down to
$("#TheIdOfYourImage").click(function(){
$.ajax({
type: "POST", // If you want to send information to the PHP file your calling, do you want it to be POST or GET. Just get rid of this if your not sending data to the file
url: "some.php", // The location of the PHP file your calling
data: "name=John&location=Boston", // The information your passing in the variable1=value1&variable2=value2 pattern
success: function(result){ alert(result) } // When you get the information, what to do with it. In this case, an alert
});
}
Why you don't use an href attribute with removing underlying and coloring of the link and launch your php script?
As you have jQuery already there: Send an AJAX-Request:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#share_button').live('click', function(e) {
e.preventDefault();
$.ajax('/path/to/your/script.php');
});
});
//]]>
</script>
cf. the jQuery documentation for further information: http://api.jquery.com/jQuery.ajax/
Additionally I added CDATA-Tags to avoid problems with HTML-Special-Chars. These special chars would normally have to be encoded.
The FB.ui(param1,param2) method can take two parameters. You've specified the first one that dictates how the feed dialog is displayed. Param2 can be your callback function
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
In the code switch for post was published, you can then use jQuery to make an AJAX call to one of your PHP pages. See: http://api.jquery.com/jQuery.ajax/
to run a javascript function when button is clicked:
<img id = "share_button" src = "img.png" onclick = "dothis()">
here is some basic javascript:
<script type = "text/javascript">
function dothis(){
alert("Button pressed");
}
</script>
This is just some basic javascript that will make a message appear on the screen when the button is clicked
EDIT: It appears you want to use JSON. Take a look at this:
http://ditio.net/2008/07/17/php-json-and-javascript-usage/
Based on your comments, I think you want to do something like this:
$(document).ready(function(){
// on click
$('#share_button').live('click', function(e){
e.preventDefault();
// any parameters you need to pass to your php script,
// you can omit the data parameter if you don't need it
var data = { param1: "a", param2: 2 };
// start the ajax request
$.post("your/script.php", data, function() {
// when the ajax request completes, show the FB dialog
FB.ui({
method: 'feed',
name: 'TabPress1',
link: 'http://www.hyperarts.com/',
picture: 'http://www.hyperarts.com/',
caption: 'I am a fan of TabPress',
description: 'TabPress -- Gotta love it!',
message: ''
});
});
});
});
Relevant javascript references:
.live()
$.post()
FB.ui()
Working on the same page as before,but now I'm using it as a playground for messing around with jQuery so I can learn it for my'boss.' Unfortunately, I can't get the javascript in this file to execute, let alone give me a warning. All of the PHP and HTML on the page work perfectly, it's just the script that's the issue. What am I doing wrong?
<?php
if( isset($_POST['mushu']) )
{
playAnimation();
clickInc();
}
function playAnimation()
{
echo "<img src='cocktail-kitten.jpg' id='blur'>";
}
function clickInc()
{
$count = glob("click*.txt");
$clicks = file($count[0]);
$clicks[0]+=1;
$fp = fopen($count[0], "w") or die("Can't open file");
fputs($fp, $clicks[0]);
fclose($fp);
echo $clicks[0];
}
?>
<html>
<head>
<title>Adobe Kitten</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF']; ?>"
method="post">
<input type="submit"
value="Let's see what Mushu is up to."
name="mushu">
</form>
<script>
$(document).ready( function()
{
$('#blur').click( function()
{
$(this).blur( function()
{
alert('Handler for .blur() called.');
});
});
});
</script>
</body>
</html>
You're calling playAnimation() before your <html> tag, so your html is malformed. JQuery probably can't find the #blur element because it's not actually inside your web page, much less within the <body>.
Move the if( isset($_POST['mushu'])) ... block of code somewhere after the body tag.
Check FireBug's console, or FireFox' Error Console.
Verify that jquery.js is being included, and check your error console.
Otherwise, a few obvious errors which may or may not contribute to your javascript problems:
You're outputting HTML in playAnimation() before your opening HTML tag
Your form's action attribute is blank - you need <?= or <?php echo
Your script tags should read <script type="text/javascript">
Like Scott said you need to echo the div in the actual body of the page. Also, I think another problem you have is you're calling .blur which is the event when your mouse leaves the image. Since you have functions like animate I think you might actually be looking for .fade http://api.jquery.com/fadeOut/. Try something like:
<script>
$(document).ready( function()
{
$('#blur').click( function()
{
$(this).fadeOut('slow', function()
{
alert('All Done');
});
});
});
</script>