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
Related
I am trying to directly load a page using ajax. Here are the details:
HTML:
<div id="feedback"> </div>
<script type="text/javascript" src="script.js"></script>
script.js:
$(document).ready(function() {
$.ajax({
url: 'do.php',
success: function(data){
$('#feedback').html(data);
});
});
do.php:
<?php
//Do whatever...
echo "Done!";
?>
What I am seeing is: the page first loads, and there is a delay before the "feedback" div gets written. How can I solve this?
As far as I know of course it will have that delay. Suppose your page containing <div id="feedback">[…]</div> is loaded at 0th second now:
$(document).ready(function() {
$.ajax({
url: 'do.php',
success: function(data){
$('#feedback').html(data);
});
});
Is called as apparently it’s visible when document loads. So suppose its called at 3rd second when the document is ready—you can refer to this page for details—now you will be seeing that feedback div blank for 3 seconds.
I can suggest 2 things:
You can place a loader image by default inside the div so your code will change to <div id="feedback"><img src='loader.gif'></div> (Assume you have the loader.gif in the same directory of the page). By doing this you will make the user visually understand that some processing is going on and will load data.
Instead if you can place file_get_contents() or include() so it will look something like this <div id="feedback"><?php file_get_contents('do.php');?></div> or <div id="feedback"><?php include('do.php');?></div> As far as I know file_get_contents will execute the page and then load while include will load and then execute hence in include() you have the variables in the page available whereas in file_get_contents are not available but CSS would work in both cases.
You could start loading immediately and then add the data when everything has completed.
var _data = null;
var _ready = false;
$.ajax({
url: 'do.php',
success: function(data){
_data = data;
tryAddData();
}
});
$(document).ready(function() {
_ready = true;
tryAddData();
});
function tryAddData(){
if(_ready && _data !== null){
$('#feedback').html(_data);
}
}
Am trying to refresh data stored in a div every 10 seconds using jQuery.
My HTML code is:
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
setInterval(function() {
$("#latestData").load("getLatestData.php #latestData");
}, 10000);
});
</script>
</head>
<body>
<div id = "latestData">
</div>
</body>
</html>
And the PHP code I am using (temporarily as I know this won't change due to the same "data"):
<?php
echo "test";
?>
However, it isn't even showing "test" on the html page.. could anyone suggest where I have gone wrong?
Many thanks
jQuery load method works in a different way. Try reading its documentation.
You don't have to specify destination element ID twice, remove the second one, like this:
$("#latestData").load("getLatestData.php");
Here's a way that will solve what you want to achieve, using the $.get method in jQuery:
$(document).ready(function () {
setInterval(function() {
$.get("getLatestData.php", function (result) {
$('#latestData').html(result);
});
}, 10000);
});
If you want to refresh message count just use this code:
$(document).ready(function () {
setInterval(function () {
$("#ID").load();
}, 1000);
});
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I am experiencing the strangest behaviour on our website, and it is making things incredibly slow.
My team and I have a website running entirely on AJAX. So for the login, I have some js ajax that loads the login box into our index page. The html containing the login box has a script link in the head. This script listens for the login form submission, and sends the form data to the server for authentication through ajax.
The html that contains the login box only gets loaded once, but the js file that it links to gets loaded multiple times. The amount of times change. From 5 times to 15 times and I cannot see a pattern or anything. This happens everywhere on our site, not just at login time.
This issue really has me stumped and I'm totally stuck. Is it because I have ajax in a js file that is loaded in initially with ajax?
I would really appreciate your insight and help!
EDIT:
As requested, some code:
This is a stripped down version of loadContent() in the Interface.js file. This specific function loads all site content into the content area on index.php. When the page is refreshed, the first thing sent to the function is the location of the login.php file, containing the login box:
loadContent: function(page) {
var self = this;
//just some animations to make things look good
$(self.error).fadeOut(150, function() {
$(self.content).fadeOut(150, function() {
$(self.loading).fadeIn(150, function() {
$.ajax({
url: page,
success: function(data) {
//response data
var $response = $(data);
$(self.content_1).html($response);
//definitions for contentbox-2
self.contentHeading_2.html("Replies:");
self.content_2.html(postReplies);
//redisplay the content after it has loaded in.
$(self.loading).fadeOut(150, function() {
$(self.content).fadeIn(150, function() {
// Content faded in
});
});
},
error: function() {
$(self.loading).fadeOut(150, function() {
$(self.error).fadeIn(150, function() {
// Error faded in
});
});
}
});
});
});
});
this.page = page;
}
And then the login.php file:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div class="padded loginphp">
<div id="loginbox">
<!-- the login box comes here
</div> <!-- #loginbox -->
</div>
</body>
</html>
And the login.js file:
$(document).ready(function() {
$('#honeyloginform').submit(function(event) {
//event.preventDefault();
login();
return false;
});
});
function login() {
$('.errorinputfields').removeClass('errorinputfields');
if (isEmpty($('#username'))) {
$('#username').addClass('errorinputfields');
$('#username').focus();
return;
}
if (isEmpty($('#password'))) {
$('#password').addClass('errorinputfields');
$('#password').focus();
return;
}
$('#honeyloginform').fadeOut(100, function(){
$('#loginbox .loading').fadeIn(300, function(){
var pword = $('#password').val();
var remember = "no";
if ($('#remember').is(':checked')) {
remember = "yes";
}
var JSONobj = {
username: $('#username').val(),
password: pword,
rem: remember
};
$.ajax({
url: 'ajax/login.php',
data: JSONobj,
success: function(data) {
//alert(data);
var JSONobj = JSON.parse(data);
if (JSONobj.Success) {
Interface.login(); //just loads the landing page after login
//window.setTimeout('location.reload()', 300);
} else {
$('#loginbox .loading').fadeOut(300,function(){
$('#honeyloginform').fadeIn(300);
});
$('#username').focus();
$('#loading-message').text(JSONobj.Message).show();
}
}
});
});
});
}
I've managed to find the problem, and fix it!
I've made a change to my interface layout, and as a result, the three selectors, $(self.error), $(self.content) and $(self.loading) each contain more than one element, where it always only contained one each.
This seems to cause the callback functions to be compounded or something, as everything inside the final callback in loadContent() was called 9 times.
So it was a simple case of redefining the selectors, so that they refer to one element each.
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.