I have been using below posted code for transliterating user input on button click. But when run the code and click the transliterate button, I am getting /* callback */google.language.callbacks.id100('22', null, 403, 'This API is no longer available.', 200) response in my browser's (firefox) console. So please tell what can be its alternate solution?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Transliteration</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
google.load("elements", "1", { packages: "transliteration" });
function intialize_transliteration(){
var options = {
sourceLanguage: 'en',
destinationLanguage: ['kn'],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
var control =
new google.elements.transliteration.TransliterationControl(options);
//add as many as required
var ids = [ "fnk", "lnk" ];
control.makeTransliteratable(ids);
control.showControl('translControl');
}
google.setOnLoadCallback(intialize_transliteration);
function tr() {
//Call google.language.transliterate()
google.language.transliterate(["asdas"], "en", "ur", function(result) {
var container = document.getElementById("fnk");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
});
}
</script>
</head>
<body>
<br> First Name <input value="Thejesh Gangaiah" id="fn" />
<br> First Name (in Kannada) <input value="" id="fnk"/>
<br> Last Name <input value="Nagarathna" id="ln" />
<br> Last Name (in Kannada) <input value="" id="lnk"/>
<div id='translControl'></div>
<input type="button" onclick="tr()" value="transliterate"/>
</body>
</html>
The google transliteration API was deprecated in 2011, so I think that, as of today (June 2018), according to their Deprecation Policy, it can be gone. That means that can't be used anymore. The problem is not with your code, but with the service becoming unavailable.
Related
I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Here is my code, I compared it to this site which has the script working and I can't seem to spot the difference why mine is not working. I am probably missing something simple.
This is the site I got the script from but instructions are a little vague:
http://rickharrison.github.io/validate.js/
This is someone with a working example:
http://www.boutiqueapartments.com/index.php/contact/test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Main style sheet-->
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"/>
<!-- Validation script-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="../bugs/javascript/validate.min.js"></script>
<title></title>
</head>
<body>
<div class="success_box">All of the fields were successfully validated!</div>
<div class="error_box"></div>
<div id="container">
<form name="create_bug" id="create_bug" method="post" action="bug_create.php" onSubmit="return FormValidator()">
<div class="fm-req">
<label for="bug_description">Bug Title:</label>
<input type="text" name="bug_title" id="bug_title" value="" size="78" maxlength="250">
</div>
<input type="submit" name="formSubmit" value="Submit">
</form>
</div>
<script type="text/javascript">
new FormValidator('create_bug', [{
name: 'bug_title',
display: 'bug title',
rules: 'required'
}], function(errors, event) {
var SELECTOR_ERRORS = $('.error_box'),
SELECTOR_SUCCESS = $('.success_box');
if (errors.length > 0) {
SELECTOR_ERRORS.empty();
SELECTOR_ERRORS.append(errors.join('<br />'));
SELECTOR_SUCCESS.css({ display: 'none' });
SELECTOR_ERRORS.fadeIn(200);
}
});
</script>
</body>
</html>
All I get returned even if its blank is "all fields have successfully passed" or "Object object", any ideas where I am going wrong?
The errors is an object array, Can't simple join.
Try
new FormValidator('create_bug', [ {
name : 'bug_title',
display : 'bug title',
rules : 'required'
} ], function(errors, event) {
var SELECTOR_ERRORS = $('.error_box'), SELECTOR_SUCCESS = $('.success_box');
if (errors.length > 0) {
var errorString = '';
$.each(errors, function(i, e) {
errorString += e.message + '<br />';
})
SELECTOR_ERRORS.empty();
SELECTOR_ERRORS.html(errorString);
SELECTOR_SUCCESS.css({
display : 'none'
});
SELECTOR_ERRORS.fadeIn(200);
}
});
and fiddle is here.
I am new to JQuery and I am trying to make a search box. When I type in the search box it doesn't do anything and I don't know why. Any help would be appreciated. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Test</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {
return -1 != $(this).text().toUpperCase().indexOf(val); }).parent().show();
}
});
});
</script>
<form action="" method="post">
<label for="search">Search</label>
<input type="text" name="search" id="search" class="inputfield" />
</form>
<table border="0" align="left">
<tr><td>Gripper 25x8-12 GR25812</td></tr>
<tr><td>Gripper 25x10-12 GR251012</td></tr>
<tr><td>Gripper 26x9-12 GR26912</td></tr>
<tr><td>Gripper 26x12-12 GR261212</td></tr>
</table>
</body>
</html>
This is working code I have tried it in Fiddle and it works
Try to search 25x in input box you will find the output.
Updated
May be there are some zero-width spaces between your code,
I check and I got Error in your code like,
Uncaught SyntaxError: Unexpected token ILLEGAL
Reference Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL
And if you rewrite above code like,
$(function(){
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim($(this).val()).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {return -1 != $(this).text().toUpperCase().indexOf(val);}).parent().show();
}
});
})
Then I found it works
Here is a language translation code that google provides to detect the language in which the code is typed . This is the default code in which it translates the code from "var text=" field . I want to modify this code so as to recieve input from the user in a text box and on clicking the submit button it should display the result of language detected on the same page .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="detection"></div>
</body>
</html>
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize(text) {
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
return false;
}
</script>
</head>
<body>
<form onsubmit="return initialize(this.text1.value">
<input type="text" value="" name="text1" /><input type="submit" />
</form>
<div id="detection"></div>
</body>
</html>
I'm trying to figure out how to use Google's code to translate text ONLY if it is NOT English. The code below works if you enter Spanish or another foreign language, but it just repeats English if English is entered (obviously we don't need English translated). Any ideas? Thx.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google Ajax Language API</title>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
<body>
<div style="width:420px; margin:auto; padding:5px;">Original Text:</div>
<div id="text" style="width:420px; margin:auto; padding:5px;">I like cold beer</div>
<br />
<div style="width:420px; margin:auto; padding:5px;">Translated Text:</div>
<div id="translation" style="width:420px;margin:auto;padding:3px;"></div>
</body>
</html>
detect tells you the language. Just take advantage of that to do nothing if the language is 'en'
if (!result.error && result.language && result.language != 'en') {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}