(workd1.js)
$(function(){
$('#btn').on('click'.getData);
function getData()
{
var target_url='books.xml';
$.ajax({
type:'GET',
dataType:'xml',
url: target_url
}).fail(function(jqXHR, textStatus, errorThrown){
alert('失敗');
}).done(function(data, textStatus, jqXHR){
alert('成功');
console.log(data);
});
}
});
this one html code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input#btn {
font-size: 16px;
margin: 20px 0 20px 20px;
background-color: #5857d4;
border:none;
padding: 10px 24px;
color: #fff;
border-radius: 4px;
}
</style>
</head>
<body>
<p>
<input id="btn" type="button" value="外部データを取得する">
</p>
<div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="workd1.js"></script>
</body>
</html>
i made a simple html code and ajax program to read a xml item and post it to the html folder.
at the html code I made a button type to execute the ajax program but the button cannot be click. I wonder why?
is there anyone know what the reason?
Related
I am new to HTML and I face a problem with my code regarding the form onSubmit.
When I do not use the form and have the onSubmit="Move()" in input as onClick="Move", then the function Move works perfectly fine.
However, when I include the form and put onSubmit="Move()" then the function does not work at all.
May someone point out my mistake and provide a solution to this? This really drives me mad.
<!doctype html>
<html lang="en">
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<head>
<meta charset="utf-8">
<title>Hello</title>
<link rel=stylesheet type=text/css href='{{ url_for('static',filename='style.css')}}'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<link rel=stylesheet type=text/css href='/static/style.css'>-->
</head>
<body>
<div id="content">
<h1>Hello</h1>
<div class=metanav>
<h4>Please enter a stock ticker eg. GOOG, and check desired features.</h4>
<form onsubmit="Move()">
<input type="submit" value="Submit"/>
</form>
<div id="myProgress">
<div id="myBar">10%</div>
</div>
<script>
function Move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
<hr>
{% block content %}{% endblock %}
</div>
</div>
</body>
I have converted my .swf to HTML5 using Google Swiffy. But recently one Media Agency says the banners had a problem opening 2 new tabs instead of just one.
This is the code I always used and its having the double tab, the agency says it redirects to a route on the device ex: file:///Users/folder/folder/UNDEFINED and the other one to the DCM server.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<a href="javascript:window.open(window.clickTag)" style="width:300px; height:250px; display: block; position: absolute; z-index:999;">
<div id="swiffycontainer" style="width: 300px; height: 250px; border:1px solid black; box-sizing: border-box; ">
</div>
</a>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
so, I found a solution to this problem in this question
And I'm also not sure if this is correct for a DCM file since I don't know if an exit URL can be defined without a clicktag
[EDIT] The agency now tells me that they don't have the problem of two windows opening, but they got the error that no clicktag was found... and of course. So I don't know what to do here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<style>
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="bg-exit">
<div id="swiffycontainer" style="width: 120px; height: 600px; border:1px solid black; box-sizing: border-box; ">
</div>
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
</body>
</html>
I really need to fix this as soon as possible, otherwise I'll have to redo 35 banners in GWD in just a few hours so any help will be greatly appreciated. Thanks in advance.
looks like you have a bgExit event but no clicktag ?
var clickTag = "http://www.google.com";
GOOGLE DCM
I want to make a textarea where you can type inside of it, with a black background and green text and the ">_" blinks. How would i go about making this?
You can use this in your CSS:
textarea {
background-color: #000;
border: 1px solid #000;
color: #00ff00;
padding: 8px;
font-family: courier new;
}
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8" />
<title>Demo -TextArea</title>
<link rel="stylesheet" type="text/css" href="jqueryui.css">
<script src="jquery.js"></script>
<script src="jqueryui.js"></script>
<script>
$(document).ready(function() {
$("#myTextArea").html(">_");
setInterval(function(){
removeAndAppendBlickWraper();
},2000);
});
function removeAndAppendBlickWraper(){
removeAndAppendBlick(function(){
var text = $("#myTextArea").val(),
withCursortext =text+">_";
$("#myTextArea").val(withCursortext);
});
}
function removeAndAppendBlick(callback){
var text = $("#myTextArea").val();
var witoutCursor = text.substr(0,text.lastIndexOf(">_"));
$("#myTextArea").val(witoutCursor);
setTimeout(function(){
callback();
},1500);
}
</script>
</head>
<body>
<textarea id="myTextArea" style="background-color: black;color: green;" row="5"></textarea>
</body>
</html>
DEMO (thanks to amit kate)
I'm playing the the Shadow DOM 101 tutorial at html5rocks.
I'm using Chrome 25.0.1364.172 and
when I try to appendChild to the Shadow DOM root (as shown in the tutorial) I get an
Uncaught Error: NotFoundError: DOM Exception 8.
I guess I'm missing something obvious but I can't figure out what. Here's
the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test the shadow dom</title>
</head>
<body>
<div id="myName">Alon</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script id="myNameTemplate" type="text/x-tmpl-template">
<style>
.outer {
border:2px solid brown;
border-radius: 1em;
background: red;
font-size: 28pt;
width: 12em;
height:2em;
text-align: center;
}
.boilerplate {
color:white;
font-family: sans-serif;
padding:0.5em;
}
.name {
color:black;
background: white;
font-family: "Marker Felt", cursive;
font-size: 45pt;
padding-top:0.2em;
}
</style>
<div class="outer">
<div class="boilerplate">
Hi! my name is
</div>
<div class="name">
alon
</div>
</div>
</script>
<script>
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
console.log(shadow);// I get #shadow-root in the console
var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options
console.log(template);//I get the content of the template in the console
shadow.appendChild(template); //this part breaks
});
</script>
</body>
</html>
Since my browser doesn't support the new <template> tag shown in the tutorial I changed it to <script type="text/x-tmpl">.
Edit: I get the same error from the console when I try:
shadow.appendChild('<div></div>')
Error: NotFoundError: DOM Exception 8
appendChild() has never worked like that
document.body.appendChild('<div></div>') will give you the same error.
What you want is shadow.innerHTML = template;
You have got some of the markup wrong and a few lines in the script that select the template are incorrect. I have modified the code so it works.
<script id="myNameTemplate" type="text/x-tmpl-template">
...
</script>
to this
<template id="myNameTemplate">
...
</template>
And in your script at the bottom of the page I modified your template var, it was using jQuery for some reason and not querySelector(). So this code below
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
console.log(shadow);// I get #shadow-root in the console
var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options
console.log(template);//I get the content of the template in the console
shadow.appendChild(template); //this part breaks
});
becomes this
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
var template = document.querySelector("#myNameTemplate");
shadow.appendChild(template.content);
});
Here is the complete markup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test the shadow dom</title>
</head>
<body>
<div id="myName">Alon</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<template id="myNameTemplate">
<style>
.outer {
border:2px solid brown;
border-radius: 1em;
background: red;
font-size: 28pt;
width: 12em;
height:2em;
text-align: center;
}
.boilerplate {
color:white;
font-family: sans-serif;
padding:0.5em;
}
.name {
color:black;
background: white;
font-family: "Marker Felt", cursive;
font-size: 45pt;
padding-top:0.2em;
}
</style>
<div class="outer">
<div class="boilerplate">
Hi! my name is
</div>
<div class="name">
alon
</div>
</div>
</template>
<script>
$(document).ready(function(){
var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
console.log(shadow);// I get #shadow-root in the console
var template = document.querySelector("#myNameTemplate");//also tried text(), without jQuery with innerHTML and other options
console.log(template);//I get the content of the template in the console
shadow.appendChild(template.content); //this part breaks
});
</script>
</body>
You cannot use anything other than the .content of the template AFAIK because template is a Document Fragment and to access that fragment you are required to select the inner content of the HTML5 element <template>.
The way I look at it is that the <template> tag is basically a static HTML way of creating a document fragment that you can grab with the javascript method querySelector(). You could create the fragment using createDocumentFragment() if you wanted to append the DOM through an extension or whatever but that's another bucket of frogs.
I recently downloaded the Full Calendar program and was wondering what it requires to be installed on the server to work with JSON feeds. I tried running the json demo provided with the download but it does not fetch any events from the provided php file.
Thanks for any help
I got the same problem, but solving is quite easly, just check that json.html doesn't have headers set up correctly (in fact it doesn't have links to CSS nor JQuery or javascript files), just check that. A copy of my json.html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='../public/js/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../public/js/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../public/js/jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../public/js/jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../public/js/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json-events.php needs to be running in the same directory.</p>
</body>
</html>
it calls a PHP file (json-events.php) so you need be running the example from a webserver that has php installed
It worked for me once I set the timezone correct.
Add this to the json-events.php file:
date_default_timezone_set('America/Los_Angeles');