i have made a simple HTML Form. I want to grab some JSON data out of a CouchDB and display it in jqGrid. But all i get is this sh**** Output in Firefox or IE. Output Firefox
It's just one row but i don't know why the list gets so long. I also dont know why some parts are pulled apart (sorry i cant speak good english).
This is how it looks before i start the javascript action and i made a simple red box indicatting where the jqGrid should be: HTML Page before Action
As you can see, my two textboxes get covered by the jqGrid.
I dont know what causes this Problem and i don't have enough Knowledge of all this. Can someone help me ?
Here is my Code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
My Javascript File
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function () {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
And my CSS File:
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your requests and responses.
Also there you can see any errors on the javascript code, check the console output
Related
I am using ajax to post data on nodejs server I am getting response from nodejs and I am able to show them on front end but problem is they are still be there even if form submitted. I want to hide those messages after sometime.I have tried but unable to achieve desired result.
Below is my code:
register.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/register.js"></script>
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top:50px;
}
.form{
margin-top:50px;
margin-left:30%;
margin-right:30%;
}
input{
margin-top:10px;
}
button{
margin-top:20px;
}
#result{
text-align: center;
}
.alert{
margin-top:15px;
text-align: center;
display:none;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input id="name" name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
<input id="mail" name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
<button type="submit" class="btn btn-primary">SUBMIT</button>
<div class="alert alert-danger" role="alert">
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
register.js
$(document).ready(function(){
$('.btn').click(function(e){
e.preventDefault();
ajaxPost(); //Function to post data
});
});
function ajaxPost(){
var formData = {
name: $("#name").val(),
email: $("#mail").val()
}
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:3000/register",
data : JSON.stringify(formData),
dataType : 'json',
success:function(data){
$(".alert").html(data.msg).show();
}
});
}
Someone let me know what I am doing wrong.
Call $(".alert").hide() in a setTimeout, but don't forget to clear the timeout when a new message is shown in .alert
let messageTo;
function showMessage(mess) {
if (messageTo) {
clearTimeout(messageTo);
messageTo = undefined;
}
$(".alert").html(mess).show();
messageTo = setTimeout(() => $(".alert").hide(), 5000);
}
I couldn't understand what message to hide you are talking about.
Assuming you want to hide the alert div,
You may use setTimeOut with a delay.
Your code would be:
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:3000/register",
data : JSON.stringify(formData),
dataType : 'json',
success:function(data){
$(".alert").html(data.msg).show();
// Hide after 1 second
setTimeout(function(){ $(".alert").hide(); }, 1000);
}
});
The error is "POST mywebsite.com/login.php 500 (Internal Server Error)"
Here is my header file which I doubt it may cause the problem but I dont know how to solve and why:
<!DOCTYPE html>
<html>
<head>
<title>Ajanda Uygulaması</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--BOOTSTRAP JAVASCRIPT-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--W3 CSS-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--CUSTOM CSS-->
<link rel="stylesheet" type="text/css" href="styles/style.css">
<!--JQUERY UI-->
<link rel="stylesheet" href="js/jquery-ui/jquery-ui.min.css">
<script src="js/jquery-ui/external/jquery/jquery.js"></script>
<script src="js/jquery-ui/jquery-ui.min.js"></script>
<!--FONTAWESOME ICONS-->
<script src="https://kit.fontawesome.com/e3f3a6e99c.js" crossorigin="anonymous"></script>
When the user click on login, the below script is executed:
$(".choice").click(function(){
var choosen_id=$(this).attr("id");
$(".choice").removeClass("choosen");
$("#" + choosen_id).addClass("choosen");
$("form").hide().promise().then(function() {
$("#" + choosen_id + "-form").show();
});
});
$(".login-button").click(function(e){
e.preventDefault();
var loginType = $(this).attr("id");
if(loginType=="manager_login"){
if($("#manager_password").val()){
var password = $("#manager_password").val();
$.ajax({
type: 'POST',
url: 'login.php',
data: { manager_password: password },
success: function(response) {
if(response==1){
window.location.replace("manager.php");
}else{
$("#error").text(response);
}
}
});
}else{
$("#manager_password").css("outline", "2px solid #1f1a87");
}
}else if(loginType="inst_login"){
if($("#inst_password").val()){
var password = $("#inst_password").val();
$.ajax({
type: 'POST',
url: 'login.php',
data: { inst_password: password },
success: function(response) {
if(response==1){
window.location.replace("instructor.php");
}else{
$("#error").text(response);
}
}
});
}else{
$("#inst_password").css("outline", "2px solid #1f1a87");
}
}
});
And that script posts data to below script.At this point, I get 500 internal server error :
<?php
include 'includes/class-autoload.inc.php';
if(isset($_POST["manager_password"])){
$managersObj = new ManagersContr();
$managersObj->checkManager($_POST["manager_password"]);
}
else if(isset($_POST["inst_password"])){
$instObj = new InstsContr();
$instObj->checkInst($_POST["inst_password"]);
}
Also here is the ManagersContr class codes :
<?php
class ManagersContr extends Managers{
public function checkManager($password){
$results = $this->getManager($password);
if($results){
foreach ($results as $result) {
if($results){
if(isset($_SESSION)){
session_unset();
}
$_SESSION["manager_full_name"]=$result["manager_full_name"];
$_SESSION["manager_id"]=$result["manager_id"];
$_SESSION["permission_level"]=$result["permission_level"];
echo 1;
/*
$_SESSION["full_name"]=$result["full_name"];
$_SESSION["permission_level"]=$result["permission_level"];
$_SESSION["id"]=$result["password"];
//Eğitmen sayfasına yönlendir
if($_SESSION["permission_level"]==3){
header("Location: instructor.php");
}
//2.Seviye yönetici sayfasına yönlendir
else if($_SESSION["permission_level"]==2){
header("Location: moderator.php");
}
//1.Seviye yönetici sayfasına
else if($_SESSION["permission_level"]==1){
header("Location: admin.php");
}
else{
echo "Bir hata oluştu";
}
*/
}
}
}else{
echo "Böyle bir yönetici parolası yok";}
}
}
I am trying to learn making API calls to openweather.org using HTML, CSS and JavaScript. With lot difficulties wrote code but not sure what the mistake I am doing here. I have to get the output in the console of Chrome, but unable to get. Can you guys let me know where I am making mistake? Below is my code. All the 3 files .html, .css and .js are saved in a single directory.
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Weather</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;">
<h2 class="text-center" style="font-size:50px; font-weight:600;"> Get current weather</h2>
</div>
<div class="container">
<div class="row" style="margin-bottom:20px;">
<h3 class="text-center text-primary">Enter City Name</h3>
<span id="error"></span>
</div>
<div class="row form-group form-inline" id="rowDiv">
<input type="text" name="city" id="city" class="form-control" placeholder="City Name">
<button id="submitWeather" class="btn btn-primary">Search City</button>
</div>
<div id="show"> </div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="weatherr.js"></script>
</body>
</html>
style.css file
#rowDiv{
margin:auto;
text-align: center;
width: 100%;
}
input[type="text"]{
height:40px;
font-size:20px;
}
#submitWeather{
height:40px;
font-size:20px;
font-weight: bold;
}
weather.js file
$(document).ready(function(){
$('#submitweather').click(function(){
var city = $("#city").val();
if(city != ''){
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3",
type: "GET",
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
} else {
$("#error").html('field cannot be empty');
}
});
});
success: function(data){
console.log(data);
}
You should put your code to display the data where you want here. The way you put it, it will only show in the console.
I think you meant something along the lines:
$("#show").html(data);
Use the console.log(data) to see what data is returning.
I hope it helps you!
You missed an uppercase letter:
$("#submitWeather").click(...)
not $('#submitweather').click(..)
What you want to do is Display the Data that the Weather API is sending back to you. Now let's look at what the data looks like:
Wether for NY
This is the current weather forecast for New York.
You see that the Information you want is in the weather Array.
To access that you need to change your Javascript.
$(document).ready(function(){
$('#submitWeather').click(function(){
var city = $("#city").val();
if(city != ''){
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3",
type: "GET",
dataType: "jsonp",
success: function(data){
// you gave the DIV that you want to display the weather information in "show", so that's where this is going:
var html = "<h2>"+data.name+"</h2><br>";
data.weather.forEach(function(city) {
html += "\n"+"<p><img src='http://openweathermap.org/img/w/"+city.icon+".png'>"+city.description+"</p>";
});
$("#show").html(html);
}
});
} else {
$("#error").html('field cannot be empty');
}
});
});
You can do a lot more with the Data, but with this, it is working like a charm.
$(document).ready(function() {
$('#submitWeather').click(function() {
var city = $("#city").val();
if (city != '') {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3",
type: "GET",
dataType: "jsonp",
success: function(data) {
// you gave the DIV that you want to display the weather information in "show", so that's where this is going:
var html = "<h2>" + data.name + "</h2><br>";
data.weather.forEach(function(city) {
html += "\n" + "<p><img src='http://openweathermap.org/img/w/" + city.icon + ".png'>" + city.description + "</p>"
});
$("#show").html(html);
}
});
} else {
$("#error").html('field cannot be empty');
}
});
});
#rowDiv {
margin: auto;
text-align: center;
width: 100%;
}
input[type="text"] {
height: 40px;
font-size: 20px;
}
#submitWeather {
height: 40px;
font-size: 20px;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;">
<h2 class="text-center" style="font-size:50px; font-weight:600;"> Get current weather</h2>
</div>
<div class="container">
<div class="row" style="margin-bottom:20px;">
<h3 class="text-center text-primary">Enter City Name</h3>
<span id="error"></span>
</div>
<div class="row form-group form-inline" id="rowDiv">
<input type="text" name="city" id="city" class="form-control" placeholder="City Name">
<button id="submitWeather" class="btn btn-primary">Search City</button>
</div>
<div id="show"> </div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="weather.js"></script>
</body>
</html>
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
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>