i used google translator for textbox. its working as excepted but when i moved to production it's showing
"The page at 'https://myexample.org/' was loaded over HTTPS, but requested an insecure script
'http://www.google.com/inputtools/request?text=kamla&ime=transliteration_en_ta&num=5&cp=0&cs=0&ie=utf-8&oe=utf-8&app=jsapi&uv&cb=_callbacks_._0je9phncp'.
This request has been blocked;"
so how to convert translator url http to https and my code is:
<!DOCTYPE html>
<html>
<head>
<title> Transliteration Help </title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("elements", "1", {packages: "transliteration"});
</script>
<style>
.inputapi-transliterate-indic-suggestion-menu{
z-index: 100;
}
</style>
<script>
function OnLoad() {
var currValue = document.getElementById("txtTranslator");
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
var control = new
google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(["txtTranslator"]);
var postValue = document.getElementById("txtTranslator");
} //end onLoad function
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
<input size="40" type="text" id="txtTranslator"/>
</body>
</html>
Open the https://www.google.com/jsapi and copy paste the code locally.
Change the URL's with http to https.Include this file in your code.
Also remove this code if you're using it
/* google.load("elements", "1", {
packages: "transliteration"
}); */
Related
I'm working on an interface which display data retrieved from my database thanks to a Google Line Chart. However, new data is stored in my database every 10 seconds and I can not refresh the chart automatically.
I need something really basic and I've already looked on the internet. I read something about Javascript/AJAX/JQuery ... but I'm more comfortable with Hardware :D
Here's my files
EDIT : Chart_get and the main file have been modified according to #Michel answer.
fetch.php - Fetch the data and echo
<?php // Connection and Request stuff
$host = blablabla
(...)
$req = $bdd->query('SELECT id, battery FROM Station');
while ($data = $req->fetch()){
$id = addslashes($data['id']);
$charge_batt = intval($data['charge_batt']);
$result .= "['".$id."' , ".$charge_batt."],";
}
$result = substr($result, 0, -1); // Erase the last ","
echo $result;
?>
Output :
['1' , 90],['2' , 89],['3' , 80],['4' , 100],['5' , 90],['6' , 50],['7' , 67]
chart_get.php - Initialize the chart and draw it with the "echo $result" data
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
<?php
echo ("['Date', 'Battery'],");
include('fetch.php');
?>
]);
var options = {
title: 'Battery health',
animation:{
duration: 1000,
easing: 'out',
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
To refresh the "chart_div" I've tried :
main.html - jQuery script with load function
<!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" xml:lang="fr" lang="fr">
<head>
<title>Project - Chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// first load it once, so it display's the chart
$('#tableHolder').load('chart_get.php');
// then execute the interval
setInterval(function(){$('#tableHolder').load('chart_get.php');}, 5000);
});
</script>
</head>
<body>
<p>Hello</p>
<div id="tableHolder"> </div>
</body>
</html>
But the chart is not displayed at all.
I have absolutely no idea what I'm doing wrong. I am reading in a fast way some tutorials about javascript but if you know how to resolve my issue it would be great to help me :)
Thanks !
Solution from OP.
I've found the answer!
<!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" xml:lang="fr" lang="fr">
<head>
<title>Projet GreenFeed - Station de recharge a energie positive</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
//AJAX Call is compulsory !
var jsonData = $.ajax({
url: "chart_fetch.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Battery',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// First load the chart once
drawChart();
// Set interval to call the drawChart again
setInterval(drawChart, 5000);
});
</script>
</head>
<body>
<div id="chart_div"> </div>
</body>
</html>
First get rid of the <!DOCTYPE>, <html>, <head>, <meta>, <title> tags in chart_get.php.
The data in chart_get.php is the same data you would have in <div id="tableHolder"></div> if you didn't wanted it to refresh.
Second, rewrite your script in main.html to this:
<script type="text/javascript">
$(document).ready(function(){
// first load it once, so it display's the chart
// (otherwise you have to wait 5 seconds)
$('#tableHolder').load('chart_get.php');
// then execute the interval
setInterval(function(){$('#tableHolder').load('chart_get.php');}, 5000);
});
</script>
How to include video recording and downloading in this code, My previous query in this question was solved successfully but now I need to have archiving feature in this solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myPublisherDiv"></div>
<div id="subscriberBucket"></div>
<script src="https://static.opentok.com/webrtc/v2.2/js/opentok.min.js" ></script>
<script type="text/javascript">
var apiKey = "<YOUR API KEY>";
var sessionId = "<YOUR SESSION ID>";
var token = "<YOUR SESSION ID'S TOKEN>";
session = OT.initSession(apiKey, sessionId);
session.connect(token, function (err) {
if (!err) {
session.publish("myPublisherDiv", { mirror: false });
}
});
session.on({
"streamCreated": function (event) {
session.subscribe(event.stream, "subscriberBucket", { width: 600, height: 450 }, { insertMode: "append" });
}
});
</script>
</body>
</html>
And please mention in yur answer if anything is wrong or not in this line
session.on({
"streamCreated": function (event) {
session.subscribe(event.stream, "subscriberBucket", { width: 600, height: 450 }, { insertMode: "append" });
I tested on another OpenTok app and clicked on mute and sound icons but could not reproduce what you are seeing.
I then created a new very simple group video chat app, clicked on mute and sound icons and I also could not reproduce what you are seeing.
I will paste in my group video chat app, you can start from this and slowly add in your own code part by part. Then you will be able to see what is causing your session to disconnect. Here is my simple group video chat app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myPublisherDiv"></div>
<div id="subscriberBucket"></div>
<script src="https://static.opentok.com/webrtc/v2.2/js/opentok.min.js" ></script>
<script type="text/javascript">
var apiKey = "<YOUR API KEY>";
var sessionId = "<YOUR SESSION ID>";
var token = "<YOUR SESSION ID'S TOKEN>";
session = OT.initSession(apiKey, sessionId);
session.connect(token, function(err){
if( !err ){
session.publish("myPublisherDiv");
}
});
session.on({
"streamCreated": function(event){
session.subscribe( event.stream, "subscriberBucket", {insertMode: "append"} );
}
});
</script>
</body>
</html>
I'm developing a chrome app and i'm trying to send a message to an external webpage. In the whole scenario, the external webpage needs to send a message back (but i'm not trying to achieve this yet).
Here is my code:
background.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prototype</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="background.js"></script>
</body>
</html>
background.js
var FileMessage = "Hello!";
var scriptName = "script.js";
var tabID;
//open a new tab with an app
function openApp() {
var url = "link_to_external_webpage_on_personal_server";
var win = window.open(url);
}
//function to run js files inside the extension
function runScript(script){
chrome.tabs.executeScript(null, {file: script});
}
//function to send a message to all tabs
function sendMessage(){
chrome.tabs.query({'active': true}, function(tabs) {
if(tabs.length === 1){
var tab = tabs[0];
//var tabID = tab.id;
chrome.extension.sendMessage(null, {newMessage : FileMessage});
console.log("extension sent a message...");
}
});
}
//main()
$(document).ready(function() {
openApp();
//when a new tab is updated
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
//createEvent();
sendMessage();
}
});
});
/*function createEvent(){
$.event.trigger({
type: "newMessage",
message: "Hello World!"
});
}*/
external js file
$(document).ready(function() {
console.log( "app script is running" );
$(document).on("newMessage", newMessageHandler);
/*document.addEventListener("myEvent",myEventHandler);*/
document.addEventListener("newMessage",myEventHandler);
document.addEventListener('newMessage', function(event) {
console.log("message received...");
}, false);
});
I can see that most of the code is running with the console prints. The only one i'm not receiving is the one saying "message received". I've also tried using events (commented in the code) but i was not successful too.
Does anyone know what i'm doing wrong ?
Thanks in advance for the help !
I have a webpage where I load some javascript files in header. Some subpage will load aditional javascript files. On the main page everything is working just fine but on the subpage I get alot of exceptions like this :
Uncaught TypeError: Property '$' of object [object Object] is not a
function
I can see that this exception occurs in details.js, voteHandler.js and 4 times in the HTML page itself. The exception is always thrown on this line :
$("document").ready(function () {
This is how the main page that works looks like :
<head>
<script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
<script type="text/javascript">
//URL for voting
var _postVoteUrl = 'http://localhost:5215/Post/Vote'
//URL for tags
var _tagsUrl = 'http://localhost:5215/Post/Tags'
//Keep track of if a cascading is loading, if so, cancel submits
var cascadingControlLoading = false;
window.latestClick = '';
function IsNotDblClick(objectID) {
if (window.latestClick != objectID &&
!cascadingControlLoading) {
window.latestClick = objectID;
return true;
} else {
return false;
}
}
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
</script>
<script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
<script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>
<script type="text/javascript" src=/Scripts/formhandler.js></script>
<script type="text/javascript" src=/Scripts/taghandler.js></script>
<script src="/Scripts/voteHandler.js"></script>
<script type="text/javascript" src=/Scripts/select2.min.js %>"></script>
<script>
function TogglePostCon() {
$('#postListEditorCon').toggle();
}
SetupTagTextBox("txtTagBox", false);
SetupTagTextBoxPersonalTag("txtPersonalTagBox", true);
SetupTagTextBoxPersonalTag("txtPersonalIgnoreTagBox", true);
</script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
And this is the subpage that throws the exceptions :
<head>
<script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
<script type="text/javascript">
//URL for voting
var _postVoteUrl = 'http://localhost:5215/Post/Vote'
//URL for tags
var _tagsUrl = 'http://localhost:5215/Post/Tags'
//Keep track of if a cascading is loading, if so, cancel submits
var cascadingControlLoading = false;
window.latestClick = '';
function IsNotDblClick(objectID) {
if (window.latestClick != objectID &&
!cascadingControlLoading) {
window.latestClick = objectID;
return true;
} else {
return false;
}
}
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
</script>
<script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
<script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>
<script type="text/javascript" src=/Scripts/formhandler.js></script>
<script type="text/javascript" src=/Scripts/taghandler.js></script>
<script src="/Scripts/details.js"></script>
<script src="/Scripts/voteHandler.js"></script>
<script>
$(function () {
//Google +1
$.getScript("http://apis.google.com/js/plusone.js", null, true);
//Twitter
$.getScript("http://platform.twitter.com/widgets.js", null, true);
//Facebook
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
$('body').append('<div id="fb-root"></div>');
FB.init({ status: true, cookie: true, xfbml: true });
}, true);
});
</script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
I hade some of the scripts loaded at the bottom of the body before and this did not generate the exception but from what I read this is not a recomended way to go.
So why is my subpage generating these exceptions?
In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used, i.e.
jQuery(document).ready(function ($) {
By including the $ in parenthesis after the function call you can then use this shortcut within the code block.
Replace your code
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
with this
jQuery(document).ready(function ($) {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
I am getting this error Exception: missing } in XML expression and also when i open my html file in FIREFOX and use Firebug 1.9.2, this error appear:
WL is not defined [Break On This Error]
WL.Event.subscribe("auth.login", onLogin);`
Here is my code:
<html><head>
<title>Greeting the User Test page</title>
<script src="js.live.net/v5.0/wl.js" type="text/javascript"></script>
<script type="text/javascript">
var APPLICATION_CLIENT_ID = "id",
REDIRECT_URL = "url";
WL.Event.subscribe("auth.login", onLogin);
WL.init({
client_id: APPLICATION_CLIENT_ID,
redirect_uri: REDIRECT_URL,
scope: "wl.signin",
response_type: "token"
});
WL.ui({
name: "signin",
element: "signInButton",
brand: "skydrive",
type: "connect"
});
function greetUser(session) {
var strGreeting = "";
WL.api(
{
path: "me",
method: "GET"
},
function (response) {
if (!response.error) {
strGreeting = "Hi, " + response.first_name + "!";
document.getElementById("greeting").innerHTML = strGreeting;
}
});
}
function onLogin() {
var session = WL.getSession();
if (session) {
greetUser(session);
}
}
</script>
</head>
<body>
<p>Connect to display a welcome greeting.</p>
<div id="greeting"></div>
<div id="signInButton"></div>
</body>
</html>
I dont know where is mistake, i just copy this sample code from skydrive api tutorial.
Of course, that I id and url strings replace with strings of my personal app.
Thanks for answers.
You need to include the Javascript file from the Microsoft server:
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
Your first <script> tag should look like:
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
or possibly
<script src="//js.live.net/v5.0/wl.js" type="text/javascript"></script>
if that site is configured properly. Without that, your URL was interpreted as being relative to the URL of your page.