I wrote the following html file:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body>
<h1> HELLO WORLD </h1>
<button type="button"> CLICK HERE</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('button').click(function() {
$('h1').text("Thank you");
var ans = prompt("Please type your age");
if (ans > 80) {
$('h1').text("You're old");
}
})
</script> </body> </html>
I want to test that once the user clicks on the button and gives an age older than 80, the page behaves as expected and the h1-tag text changes to "You're old".
My question is how to write a Jasmine spec to test this feature?
You need to use "Spy" object to intercept "prompt" function and return your own value. After check the caption text. The code may look like ...
deascribe("test inline function:", function() {
it("caption should be 'too old' for age of more than 80", function () {
spyOn(window, 'prompt').and.returnValue(81);
$('button').click();
expect($('h1').text()).toBe("You're old");
});
});
Related
I wanted this code to pop up a window when the password is correct and when the password isn't correct I wanted to make it go to google.com.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="Javascript">
<!--hide
var password;
var pass1="12345";
<a href="https://www.google.com/?safe=active&ssui=on"
target="_blank" onclick="preventProp(event)">Google</a>
function preventProp(e){
if(confirm("Are you sure you want to open this link ?")){
return true;
}
password=prompt("Enter Password To View Zapazzi","");
if(password!==pass1)
window.confirm("Incorrect Password, click ok to go to Google");
else
{
alert("Correct Password, click ok to go to Zapazzi");
window.location="https://sites.google.com/cusdk8.org/zapazzi/home";
}
//-->
</script>
</body>
</html>
here is what you have to do
remove the <a href="https://www.google.com/?safe=active&ssui=on"
target="_blank" onclick="preventProp(event)">Google</a> from <script> </script>
change script type to <script type="text/javascript">
change the <a href="...> to button because when it is a link tag it firstly does its job of redirecting before listening to the event so I used button
here is my clean code that is working
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
<button onclick="preventProp(event)">Google</button>
<script type="text/javascript">
var password;
var pass1="12345";
function preventProp(e){
if(confirm("Are you sure you want to open this link ?")){
return true;
}
password=prompt("Enter Password To View Zapazzi","");
if(password !== pass1)
window.confirm("Incorrect Password, click ok to go to Google");
else{
alert("Correct Password, click ok to go to Zapazzi");
window.location="https://sites.google.com/cusdk8.org/zapazzi/home";
}
}
</script>
</body>
</html>
I'm using nw.js to make an exe file. I can set it to fullscreen mode but how can I escape it using the escape key? People are suggesting the below code but which file do I put this in?
var gui = window.requireNode('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "Esc",
active: function () {
gui.Window.get().leaveFullscreen();
})
}));
Officially the following way is suggested in the documentation:
http://docs.nwjs.io/en/latest/For%20Users/FAQ/
You have to register a global hotkey:
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
You can put this snippet at the beginning of Your app.
<!DOCTYPE html>
<html>
<head>
<script>
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
you can use this to exit firescreen
<!DOCTYPE html>
<html>
<head>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
And this to toggle firescreen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "F11",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));
</script>
</body>
</html>
you can use this to exit fullscreen
<!DOCTYPE html>
<html>
<head>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
And this to toggle fullscreen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "F11",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));
</script>
</body>
</html>
I've been looking for an example of updating data with d3.xhr but have not seen anything obvious, or at least of my level of understanding. The following 2 links are close but no cigar:
from stackoverflow
from mbostock’s block
I look around more and found this example in jquery and php. I tried it and understand the code. I would appreciate if you give me an equivalent code in d3.xhr or d3.json. BTW, what is different between d3.xhr and d3.json, and when to use what? Thanks in advance.
<?php
// AJAX & PHP example
// http://iviewsource.com/codingtutorials/learning-how-to-use-jquery-ajax-with-php-video-tutorial/
if ($_GET['ip']) {
$ip = gethostbyname($_GET['ip']);
echo($ip);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Get Reverse IP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
Please enter a domain name
<input type="text" id="searchip">
<div id="resultip"></div>
<script>
$(document).ready(function() {
$('#searchip').change(function(){
$.ajax({
type: "GET",
url: "ajax.php",
data: 'ip=' + $('#searchip').val(),
success: function(msg){
$('#resultip').html(msg);
}
}); // Ajax Call
}); //event handler
}); //document.ready
</script>
</body>
</html>
I found the solution. In fact it has less coding, :) I sincerely hope that the answer would be useful to someone.
<?php
// AJAX & PHP example
if ($_GET['ip']) {
$ip = gethostbyname($_GET['ip']);
echo($ip);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Get Reverse IP</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
Please enter a domain name
<input type="text" id="searchip">
<div id="resultip"></div>
<script>
d3.select('#searchip').on("change", function() {
d3.xhr('xhr.php?ip='+this.value, function(data) {
d3.select('#resultip').html(data.response);
})
});
</script>
</body>
</html>
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
When I execute the code below in IE7/WinXP32, then the output in the console is "undefined". The output changes to the expected "getContext()", when I make either of two modifications:
I remove the image tag.
I use: <body onload="draw()">
Any idea what is going on here? What may be a workaround?
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
var djConfig = {parseOnLoad: false, isDebug: true};
</script>
<script type="text/javascript"
src="/development/javascript/dojo-release-1.4.3-src/dojo/dojo.js">
</script>
<!--[if IE]>
<script type="text/javascript" src="/javascript/excanvas_r73.js"></script>
<![endif]-->
<script type="text/javascript">
function draw() {
var canvas = dojo.byId("canvas");
console.log(canvas.getContext);
}
dojo.addOnLoad(draw);
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<img src="nonexisting.gif">
</body>
</html>
Update: Seems like replacing "dojo.addOnLoad(draw);" with the following code does the trick.
function init() {
dojo.addOnLoad(draw);
}
if (dojo.isIE) {
dojo.connect('onload', init);
} else {
init();
}
dojo.addOnLoad fires before document.onload. I think it's associated with DOMContentLoaded. Perhaps excanvas does its initialization on the same event? Can you just use document.onload?