I need a progress wheel to show while a lot of database and 3rd Party cURL queries are being made while the user waits.
Should the progress wheel show by itself right away, or should I show it once the page template (but not content) has loaded in?
Should I show a progress wheel until the page's HTML/javascript is done loading, or when the PHP is done loading?
If you could show in raw code how most people do this, that'd be great. I'm using jQuery and this is a PHP site.
show progress bar until, php response(returned value may be HTML one) is not loaded into javascript.
"Should I show a progress wheel until
the page's HTML/javascript is done
loading, or when the PHP is done
loading?"
Yes to this Approach
Once loading is complete, hide loading using jquery and put the content in to container class.
<div class="loading">
</div>
<div id="container">
</div>
$('.loading')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
This is a very common technique and the process is fairly standard. You'll want to show the graphic only when a request is about to be made. This means setting the graphic to display none in your CSS. This is significantly better than using JavaScript for compatiblity and percieved performance reasons.
You can see here I've created a loading graphic, added in jQuery, and bound an async event to occur on an arbitrary click. The graphic is shown before the connection is made and then hidden when the request is completed. You use complete in case the response errors out.
<head> <style> .slider { display: none; }</style> </head>
<body>
<div class="slider"><img src="someslidergraphic.gif"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
jQuery(function($) {
// The animation slider cached for readability/performance
var slider = $(".slider");
// Arbitrary event
$("body").bind('click', function() {
// Show graphic before ajax
slider.show();
// Fetch content from PHP
$.ajax({
// Setings
...
'complete': function() {
// Hide during complete
slider.hide();
// Rest of code after request
...
}
});
});
</script>
</body>
Related
Here is my current setup.
I have two pages running on the jquery mobile framework.
index.php
article.php
In bother headers I have a js file called ratings.
here is my js ratings.js:
$(document).ready(function(){
$("#rating_1").click(function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
});
When I load index.php and then go to article.php none of my triggers to ratings.js work.
If I add rel="external" or data-ajax="false" my triggers work.
However then I lose the ability to have my loader wheel come up.
Any suggestions?
Thanks!
Important: Use $(document).bind('pageinit'), not
$(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as
the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Try:
$(document).bind('pageinit', function() {
$("#rating_1").click(function() {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
});
You should put everything inside:
<div id="page" data-role="page">
<!--here-->
</div>
Script in the <head></head> section will not be loaded while ajax loading.
The problem is that jQuery loads pages via Ajax and therefore, it only loads the
<div data-role="page"> </div>
parts of the page.
You can do 3 things to solve this kind of an issue.
1.) The one which you have already tried ( which is to make a data-ajax=false ) which makes your page load completely again and not showing your loader wheel.
2.) You can make the event a live event:
$("#rating_1").live('click', function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
This will make it look for any new #rating_1 and will add the click event to it.'
3.) Instead of using $(document).ready you can use $( '#myPage' ).live( 'pageinit',function(event){}; function.
I'm having issues getting jQuery tooltips (using Tipsy) to work. The tooltips work fine on regular pages, but I actually need the tooltips on a page that I am including through PHP. The reason why I'm including that page, is because I'm also using jQuery to auto-refresh that included page every x milliseconds.
It appears that this auto-refresh mechanism is keeping the tooltips from functioning properly. When I remove that mechanism, the tooltips appear but that part of the page obviously does not reload itself anymore at an interval. I'm looking for a way to get Tipsy to work while making sure my included page refreshes itself.
I include my page as follows:
<div id="vardisplay">
<?php include("vardisplay.php"); ?>
</div>
I then use the following script to refresh the "vardisplay" DIV, resulting in my included page to be reloaded:
<script>
$(document).ready(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay');
var refreshId = setInterval(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay')}, 750);
$.ajaxSetup({ cache: false });
});
</script>
The object I would want a Tipsy tooltip on (within my included page) could be something like:
<div id="TipsyMe" title="I got tipsied">
<p>Testpiece</p>
</div>
I'm currently trying to achieve that particular tooltip by putting this script on that page, which is supposed to show "I got tipsied" in a Tipsy tooltip:
<script>
$(function() {
$("#TipsyMe").tipsy({gravity: 's'});
});
</script>
What ends up showing is a regular browser tooltip where jQuery is fully ignored. Again, it works fine when I remove the auto-refresh mechanism on the main page.
I'm dumbfounded at this point. I've been Googling for the past few hours without any result what-so-ever. Any help would be greatly appreciated!
in the tipsy doc, you can stumble upon an option called "live"
$(function() {
$("#TipsyMe").tipsy({
gravity: 's',
live: true
});
});
shall do it. (as you seem new, accepting answer will attract people for your future answer hint hint hint :P)
be careful thou: "live tooltips do not support manual triggering." (from the doc)
EDIT: didn't see properly your code:
$(function() {
$("div.someTotal").tipsy({
gravity: 's',
live: true,
title: "I got tipsied"
});
});
"someTotal" is the class for all you "boxes" where you have the edit and delete icon. If you don't have such class yet, you can create one (you can name it tipsy by example) and use it ($("div.tipsy").tipsy({...
I have recently installed Simple Mailing List 2 (currently in beta) and I have got everything to work so far. The main thing that was left for me to do was to make a custom php page which the signup form redirects to once submitted. The content that the page shows is based on what the user enters in the email field and returns one of three results:
an error message if the email syntax is incorrect.
a custom message if the user has subscribed telling them to check their email.
a custom message if the user has chosen to unsubscribe.
That's the background out of the way. Now what I intend to do is show a popup window that includes the contents of the redirected php page (ie. one of the three results) instead of going to a new page. Is it possible to do this a css popup box so I don't have to open up a new window?
Thankyou
Adam
You can use JavaScript to send an ajax request to the PHP page that will do the calculations, the result will then be sent to your "window" content and then you show the window to the user
You're mixing metaphors. CSS is just a presentational technology that you use to determine the style of something. There is no such thing as a "css popup box".
What you want to do is have an HTML element (likely a div) that contains the information you intend to show, initially set to not be visible (you use CSS for this with the display:none; style). What you're describing is essentially an AJAX interaction that uses Javascript to parse the contents of the form, send data to the server to be evaluated, and return a message to be displayed (without triggering a postback/going to a new page). That Javascript would also handle the CSS part of setting the display of the HTML element to true.
This is a fairly common scenario, so you should be able to find snippets online.
...but here's a super dumb example
<html>
<head>
<title>AJAX Test</title>
</head>
<body>
<form action="#">
<input type="text" id="enterStuff" />
</form>
<div id="response" style="display:none;">
<p id="message">Put stuff in me</p>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
registerEventListeners();
});
function registerEventListeners(){
jQuery("#enterStuff").change(getData);
}
function getData(){
jQuery.ajax({
type : 'POST',
data : {
stuff : jQuery("#enterStuff").val(),
},
url : "http://localhost/myprocessor.php",
success : showCool,
complete : updateDisplay
});
}
function showCool(data, textStatus, jqXHR){
var selector = jQuery("#message");
selector.val(data)
}
function updateDisplay() {
jQuery("#response").show();
}
</script>
</body>
</html>
Then your myProcessor.php would have to read the value of the variable, do some logic, and echo a response.
You could use an <iframe> as an in-document 'pop-up', you just set the target of the form to the name/id of the iframe. (You can use some JavaScript to only show the iframe once the form is submitted.)
okay so on my home page i'm doing a user name and password check and then im using jquery document.location to send you to a logged in page say secure.php.... while this works it sends you to secure.php first and then images start loading ... how can i do it in such a way that it loads the entire page and then send you to secure.php
example : -
$.ajax ({
url: loginCheck.php,
type: 'POST',
data: username + password ,
success: function (check){
if(check==1)
document.location= /loginpage/secure.php
else alert(invalid username or pass)
}
});
Edit: I'm replacing my entire question now that I understand what you are trying to do. In secure.php, put all of your code in a containing div, something like this:
<body>
<div id="contentContainer">
<!-- content goes here -->
</div>
</body>
Set a style for #contentContainer to be hidden:
#contentContainer {
display: none;
}
Add a window.onload handler to show the div. Unlike onready, onload isn't called until all of the content has loaded including images.
$(window).load(function() {
$("#contentContainer").show();
});
You may want to do the same thing in reverse to a "loading" div with a message that says "loading...". Ie, initially display it, and hide it in the onload handler.
Edit: You can speed up the loading of the page by pre-loading the images in a hidden div in the previous page.
Home.php
<div class="preloader">
<img src="..." />
...
</div>
.preloader {
display: none;
}
Secure.php should load using the cached images.
...this strikes me as highly unsecure, but oh well.
Unless you build a metaframework in jQuery where all page loads are performed in a "shell" and then displayed only when ready to render, the answer is, I'm pretty sure, you can't.
Pages have a definite life cycle. jQuery and AJAX kinda blur the line a bit, but a page load is a singular event that controls the scripts. Loading the page would make the script you were using to load the page go away.
I'm not brilliant with AJAX but could somebody please write me a quick code for switching a DIV tag with an external page.
For example:
<script type="text/javascript">
// Fun Stuff Here //
</script>
<div id="random">HIDDEN</div>
It would be AWESOME if the content could fade-in when it's loaded.
Ok, I have this so far (but it doesn't seem to be working):
<ul>
<li>ss3</li>
<li>ss4</li>
</ul>
<script type="text/javascript">
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
$("#folioWrap").load($(this).attr("href"));
});
});
</script>
<div id="folioWrap"></div>
You may want to try this JavaScript AJAX loader jQuery plugin that can load page elements content via AJAX and it alters all the links in such way that when you click on the links of the AJAX loaded content, the new page element content is also loaded via AJAX.
I suppose you can hack it to add any fade transition effects when the new page element is loaded.