Experimenting with JS/Jquery and the JQuery .get function. I'm getting the pop up/alert to open but there is no text after "Data Loaded:"
What am I missing?
I have a .js file (called lab1.js) that looks like this:
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
person + "'s Favorite Links:";
}
$(document).ready(function(){
$.get("/Users/rabdelaz/Desktop/Labs/lab1.txt", function(data){
alert("Data Loaded: " + data);
});
});
With the following in my lab1.txt file:
"a line of text of your choosing"
Finally here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="lab1.css">
<meta charset="utf-8"/>
<title>Lab 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
<body>
<p id="demo"></p>
<ul>
<li>www.akamai.com</li>
<li>aloha.akamai.com</li>
<li>agora.akamai.com</li>
<li>ask.akamai.com</li>
<li>luau.akamai.com</li>
<li>mydrive.akamai.com</li>
<li>act.akamai.com</li>
<li>GSS Tools</li>
</ul>
<script src="lab1.js"></script>
</body>
</html>
Related
I am trying to get an HTML element from 2 different html files. The problem is I only get one of them.
var message1 = document.getElementById("message1") works.
But when I try to do the same for the element in the other html page:
var message2 = document.getElementById("message2") it returns null
I have a main html file (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id = "message1">I hate the post office</p>
<script src="script.js"></script>
</body>
</html>
And I also have another html file (page2.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id = "message2">Random sentence</p>
<script src="script.js"></script>
</body>
</html>
And finally I have a javascript file (script.js):
//Gets message1 from index.html (works)
var message1 = document.getElementById("message1")
//logs message1 from index.html (works)
console.log(message1)
//gets message2 from page2.html (doesn't work)
var message2 = document.getElementById("message2")
//logs message2 from page2.html (logs null)
console.log(message2)
How do I get the elements of id message and message2 in script.js?
I try this another way using iframe. Add in index.html page
<p id="message">I hate the post office</p>
<iframe src="page2.html" frameborder="0" style="display: none;"></iframe>
<script src="script.js"></script>
my problem is quite minor.
I do not get along with the syntax of JavaScript
What I want to do is actually cause the following code to occur:
with this regex:
^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<meta charset="utf-8" />
<title></title>
<script>
$(document).ready(function () {
$("#but").click(check);
});
function check() {
var str = $("#dataCon").val();
var result = str.match(/\d/g);
alert(result);
}
</script>
</head>
<body>
<textarea id="dataCon"></textarea>
<button id="but">Click here</button>
</body>
</html>
Showing listview data in html5 from database using java script and json. Click listview is Show detail. I can make show listview but can't show detail. The changing page. Listview 1 page, Detail 1 page.
This is code run successful. but can't show detail.
$(function() {
var people = [];
var json = "your url";
$.getJSON(json, function(json1) {
$.each(json1, function(key, data) {
$('#myUL').append('<li data-id="' + data.VendorCode + '"><img src="http://Order%20Custumer/images/'+data.VendorCode+'.png"/><h3 style="color:#FFCC00">' + data.LocalDesc + '</h3><p style="color:#FF9">' + data.EngDesc + '</p></li>');
});
$('#myUL').listview('refresh');
});
});
<!DOCTYPE HTML>
<!--
Intensify by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Salad Lovers</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<ul id="myUL" data-role="listview" data-inset="true">
</ul>
</body>
</html>
Include Jquery Library in your HTML file before tag and try running it.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
your HTML File seems to be:
<!DOCTYPE HTML>
<!--
Intensify by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Salad Lovers</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<ul id="myUL" data-role="listview" data-inset="true">
</ul>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
i want to display json data from online URL to HTML table?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.getJSON('test.json', function(data) {
var output="<ul>";
for (var i in data.items) {
output+="<li>" + data.items[i].Id + " " + data.items[i].name + "--" + data.items[i].old+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
</body>
</html>
how i can change test.json with online URL ?
its doesn't show any result can you please help me
I'm using phonegap and I need i18n support for this application so I ended up by choosing i18next. Below is my sample code,but i18next is failing,can anyone help me in this? The Output that I'm getting is just a list of links by name "nav.home","nav.page1","nav.page2". Moreover this sample HTML5 code is working only in Chrome and not in Mozilla.
//HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="i18next-1.6.3.js" ></script>
<script type="text/javascript" src="translation.en.json" ></script>
<script type="text/javascript" >
$(document).ready(function(){
i18n.init(function(t) {
$(".nav").i18n();
var appName = t("app.name");
});
});
</script>
</head>
<body>
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
translation.en.js file
{
"app": {
"name": "i18next"
},
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
I see two things:
English locale should be located in locales/en/translation.json
You don't have to attach .json file <head> section
Try to do this :
$(document).ready(function(){
$.i18n.init({
lng: 'en'
}, function(t) {
$(".nav").i18n();
var appName = t("app.name");
});
});
I think you are missing the options dictionnary.
Try this (not properly tested as I'm on my phone)
//HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="i18next-1.6.3.js" ></script>
<script type="text/javascript" >
$(document).ready(function(){
i18n.init({
resGetPath: 'translation.__lng__.json'
},
function(t) {
$(".nav").i18n();
var appName = t("app.name");
});
});
</script>
</head>
<body>
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
But I think it would be more normal to do as yarl said and rearrange into folders.