I'm having problems correctly displaying my dojox DialogWidget content.
I've created two toolbars and a ContentPane. The idea is to fix one toolbar on the top width fixed size, the other toolbar on the bottom and the ContentPane in the center. In my case I only see the top toolbar and the ContentPane which streches over the remaing space so the bottom toolbar is not seen. The content also displays different in different browsers. I am popping my code below.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main-demo.css" media="screen" />
<link rel="stylesheet" href="medview.css" media="screen" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Dialog/Dialog.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="async:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.VerticalSlider");
dojo.require("dijit.form.VerticalRuleLabels");
dojo.require("dijit.form.VerticalRule");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.widget.Dialog"
);
dialog = null;
dojo.addOnLoad(function()
{
container = dojo.create("div", {
class : "test",
id : "viewer"
}, dojo.body());
console.debug("Container ID: " + container);
var appLayout = new dijit.layout.BorderContainer({
design : "headline",
style:'width:100%;height:100%',
}, container.id);
content = new dijit.layout.ContentPane({
region:"center",
title : "Viewports",
class : "dhMedViewViewport"
});
appLayout.addChild(content);
viewportContainer = content.domNode;
var imgToolbar_zgoraj = new dijit.Toolbar({
region:"top",
}, "dhmv-toolbar");
imgToolbar_zgoraj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
var imgToolbar_spodaj = new dijit.Toolbar({
region:"bottom",
}, "dhmv-toolbar");
imgToolbar_spodaj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
appLayout.addChild(imgToolbar_zgoraj);
appLayout.addChild(imgToolbar_spodaj);
appLayout.startup();
dialog = new dojox.widget.Dialog({
sizeToViewport: true,
content : container
});
});
function showDialogTwo() {
dialog.startup();
dialog.show();
}
</script>
</head>
<body class="claro">
<p>
Test dialogBox
</p>
<button id="buttonTwo" dojoType="dijit.form.Button" type="button">
Show me!
<script type="dojo/method" event="onClick" args="evt">
showDialogTwo();
</script>
</button>
</body>
Related
I am trying to add content to my popup in my web mapping application, but no content will appear in the popup when it is clicked. Perhaps something wrong with my JSAny help would be fantastic!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Pop-ups | CARTO</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
<script src="https://libs.cartocdn.com/carto.js/v4.1.11/carto.min.js"></script>
<link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Pop-Ups</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Create pop-up information windows and interact with your map.</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = L.map('map').setView([30, 0], 3);
map.scrollWheelZoom.disable();
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
const client = new carto.Client({
apiKey: 'default_public',
username: 'cartojs-test'
});
const populatedPlacesSource = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const populatedPlacesStyle = new carto.style.CartoCSS(`
#layer {
marker-width: 7;
marker-fill: #EE4D5A;
marker-line-color: #FFFFFF;
}
`);
const populatedPlacesLayer = new carto.layer.Layer(populatedPlacesSource, populatedPlacesStyle, {
featureOverColumns: ['name', 'pop_max', 'pop_min']
});
client.addLayer(populatedPlacesLayer);
client.getLeafletLayer().addTo(map);
const popup = L.popup({ closeButton: false });
function openPopup(featureEvent) {
const data = featureEvent.data;
let content = '<div class="widget">';
// My popup up content
content += `<h3> ${data.name} </h3>`;
content += `<p>Between ${data.pop_min} and ${data.pop_max} inhabitants </p>`;
content += `</div>`;
popup.setLatLng(featureEvent.latLng);
if (!popup.isOpen()) {
popup.openOn(map);
}
}
function closePopup(featureEvent) {
popup.removeFrom(map);
}
populatedPlacesLayer.on('featureClicked', openPopup);
</script>
</body>
</html>
And here are the results in the Web Viewer. Note that I am not getting any errors thrown in the Console (image attached to this ticket)
I was expecting the content associated the dataset to appear in the popup ui
enter image description here
You are missing one line of code. The line that set the actual popupContent. After popup.setLatLng(featureEvent.latLng);
include: popup.setContent(content);
<!DOCTYPE html>
<html>
<head>
<title>Pop-ups | CARTO</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
<script src="https://libs.cartocdn.com/carto.js/v4.1.11/carto.min.js"></script>
<link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Pop-Ups</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Create pop-up information windows and interact with your map.</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = L.map('map').setView([30, 0], 3);
map.scrollWheelZoom.disable();
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
const client = new carto.Client({
apiKey: 'default_public',
username: 'cartojs-test'
});
const populatedPlacesSource = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const populatedPlacesStyle = new carto.style.CartoCSS(`
#layer {
marker-width: 7;
marker-fill: #EE4D5A;
marker-line-color: #FFFFFF;
}
`);
const populatedPlacesLayer = new carto.layer.Layer(populatedPlacesSource, populatedPlacesStyle, {
featureOverColumns: ['name', 'pop_max', 'pop_min']
});
client.addLayer(populatedPlacesLayer);
client.getLeafletLayer().addTo(map);
const popup = L.popup({
closeButton: false
});
function openPopup(featureEvent) {
const data = featureEvent.data;
let content = '<div class="widget">';
// My popup up content
content += `<h3> ${data.name} </h3>`;
content += `<p>Between ${data.pop_min} and ${data.pop_max} inhabitants </p>`;
content += `</div>`;
popup.setLatLng(featureEvent.latLng);
popup.setContent(content);
if (!popup.isOpen()) {
popup.openOn(map);
}
}
function closePopup(featureEvent) {
popup.removeFrom(map);
}
populatedPlacesLayer.on('featureClicked', openPopup);
</script>
</body>
</html>
I am trying to implement Looper theme to my blazor server-side app, and I have the javascript libraries referenced at the end of the in _Host.cshtml.However some scripts in theme.min.js is not running. Why?
<script src="/Library/vendor/jquery/jquery.min.js"></script>
<script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Library/vendor/pace-progress/pace.min.js"></script>
<script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Library/javascript/theme.min.js"></script>
<script src="_framework/blazor.server.js"></script>
My problem is that while
<div data-toggle="drowndown"></div> works, but hamburger menu toggle
<button class="hamburger hamburger-squeeze mr-2" type="button" data-toggle="aside-menu" aria-label="toggle aside menu"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button>
does not work. What am I missing here? What am I doing wrong? My theme change script also isn't running. If I step through theme.js and I can see that this script runs when blazor is not active (commenting out blazor.js) but with blazor active, this script does not run.
(line 610) in /library/javascript/theme.js
}, {
key: "toggleAside",
value: function toggleAside() {
var _this4 = this;
var $trigger = $('[data-toggle="aside"]');
$trigger.on('click', function () {
var isShown = $('.app-aside').hasClass('show');
$trigger.toggleClass('active', !isShown);
if (isShown) _this4.hideAside();else _this4.showAside();
});
}
My educated guess is that theme.js is using something that blazor does not allow? Is anybody experienced enough with Looper theme (or with javascript in general) to know why it wouldn't work? Particularly the hamburger toggle and the theme switching code
(line 1992 in /library/javascript/theme.js)
var Looper = function () {
var Looper = new Theme(); // toggle skin thought button
$('[data-toggle="skin"]').on('click', function (e) {
e.preventDefault();
var skin = Looper.skin === 'dark' ? 'default' : 'dark';
Looper.setSkin(skin); // we need to refresh our page after change the skin
location.reload();
}).each(function () {
var isDarkSkin = Looper.skin === 'dark';
var $icon = $(this).find('.fa-moon');
if (isDarkSkin) {
$icon.addClass('far');
$icon.removeClass('fas');
}
}); // make it global
return Looper;
}();
This is the website https://worshipground.azurewebsites.net/ You can use the inspector tool to see that blazor has been correctly loaded and all the javascript files are loaded in /library/javascript and /library/vendor/...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- End Required meta tags -->
<title> Starter Template | Looper - Bootstrap 4 Admin Theme </title>
<base href="~/" />
<meta name="theme-color" content="#3063A0">
<link rel="apple-touch-icon" sizes="144x144" href="Library/apple-touch-icon.png">
<link rel="shortcut icon" href="Library/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="/Library/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="/Library/vendor/fontawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/Library/stylesheets/theme.min.css" data-skin="default">
<link rel="stylesheet" href="/Library/stylesheets/theme-dark.min.css" data-skin="dark">
<link rel="stylesheet" href="/Library/stylesheets/custom-app.css">
<link rel="stylesheet" href="/Library/stylesheets/custom.css" data-skin="default">
<link rel="stylesheet" href="/Library/stylesheets/custom-dark.css" data-skin="dark">
<script>
var skin = localStorage.getItem('skin') || 'default';
var isCompact = JSON.parse(localStorage.getItem('hasCompactMenu'));
var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="' + skin + '"])');
// Disable unused skin immediately
disabledSkinStylesheet.setAttribute('rel', '');
disabledSkinStylesheet.setAttribute('disabled', true);
// add flag class to html immediately
if (isCompact == true) document.querySelector('html').classList.add('preparing-compact-menu');
</script>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="/Library/vendor/jquery/jquery.min.js"></script>
<script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Library/vendor/pace-progress/pace.min.js"></script>
<script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Library/javascript/theme.min.js"></script>
<script>
Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
You may find you have your work cut out in terms of making a JavaScript heavy template work nicely in Blazor.
You will probably need to utilise IJSRuntime
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
I think I know where this problem comes from! If you comment out the following code on the "Host.cshtml" file, this problem will most likely go away!
<script>
Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>
But!!!! You will get some javascript errors related to "WebSocket" instead! something like this:
"WebSocket is not in the OPEN state"
Or
"Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State."
The cause of these errors is a conflict between "pace.min.js" file and "blazor.server.js" file! You can check this link for more information and get more help
HTML:
<button type="button" class="btn btn-success" style="margin-bottom:14px" id="btnAdd" onclick="modaladdedit('URLToMyController')"><i class="fa fa-plus"> Add New</i></button>
HEAD Tag:
<link rel="stylesheet" href="/Content/themes/base/jquery-ui.min.css" />
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="/Content/bootstrap.min.css">
<link rel="stylesheet" href="/Content/font-awesome.min.css">
<link rel="stylesheet" href="/Content/ionicons.min.css">
<link rel="stylesheet" href="/admin-lte/css/AdminLTE.min.css">
<link rel="stylesheet" href="/admin-lte/css/skins/skin-black-light.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link href="/Content/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/Content/datatablefooteredit.css" rel="stylesheet"/>
<script src="/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="/Scripts/jquery.dataTables.min.js"></script>
<script src="/Scripts/dataTables.bootstrap.min.js"></script>
After </body>:
<script src="/Scripts/jquery.slimscroll.min.js"></script>
<script src="/Scripts/fastclick.js"></script>
<script src="/admin-lte/js/adminlte.min.js"></script>
<script src="/admin-lte/js/demo.js"></script>
Scripts after </body>:
$(document).ready(function () {
$('.sidebar-menu').tree()
});
var Popup, table;
$(document).ready(function () {
// Some code here...
});
// Popup Modal Window
function modaladdedit(url){
var formDiv= $('</div>');
$.get(url)
.done(function(response){
formDiv.html(response);
Popup= formDiv.dialog({
autoOpen: true,
resizable: false,
position: 'center',
modal: true,
title: 'Add/Edit Email Data',
height: 500,
width: 600,
close: function (){
Popup.dialog('destroy').remove();
}
});
});
When I click on the button, the dialog window does not popup and I dont get any errors in the console.
I tried everything and nothing worked. I tried changing the order of the css and js file but nothing worked really.
Any help will be much appreciated.
Thank you!
Does this even create a <div>?
$('</div>')
I'm not sure if it self-corrects for you, but the / should be at the end:
$('<div/>')
Additionally, even when you create your formDiv you never append it to the DOM. Probably the ideal place to do that would be in the AJAX callback. Something like this:
formDiv.html(response);
$('body').append(formDiv);
You can append it anywhere you like really, I'm just using the <body> element as an example.
I'm trying to change the place of the (next,prev today) buttons of fullcalendar to a specific selector. Is this possible or not?
I had tried to use javascript append to selector but the actions of buttons stopped working.
This is my html code:
<div id="header"></div>
<div class="panel panel-default booking-panel">
<div class="panel-heading " style="text-align: center;">
<span class="left" style="float:left; text-transform: uppercase; font-weight: bold;">test </span>
<span id="title" style=" text-transform: uppercase; font-weight: bold;"> Employee </span>
</div>
<div id="calendar"></div>
</div>
I need the three buttons to be placed in .left selector as it's shown in this picture>>
UPDATE
test.php
require_once 'calendar/config.php';
require_once 'calendar/functions.php';
$events = get_events();
$events = get_json($events);
if(!empty($_POST['clickDate'])){
print_r($_POST);
die;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First</title>
<link href="datatable/css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/style.css" type="text/css">
<!-- Portrait phones and smaller -->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style/1_portrait_phones_and_smaller-style.css" />
<!-- Landscape phones and portrait tablets -->
<link rel="stylesheet" media="screen and (max-width: 767px)" href="style/2_landscape_phones_and_portrait-style.css" />
<!-- Portrait tablets and small desktops -->
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 991px)" href="style/3_portrait_tablets_and_small_desktops-style.css" />
<!-- Landscape tablets and medium desktops -->
<link rel="stylesheet" media="screen and (min-width: 992px) and (max-width: 1199px)" href="style/4_landscape_tablets_and_medium_desktops-style.css" />
<!-- Large desktops and laptops -->
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="style/5_large_desktops_and_laptops-style.css" />
<!-- Calendar -->
<link href="calendar/DateTimePicker/dist/DateTimePicker.css" rel="stylesheet">
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="calendar/bootstrap/css/bootstrap.min.css">-->
<link rel="stylesheet" href="calendar/css/jquery-ui.css">
<link rel="stylesheet" href="calendar/fc/fullcalendar.css">
<link rel="stylesheet" href="calendar/fc/fullcalendar.print.css" media="print">
<link rel="stylesheet" href="calendar/css/style.css">
<script src="calendar/js/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#header").load("include/header.php");
$("#next").click(function() {
$('#calendar').fullCalendar("next");
});
$("#prev").click(function() {
$('#calendar').fullCalendar("prev");
});
$("#today").click(function() {
$('#calendar').fullCalendar("today");
});
});
</script>
<div id="header"></div>
<button type="button" id="prev">
<
</button>
<button type="button" id="next">
>
</button>
<button type="button" id="today">
Today
</button>
<div id="calendar"></div>
<script>var events = <?php echo $events ?>;</script>
<script src="calendar/fc/lib/moment.min.js"></script>
<script src="calendar/fc/fullcalendar.js"></script>
<!--<script src="fc/lang.ar.js"></script>-->
<script src="calendar/js/main.js"></script>
</body>
main.js
$(document).ready(function() {
$("#calendar").fullCalendar({
eventClick: function( event, jsEvent, view ) {
$(this).css('background-color', 'red');
},
dayClick: function(date, jsEvent, view) {
//var clickDate = date.format();
//$('#start').val(clickDate);
//$('#dialog').dialog('open');
// change the day's background color just for fun
$(this).css('background-color', 'red');
/*$.ajax({
url: 'index.php',
type: 'POST',
data: {clickDate: clickDate},
success: function(res){
console.log(res);
},
error: function(){
alert("ERROR!");
}
});*/
},
header: {
left: 'prev,next today',
right: 'month,agendaWeek,agendaDay,listDay'
},
viewRender: function(view) {
var title = view.title;
$("#externalTitle").html(title);
},
slotDuration : '00:05:00',
//editable: true, //Drag and Drop
theme: true,
eventSources: [
{
events : events,
color : '#0EB6A2',
textColor: '#fff'
}
],
//monthNames: ['كانون الثاني', 'شباط'],
//monthNamesShort: ['Ùƒ Ø«', 'Ø´'],
//dayNames: ['سبت', 'Ø£Øد'],
//dayNamesShort: ['س', 'أ'],
/*events: [
{
title: "Event 1",
start: "2017-11-19"
},
{
title: "Event 2",
start: "2017-11-24"
},
{
title: "Event 3",
start: "2017-12-19"
},
],*/
/*eventSources: [
'file.json'
]*/
});
$('#dialog').dialog({
autoOpen: false,
show: {
effect: 'drop',
duration: 500
},
hide: {
effect: 'clip',
duration: 500
}
});
$('#open').click(function(){
$('#dialog').dialog('open');
});
});
You can't move the standard buttons to another place in the page, as far as I know.
But instead you could:
1) Hide the standard buttons by setting the "header" option such that they are not shown, e.g:
header: {
left: '', //note no "buttons
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
See https://fullcalendar.io/docs/display/header/
2) Make your own buttons which just call fullCalendar's "next", "previous" and "today" methods when clicked, e.g.:
<button type="button" id="prev">
<
</button>
<button type="button" id="next">
>
</button>
<button type="button" id="today">
Today
</button>
$("#next").click(function() {
$("#calendar").fullCalendar("next");
});
$("#prev").click(function() {
$("#calendar").fullCalendar("prev");
});
$("#today").click(function() {
$("#calendar").fullCalendar("today");
});
See https://fullcalendar.io/docs/current_date/next/ , https://fullcalendar.io/docs/current_date/prev/ and https://fullcalendar.io/docs/current_date/today/
You can place these buttons wherever you like in your page.
See http://jsfiddle.net/z8Lpvmyj/1/ for a working demonstration.
I'm using mottie virtual keyboard and it's working well.
I created a custom button for language switcher between Arabic and English language, by default it's showing English as a default language.
When this button is clicked it's switching language correctly but not change display name of langSwitcher key.
$("#searchInput").keyboard({
language: 'en',// default language
keyBinding: 'mousedown touchstart',
layout: 'qwerty',
caretToEnd: true,
autoAccept: true,
usePreview: false,
appendLocally: true,
autoAcceptOnValid: true,
display: {
langSwitcher: 'English',
},
container: {theme: 'b', cssClass: 'ui-body'},
});
$.keyboard.keyaction.langSwitcher = function (keyboard) {
if (keyboard.options.language == 'en') {
keyboard.options.display.langSwitcher = "English";
keyboard.options.layout = 'ms-Arabic (102)';
keyboard.options.language = 'ar';
} else {
keyboard.options.display.langSwitcher = 'عربي';
keyboard.options.layout = 'qwerty';
keyboard.options.language = 'en';
}
console.log(keyboard.options.display.langSwitcher);
keyboard.redraw();
};
<link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- keyboard widget css & script (required) -->
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
Search : <input type='text' name='q' id='searchInput' />
I tried to print the display name in console when language changing.
it's changed to the new language and new name but not appear on button text.
How to solve this issue?
If I'm right you have to describe localization to your button:
$(document).ready(function() {
$("#searchInput").keyboard({
language: 'en',// default language
keyBinding: 'mousedown touchstart',
layout: 'qwerty',
caretToEnd: true,
autoAccept: true,
usePreview: false,
appendLocally: true,
autoAcceptOnValid: true,
container: {theme: 'b', cssClass: 'ui-body'},
});
// important part is here!
$.keyboard.language = {
ar: {
display: {
langSwitcher: 'English'
}
},
en: {
display: {
langSwitcher: 'عربي'
}
}
};
$.keyboard.keyaction.langSwitcher = function (keyboard) {
if (keyboard.options.language == 'en') {
keyboard.options.layout = 'ms-Arabic (102)';
keyboard.options.language = 'ar';
} else {
keyboard.options.layout = 'qwerty';
keyboard.options.language = 'en';
}
console.log(keyboard.options.display.langSwitcher);
keyboard.redraw();
};
});
<!DOCTYPE html>
<html>
<head>
<link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- keyboard widget css & script (required) -->
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
</head>
<body>
Search : <input type='text' name='q' id='searchInput' />
</body>
</html>
Sample from documentation
JSBin