Here's the code from https://www.w3schools.com/HOWTO/tryit.asp?filename=tryhow_google_translate
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
But the situation I have is, that user enters text in a textbox in English, hit 'Translate' button and the other text box get translated text in Spanish.
I tried replacing 'google_translate_element' to 'es' or 'Spanish' but did not work.
Any suggestions?
Found solution from google support, so sharing for someone who might need it. You may use includedLanguages and list comma separated languages which you want to display in dropdown :
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
I'm new to Reactjs. I'm not using currently any transpiler like Babel nor I'm using a build system like Webpack. I'm on Visual Studio and using Web Compiler extension to compile JSX into JS. Here is my code at the _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/css/site.min.css" rel="stylesheet" />
</head>
<body>
<div id="root">
#RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/react/react.js"></script>
<script src="~/lib/react/react-dom.js"></script>
<script src="~/js/jsx.min.js"></script> <!--Here is my react compiled JSX file-->
</body>
And in this file, I'm using 2 components:
var MainComponent = React.createClass({
render: function () {
return <div id="Mainaccordion" className="panel-group" role="tablist" aria-multiselectable="true">
<Level1Component title=".NET Core" parentAccordion="Mainaccordion" collapseTarget="dotnet" heading="dotnet">
...............
...............
...............
</div>;
}
});
var AccordionComponent = React.createClass({
render: function () {
return <div><h2>Hello</h2></div>
}
});
ReactDOM.render(<MainComponent />, document.getElementById('accordionexample'));
I've 2 pages, one is Index.cshtml where I'm displaying <MainComponent /> and another page Try.cshtml where I want to use <AccordionComponent />. But when I try to navigate to Try.cshtml, I get the error target container is not a dom element in the browser???
Where I'm doing something wrong? Should I use React Router? Any help will be appreciated.
You should have an element with id='accordionexample' in all the HTML pages where the React component is loaded. e.g. <div id="accordionexample"></div>.
I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please
Creating a simple KendoUI drop down list using AngularJS. Not seeing the drop down with the correct styling.
Here's the html...
<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>
The js file:
(function () {
'use strict';
angular.module('app')
.controller('welcome3',
[welcome3]);
function welcome3() {
var vm = this;
vm.activate = activate;
activate();
function activate() {
vm.phoneOptions = {
dataSource: {
data: [
{name: "iPhone"},
{name: "Droid"},
{name: "Windows"}
]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select a phone..."
};
}
}
})();
Inside the index.js file I have (among other things) the following:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
// ...
<div ng-view></div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>
The drop down looks like this:
As opposed to this:
Thanks!!
Usually when you have an unstyled control like that, it's because you have a wrong stylesheet link. It looks like the common file is linked right, but check the other. Also, when using Bootstrap, make sure to use the common-bootstrap CSS file.
http://trykendoui.telerik.com/#burkeholland/UXav
I using file *.ashx to get data from database. When I alert jsondata.responseText , it show json string
Respond text is:
{
"total":2,
"page":5,
"record":10,
"row":[
{"i":0, "cell""["1","Desktop","Desktop Description","200"]},
{"i":1, "cell""["2","Laptop","Laptop Description","1000"]},
{"i":2, "cell""["2","DVD","DVD Description","100"]},
{"i":3, "cell":["","","",""]}
]
}
But jqgrid not show data.
Please review my code and help me please !
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample_Json_Jqgrid._Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<%--<link rel="stylesheet" type="text/css" href="Resources/themes/coffee/grid.css" title="steel" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="Resources/themes/jqModal.css" />--%>
<link href="Resources/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/themes/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />
<script src="Resources/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Resources/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="Resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Resources/src/grid.base.js" type="text/javascript"></script>
<script src="Resources/src/ui.multiselect.js" type="text/javascript"></script>
<script src="Resources/src/grid.celledit.js" type="text/javascript"></script>
<script src="Resources/src/grid.common.js" type="text/javascript"></script>
<script src="Resources/src/grid.custom.js" type="text/javascript"></script>
<script src="Resources/src/grid.formedit.js" type="text/javascript"></script>
<script src="Resources/src/grid.grouping.js" type="text/javascript"></script>
<script src="Resources/src/grid.import.js" type="text/javascript"></script>
<script src="Resources/src/grid.inlinedit.js" type="text/javascript"></script>
<script src="Resources/src/grid.jqueryui.js" type="text/javascript"></script>
<script src="Resources/src/grid.loader.js" type="text/javascript"></script>
<script src="Resources/src/grid.postext.js" type="text/javascript"></script>
<script src="Resources/src/grid.setcolumns.js" type="text/javascript"></script>
<script src="Resources/src/grid.subgrid.js" type="text/javascript"></script>
<script src="Resources/src/grid.tbltogrid.js" type="text/javascript"></script>
<script src="Resources/src/grid.treegrid.js" type="text/javascript"></script>
<script src="Resources/src/jqDnR.js" type="text/javascript"></script>
<script src="Resources/src/jqModal.js" type="text/javascript"></script>
<script src="Resources/src/jquery.fmatter.js" type="text/javascript"></script>
<script src="Resources/src/jquery.searchFilter.js" type="text/javascript"></script>
<script src="Resources/src/JsonXml.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="grid" cellpadding="0" cellspacing="0">
</table>
<div id="pager" style="text-align: center;">
</div>
</div>
<script src="Resources/js/app.grid.js" type="text/javascript"></script>
</form>
</body>
</html>
File javascript to jqgrid : app.grid.js
var mydata ;
function CreateGrid()
{
jQuery("#grid").jqGrid({
datatype: "local",
colNames:['ProductId','ProductName','Description','Price'],
colModel:[
{name:'ProductId',index:'ProductId',sorttype:"text",hidden:false},
{name:'ProductName',index:'ProductName',sorttype:"text",resizable:false,
width:100,sortable:true,align:'left',editable:true},
{name:'Description',index:'Description',sorttype:"text",resizable:false,
width:1000,sortable:true,align:'left',editable:true},
{name:'Price',index:'designation',sorttype:"int",resizable:false,
width:100,sortable:true,align:'left',editable:true}
],
rowNum: 1,
rowList: [5, 10, 15],
pager: jQuery('#pager'),
imgpath: 'themes/redmond/images',
sortname: 'ProductId',
viewrecords: true,
sortorder: "desc",
caption: 'Products'
}).jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
BinDataGrid();
}
function BinDataGrid()
{
$("#grid").clearGridData();
jQuery(function($) {
$.ajax({
type: "'POST'",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "GetDataHandler.ashx",
data: "{}",
complete: function(jsondata, stat)
{
window.alert("Status received is " + stat);
window.alert("Response text is: " + jsondata.responseText);
if (stat == "success")
{
var thegrid = jQuery("#grid")[0];
thegrid.addJSONData(eval("(" + jsondata.responseText + ")"));
}
}
});
})
}
jQuery(document).ready(function() {
CreateGrid();
});
Please help me
Best regard
Your responce text is wrong:
"cell""["1","Desktop","Desktop Description","200"]
this should be (note the : instead of " after the "cell" declaration):
"cell":["1","Desktop","Desktop Description","200"]
.. as the blank row you enter last, it is correct:
"cell":["","","",""]
also avoid using " in values, you should replace them with somethign other because some browsera cannot handle " escaping ... IE 6 ... :))
Sorry but your code have so many errors, that it is difficult to describe all together. The first error in the JSON data with the quote (") instead of :. The data after the modification will be
{
"total": 2,
"page": 5,
"record": 10,
"row": [
{"i": 0,"cell": ["1","Desktop","Desktop Description","200"]},
{"i": 1,"cell": ["2","Laptop","Laptop Description","1000"]},
{"i": 2,"cell": ["2","DVD","DVD Description","100"]},
{"i": 3,"cell": ["","","",""]}
]
}
where you have data like "i": 2 instead of "id": 2.
In the list of JavaScript files included in the <head> element you have full chaos. You included jqGrid more as once JavaScript files in compressed and uncompressed form. Moreover you used wrong order of files: you must include jquery-1.4.2.min.js before jquery-ui-1.8.5.custom.min.js which use it and include grid.locale-en.j before jquery.jqGrid.min.js. The file grid.loader.js by the way include all developer version of the files one more time. Moreover you should include in the head the meta element like <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (see example).
You should read the How to Install part of the documentation, decide which version of jqGrid (compressed or developer version) you want to use and include it.
UPDATED: I could continue with the list of errors. The main JavaScript file app.grid.js is written also very dirty. It contain clear errors like type: "'POST'" instead of type: 'POST' or type: "POST", use eval function instead of JSON.parse and so on.
The usage of ashx to provide the data I find also not the best idea. Much better can be used ASMX web service, svc WCF service or ASP.NET MVC application with controller returns JSON data. Look at my old answer where you will find some links to examples to working code.
The usage of both jQuery(function($) {/**/} and jQuery(document).ready(function() {/**/}); in the same code is also not good.
I recommend you to verify the JSON data in http://www.jsonlint.com/ and verify your JavaScript code in http://www.jslint.com/.