I have a PHP script that takes around 1 minute 20 seconds to load as it fetches data from other websites. However I need some way to show the user that the page is loading. Something like 'This page is loading and may take up to 2 minutes' with a .gif loading images.
I have tried jquery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// Put an animated GIF image insight of content
$("#content").empty().html('<img src="http://www.website.com/images/loading.gif" />');
// Make AJAX call
$("#content").load("http://website.com/page.php")
</script>
<div id="content">
Content to load here!
</div>
</body>
</html>
But the page is blank (don't know if i'm implementing something wrong).
Is there any other way of doing so?
I have looked at other questions but can't find anything that matches what I need, that I can get to work.
Thanks,
Jack.
You won't get a response from the server, until the script has finished loading. Therefor you have to 'prepend' the page with another page, which shows the loading part. That page should call the script you want to execute, through for example an AJAX call.
You can use an AJAX call with beforeSend and success events:
$.ajax({
url: "http://website.com/page.php", type: "POST",
beforeSend: function() {
$("#content").html('<img src="images/loading.gif" />');
},
success: function(data) {
$("#content").html(data);
}
})
you got the script tags wrong. you need to close the script with the src call, and open a new one for the actual code
Also, you need to load the DOM before using JQuery to fetch objects. You can use $(document).ready() or place your script after the DOM element.
Where is your jquery loaded in the file? If its loaded at the top, you should wait for the dom to load before executing its JS.
http://api.jquery.com/ready/
Related
I'm showing the jw player inside the thickbox and calling the jwplayer code through ajax. When I call it, it is showing the thickbox without jwplayer and Error console showing the reference error "jwplayer is not defined" error.I'm using the jquery 1.8 .When I call it 2nd time without page refresh it is showing the video inside the jwplayer and error console showing no error.I'm using the following code.plz let me know how can I fix it?
$.ajax {
type: 'POST',
url: 'modules/oneclickorder.php?divid=' + DIVID,
success: function (data) {
alert(data);
$("#oneclickorder1").html(data);
tb_show('Welcome', '#TB_inline?height=700&width=550&inlineId=' + DIVID + '&modal=true', null);
}
})
oneclickorder.php page code
echo '<div id="testvideo" style="display:none";>
<div id="playvideo" style="width:549px;height:550px; background-color:#FFF;"></div>
<script type="text/javascript" src="https://www.markettrendsignal.com/js/jwplayer.js"> </script>
<script type="text/javascript">
jwplayer("playvideo").setup({
flashplayer: "https://www.markettrendsignal.com/js/player.swf",
file:"reversalpatternsplugin.flv",
height: 330,
provider: "rtmp",
streamer: "rtmp://s2qwctg3okfahu.cloudfront.net/cfx/st",
width: 550,
autostart:true
});
</script>
It's acting that way because the js file for jwplayer isn't loaded when you execute the script the first time.
Here's a breakdown of what's happening.
When you first call the ajax function, you return the HTML code which will download the .js file and execute the javascript code. Problem is, it executes the code before the file is loaded. Remember this is injecting javascript... there is no document.ready... you're already passed that.
The second time you call the function it works because the .js file is already loaded (from the first time).
Solution: Add the js file in the main document.
plugins/content/jw_allvideos/jw_allvideos/includes/js/wmvplayer/silverlight.js
Copy All code
Change the encoding to ANSI
Paste all code, and save.
Can I make an AJAX call immediately after loading a page? To be more specific, I have an ajax action on click of some html tag (say in page 1). Now when I come to the same page (page 1) from some other page (say page 2), (i.e.. on ready of the document) can I make that ajax call which is present in the onclick of that appropriate html tag? I am using PHP as server side script..
There were confusion on my question.. Let me explain more.
I have an phtml page where there are lot of ajax calls on click of various tags.
Lets say, tag1 has send-message functionality ajax call which on click loads a compose message part of html.
Similarly tag2 has photo display funcitonality ajax call which on click loads the photo display part of html.
Now I'm in page 2 which is a search result page Where I have a link for page 1. That link is send-message link. So now I have to come to page 2 and with compose message part html loaded. I want to load it via ajax which will be performed on clik of the send-message link (tag 1)in page 1. How to accomplish this? How will I inform to page 1 to load the compose message part of html through ajax?
you can call that function explain below
<script type="text/javascript">
function_name();
</script>
Im not sure what you want to achieve here but if you're asking if you could do AJAX on ready of the document, then i think you can..
Check this out in jquery
$(document).ready(function(e) {
$.ajax({
type:'POST',
url:g_site_path+'search/agentpopup',
dataType:'html',
data:data,
success:function(html){
$("#agentpopup").html(html);
}
})
}
$_SERVER['HTTP_REFERER']
Is the php data-feild that will tell from where the page request is coming (Ex. Page 2 has requested Page 1). Note that HTTP-Referer is by its very nature risky and can easily be spoofed. To test for document ready, you can use something like jQuery
$(document).ready(function() {
$.ajax('your_ajax_script.php', function(result) {
/* Do what ever you want to do of result*/
console.log(result);
});
});
I read this question, and I'm pretty sure it's 90% of what I need, but I'm after something more than just this, and my success formulating my query in Google has been less than stellar.
What I'd like to do
I have a form on a site that, when submitted, needs to connect with a database, and then the user needs to be apprised of the result. I'm trying to get the result page to load in a modal jQuery dialog instead of forcing a full page reload. At present, I'm just trying to create a jQuery dialog that replaces the contents of a <div> with the product of a PHP file. I know I will get the PHP file's execution result this way. That's what I'm after, but it currently is not working.
My code currently looks like this:
$(document).ready(function() {
$("#dialog").get('include.php', function(data) {
$("div#dialog").html(data);
});
});
And include.php is simply:
<?
echo "<h1>Loaded</h1>";
?>
When I load the page, the original contents of #dialog are still there. I have a strong suspicion that what I'm failing to grasp isn't major, but I've had bad luck finding the fix. I'm a web dev newbie. How do I wwebsite as on the internet?
You are calling get on a jQuery result. That'a a different method than $.get, the one you should be using:
$(document).ready(function() {
$.get('include.php', function(data) {
$("div#dialog").html(data);
});
});
i have been using Ajax call for the same purpose. So try this :
$(document).ready(function() {
$.ajax('include.php',
success : function(data) {
$("#dialog").html(data);
});
});
If you want to replace the entire contents of the #dialog DOM object with the HTML you load, then you probably want to use .load():
$(document).ready(function() {
$("#dialog").load('include.php', function(data) {
// no need to set the html here as .load() already does that
});
});
I am making a page that when you click on a "story" it loads the text and the media for that story, I have a seperate PHP script for the story text and the media (video or image) loading. both scripts work and actually it all works.
My problem is that when you click the story it is supposed to load the text, and then slide the media down when it's loaded However, it slides down even when the text is still loading.
newspaper.nmyster.co.uk/ is the site in question. click on the vimeo story on the left and see what I mean.
The code for the AJAX that loads the story and media is:
$.ajax({
url: './scripts/storyLoader.php?storyid='+storyId,
success: function(result){
$('#storycontainer').hide();
$('#loading').remove();
$('#storycontainer').hide(0).html(result).fadeIn(1000);
}
});
$.ajax({
url: './scripts/mediaLoader.php?storyid='+storyId,
success: function(result){
$('.martefact').hide();
$('#loading').remove();
$('.martefact').html(result).slideDown(1000);
}
});
Basically, I only want the media div to slide down once the video or image has finished loading.
Thanks
I would use something like this:
var requestHandle;
function loadPage(url, vars) {
//cancel pending
if (requestHandle!=null)
requestHandle.abort();
//load page..
requestHandle = $.get(url, vars, function(data) {
$('#storycontainer').hide();
$('#loading').remove();
$('#storycontainer').hide(0).html(data).fadeIn(1000);
});
}
Your request is asynchronous. It means that the script won't wait for data to load before executing the aesthetics bit.
You need to add async: false to your $.ajax call (look up other options over at jQuery documentation). That way, browser will wait for data to arrive first before executing the rest of JS.
What does your mediaLoader.php script do? Does it just check the database whether there are any media entries for the given story and if so format them properly and output them? Because currently I don't think you can slide down after the video is completely loaded, since you are embedding a vimeo video container, which handles the loading of the video itself and you have no access to it...
You need to use an 'on complete' callback function on the first animation.
Have a look jQuery api documentation for .fadeIn()
It should look something like:
$('#book').fadeIn('slow', function() {
// Code to run after animation completed...
});
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you