Here's a code snippet I've got where I'm trying to show a 'loader' gif. I'm testing on my localhost and works fine. However with a little observation now I wonder is it really showing the gif while php pulls data from the SQL data base or otherwise.
My observation is, when I clear browser cache and refresh the page, I see the browser's loader images turns a couple of rounds before my page's loader loads. Am I missing something?
PS: The loader gif I've got is a very light file obviously.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#wait").css("display", "block");
});
$(document).ajaxComplete(function () {
$("#wait").css("display", "none");
});
$("#text").load("example.php");
});
</script>
</head>
<body>
<button>Change Content</button>
<div id="wait" style="display:none;"><img src="../images/loader.gif"></div>
<div id="text"></div>
</body>
</html>
A great way to test loader images used in ajax calls while developing is to introduce an artificial delay in the script you are calling.
usleep(3000);
This will make the script sleep for 3 seconds, simulating a decent amount of network delay, allowing you to visually see your loader images in action.
Related
I'm testing a simple flow using Codeception with Selenium/FacebookWebdriver where a popup window gets closed at the end - causing entire test to break.
The code is complete (the test will run) and will reproduce the error.
I'm really desperate here, any suggestions will be very much appreciated.
These are the errors I get:
Codeception error message:
[Facebook\WebDriver\Exception\NoSuchWindowException]
Window not found. The browser window may have been closed.
Selenium server output message:
WARN - Exception: Window not found. The browser window may have been closed.
This code reproduces the problem.
It consits of 3 .html files (main.html, intermediate.html, popup.html), test file (PopupCest.php) and configuration file (selenium.suite.yml).
PopupCest.php
<?php
class PopupCest
{
public function popup(SeleniumTester $I)
{
$I->expectTo('Start on main page and click a link that opens a popup');
$I->amOnPage('/main.html');
$I->click('#main-link');
$I->expectTo('Interact with the popup window and click the final confirmation button');
$I->switchToNextTab();
$I->click('#final-confirmation-button');
$I->expectTo('Go back to intermediate window and let it do its magic');
$I->switchToPreviousTab();
$I->see('contents of this intermediate page');
$I->seeInCurrentUrl('intermediate.html');
}
}
selenium.suite.yml
class_name: SeleniumTester
modules:
enabled:
- WebDriver:
url: http://localhost
browser: firefox
- \Helper\Selenium
main.html
<html>
<head>
<meta charset="utf-8">
<title>Main page - under my control</title>
<meta name="description" content="Main page - under my control">
</head>
<body>
<h1>Main</h1>
<p>
After clicking this link, "intermediate page" url is received from a backend operation in reality.
</p>
<br>
Click here to open the popup <br>
</body>
</html>
intermediate.html
<html>
<head>
<meta charset="utf-8">
<title>External - intermediate page</title>
<meta name="description" content="Intermediate page outside of my control">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Intermediate</h1>
<p>
In reality, contents of this intermediate page is fully controlled by other party - a payment processor. <br>
It only load a javascript that opens up a popup window where user enters his payment details.
</p>
<script type="text/javascript">
$(function() {
var settings = "height=400,width=500,status=yes,dependent=no,resizable=yes";
popup = window.open('popup.html', 'dont_know_the_name_here', settings);
if (popup != null) {
popup.focus();
}
});
</script>
</body>
</html>
popup.html
<html>
<head>
<meta charset="utf-8">
<title>External - popup</title>
<meta name="description" content="Popup page outside of my control">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Popup</h1>
<p>
Contents of this page is fully controlled by other party - a payment processor. <br>
This is where user enters his payment details.
</p>
<p>
e.g. <i>"After you have finished your data input, click here to:"</i> <br>
Confirm your payment
</p>
<script type="text/javascript">
$(function() {
$('#final-confirmation-button').on('click', function(e) {
e.preventDefault();
window.close(); // <-- this breaks it all
});
});
</script>
</body>
</html>
Thank you for your help,
Tomas
Test code seems to be correct, I suspect that problem is related to outdated versions or possibly Firefox driver.
I tested your code with chrome+chromedriver and it seems to work without problem. Here's a test repo with instructions how to use chromedriver + required config changes: https://github.com/henrikauppinen/codeception-popup-chromedriver
Generally I'd advise to use Chrome for this type of testing, unless you are testing Firefox specifically or if it's a requirement.
They are good practices put jQuery the bottom of the page, before the </ body>, but when you have an include PHP in the middle of the page and in this include I have that jQuery code like this:
[code of index.php]
[include]
<script>
$(function() {
<?php
echo "$('#".$_SESSION['user']['flags']."').attr('selected', true);";
?>
});
</script>
[/include]
[code of index.php including jQuery.js here before </body>]
Firebug tells me that $ is not defined. I used "defer" but it does not work either. I searched Stackoverflow but do not know how to fix it.
Here my code:
index.php
<!doctype html>
<html class="no-js" lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="noodp, noydir">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="body">
<?php
include './step1.php';
?>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
step1.php
<script>
$(function() {
<?php
echo "$('#".$_SESSION['user']['flags']."').attr('selected', true);";
?>
});
</script>
If you replace the "$(function(){" section with window.onload you can ensure that all script files have been loaded before attempting to fire your function.
However, be aware that this fires much later that jQuery's document.ready. jQuery's method fires when the dom is loaded whereas window.onload waits until the whole document and it's scripts have been loaded.
More info and example here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
You included the jQuery.js after the inclusion of that script. Move your jQuery.js include above include statement that contains your js code.
Answer to the problem:
You have included the step1.php before including jQuery.js. This is why it won't work. Include jQuery.js before including step1.php.
Answer regarding jQuery in end of HTML body:
Yes, it's a good practice but that seems to me as a micro-optimization. As it would speed up the loadtime. But you can only do that if you include your written jQuery code after including the actual jQuery.js library. Since you're not able to do that in the current contruction, you need to change the order to make it work.
Otherwise general debugging techniques apply:
Check your browser. Right click. Inspect element. Open tab network. Make sure the jQuery.js file is really included so you'll have a HTTP status 200 code on this request.
Make sure jQuery is really inside jQuery.js and the file is not empty or having other contents.
Make sure jQuery not included twice.
Also checkout:
https://api.jquery.com/jquery.noconflict/
http://www.sitepoint.com/types-document-ready/
or try:
jQuery(document).ready(function(){ /* [code here] */ });
I have to play a song in browses including Android and iPhone. I did it using the html5 audio player. But playbackrate is not working in Mobile Browsers. Is there any library or plugin available for this? Is web-audio API supports this feature?
In this site playback rate is working in mobiles too. But unable to find which method they are following?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<audio src="./audio/Kalimba.mp3" id="audio1" controls>Canvas not supported</audio>
<button id="playbutton" >Play</button>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#playbutton').click(function () {
var audioElm = document.getElementById("audio1");
var playBackSpeed = 0.5;
audioElm = document.getElementById("audio1");
audioElm.playbackRate = playBackSpeed; // default speed 1
audioElm.play();
});
});
</script>
</html>
The site you're linking to uses Web Audio, but it doesn't use playbackrate to change the tempo of the song. Instead it schedules each note separately, so when you change the tempo, what you're really doing is change the BPM at which notes are scheduled. You can think of it as changing this:
setTimeout(schedule, 1000);
to:
setTimeout(schedule, 500);
when you go from 60 BPM to 120 BPM.
There is, however, a similar thing is Web Audio as what you're doing with the audio element. The AudioBufferSourceNode, which you use to play a pre recorded sample, has a property called playbackRate. This changes the rate of the audio (but doesn't do pitch correction!). Check it out at https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode
There are no any external Plugin or API which is required to play audio in Browser, this is one of the advantages of using HTML5.
Below i am mentioning the same with easy syntax and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<audio controls>
<source src="Kalimba.mp3" type="audio/mp3" />
Audio not supported.
</audio>
My server side data is following:
$total=100;
$jd=array();
for($i=1;$i<=$total; $i++){
$jd["current_value"]=$i;
$jd["total"]=$total;
$jd["some_extra_data"]="Extra data-$i";
echo json_encode($jd);
sleep(1);
}
Now i want to create a progress bar from above ajax request data.
But i don't get a single data from request. all time i get full data. so, i cant create a progress bar.
how can i apply request?
Please me. thanks.
If you are not too adverse to using a JS library then you might consider using JQuerys UI library for this.
http://jqueryui.com/progressbar/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
If you were to combine this with the JQuery Ajax request then you should be able to achieve what you are after: http://api.jquery.com/jquery.ajax/
You can then periodically call the server side page to get a value to populate the progress bar.
Let me know if thats in the direct direction and I can elaborate if need be.
I'm a newbie to jquery-pjax. Now, I'm developing a flexible(no refresh and load content asynchronously) single web page using PHP and jQuery.
But some issues occur in my page when using jquery-pjax. One of the issues is that jquery-pjax will strip an outermost tag automatically in asynchronous responses.
Let me see my source code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js"></script>
<script src="jquery.pjax.min.js"></script>
<script>
$(document).pjax('#pjax-container a', '#pjax-container', {
timeout: 1300,
replace: true,
fragment: 'body'
});
</script>
</head>
<body>
<?php
if (!isset($_SERVER['HTTP_X_PJAX']))
{
?>
<h1>A jquery-pjax test page.</h1>
<div id="pjax-container">
<?php
}
?>
Refresh
<?php
if (!isset($_SERVER['HTTP_X_PJAX']))
{
?>
</div>
<?php
}
?>
</body>
</html>
In terms only the source code, It seems that there isn't any issue. But when run it and click the refresh link, the link be removed and there is only its caption. I saw a network monitor in my browser, There is the link in the new asynchronous response. (body : <body>Refresh</body>) But I saw a elements monitor, There isn't the link... (body : <div id="pjax-container">Refresh</div>)
Question : Why jquery-pjax does strip an outhermost tag?
Thanks.
I can't reproduce your issue. I set up two pages like your script would spit out
http://jsbin.com/potuputaha/2/edit
http://jsbin.com/tutebebufi/1/edit
And when you run it http://jsbin.com/potuputaha/2, pressing the link will replace the page with the Refresh me from the second page.