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.
Related
Unable to get URL from JSON, when I tried it is displaying undefined. any advice?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
function a()
{
$.getJSON("https://tbe.taleo.net/MANAGER/dispatcher/api/v1/serviceUrl/UDAY",function(data) { alert(JSON.stringify(data));});
}
</script>
</head>
<body>
<input type="button" value="GET JSON" onclick="a()"/>
</body>
</html>
Below is the JSON from which I am trying to get the URL Value
{
"response": {
"URL": "https://chm.tbe.taleo.net/chm02/ats/api/v1/"
},
"status": {
"detail": {},
"success": true
}
}
Is there a better way to do this? and I am not using function-as-variable declarations so shall I use a semicolon after a curly bracket I mean after a function declaration
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
window.onload = function a(){
$.getJSON("https://tbe.taleo.net/MANAGER/dispatcher/api/v1/serviceUrl/UDAY",function(data) {
var innerHtml = "";
document.getElementById("CWS_URL").href=(data.response.URL).substr(0,(data.response.URL).indexOf("ats"))+"ats/careers/jobSearch.jsp?cws=1&org=UDAY";
});
}
</script>
</head>
<body>
<a href="#" id ="CWS_URL" >Careers</a>
</body>
</html>
Complete sample:
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#btn').click(function() {
$.getJSON(
'https://tbe.taleo.net/MANAGER/dispatcher/api/v1/serviceUrl/CODE',
function(data) {
alert(data.response.URL);
}
);
});
});
</script>
<input type="button" id="btn" value="Get JSON">
Result: https://jsfiddle.net/logual/mpmzpcfL/
Don't use pure JavaScript's event instructions when jQuery available. For example: onclick="a()". Remove It from your HTML code.
I want to get data from other page with js or jquery or ajax but not php. I just found a sample on stack overflow. (here is the link) But when I write these codes on my index.html file, it doesn't work. I don't understand reason. Here is my codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type=”text/javascript”>
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'https://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
it works as it is...
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I solved my problem these codes, thank for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var url = 'deneme.html';
$.get(url, function(response) {
$('div#external').html($(response).find('#content>ul>li').html());
});
});
</script>
<style> body, html{padding: 0; margin:0;}</style>
</head>
<body>
<div id="external" >
</div>
</body>
</html>
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - 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() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I'm trying to combine the tree display library jstree and a re-sizable plane splitter, Splitter.js library and am having problems.
The splitter library is at http://methvin.com/splitter/ . jstree is available from http://www.jstree.com/
I'm aiming for the tree to appear on the left and the content to appear on the right.
Both libraries work on their own but when I can't figure out how to combine them. The way each positions elements seems to conflict.
What I currently have is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../styles/splitterStyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOPs jsTree</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/splitter.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script>
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
// Breaks if this is added
// $("#MySplitter").splitter();
});
</script>
<script>
$().ready(function() {
// Also breaks if this is added
// $("#MySplitter").splitter();
});
</script>
</head>
<body>
<div id="MySplitter">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
<div id="content">
Some content
</div>
</div>
</body>
</html>
It looks like there is a problem with splitter and later versions of jquery.
This question discusses the issue:
Splitter.js won't work with new versions of jQuery
The answer from SpYk3HH refers to using jquery layout. This works. The code below shows an example.
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="_lib/jquery-ui-latest.js"></script>
<script type="text/javascript" src="_lib/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDemoStyles: true });
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
<script type="text/javascript">
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center content.</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I'm trying to do a very basic jquery tutorial but I'm not able to get it to work.
I'm calling the jquery library from google and then I try to create a script inside html.
If I do the same in a .js file I wouldn't have any problem.
What am I missing here?
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
Link
</body>
</html>
You need to split this up:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
...into two script elements:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
In the snippet you gave, the code within the <script> element won't be evaluated because the browser is only evaluating the contents from the src attribute and ignoring everything else.
Move your scripts into the head element like this:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
alert("Hello world!");
});
});
</script>
</head>
<body>
Link
</body>
</html>