How i can set the charset on Jquery Chosen? - character-encoding

On this part of code of the Chosen component (http://harvesthq.github.io/chosen/), i translated to portuguese, and have this characters "ç" and "ã".
AbstractChosen.default_multiple_text = "Selecione algumas opções";
AbstractChosen.default_single_text = "Selecione uma opção";
AbstractChosen.default_no_result_text = "Desculpe, mas nem uma opção foi encontrada os termos digitados.";
The browser are rendering a "?"
I tried to use the html codes for this characters, but don't work.


You can try to import chosen.js file adding charset tag like below;
<script type="text/javascript"
src="http://harvesthq.github.io/chosen/chosen.jquery.js"
charset="utf-8">
</script>


I just put this to work:
<script>
$(document).ready(function () {
$(document).tooltip();
$(".chosen-select").chosen({
allow_single_deselect: true,
disable_search_threshold: 10,
no_results_text: 'Nada encontrado!',
placeholder_text_single: 'Selecione uma opção',
placeholder_text_multiple: 'Selecione as opções',
width: "200px"
});
$('.chosen-results').css({ "max-height": "100px" });
});
</script>

Related

Select2 language not changed

I use the following code to change select2 language, but its not working and load default language
<script src="js/select2.min.js"></script>
<script src="js/fa.js"></script>
and
<script>
$(document).ready(function() {
$('.select').select2({
dir: "rtl",
language: "fa",
placeholder: "any text"
});
});
</script>

add selected item in kendo Multiselect after load

Here is the reference
Example of Server filtering in Kendo UI MultiSelect widget
Now the thing is, I want to add selected item after it's being loaded. Since the data source is remote (acts like autocomplete), I can't attach it directly
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/multiselect/serverfiltering">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" >
<div class="demo-section k-header">
<h4>Products</h4>
<select id="products"></select>
</div>
<script>
$(document).ready(function() {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "airline_name",
dataValueField: "airline_value",
autoBind: false,
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/**Server url **/",
}
}
}
});
intially dataSource is empty ...Multiselect is loaded
when is execute following code:
$("#products").data("kendoMultiSelect").value([{airline_name:"AA", airline_value:"BB"}]);
//above statemnt doesnt display in selected value but shows value when called value() function
});
</body>
</html>
THE URL gets JSON Array and it works like when I enter letter that is sent to controller and controller send requested matched values in JSON array.
Now I cannot use below statement to add selected items:
$("#products").data("kendoMultiSelect").values(json_array) //doesnt work
THERE IS NO DATASOURCE AT MULTISELECT LOAD . IN My case VALUES ARE NOT LOADED ALREADY . The above is just an example

In the following code snippet you can see your example working. It is basically your code with button that selects two of the elements of the DataSource.
What you should do is define json_array as an array of the ids (in your case ProductID) if you want to select them using the text field (Chai, Aniseed Syrup..., then you should define in kendoMultiSelect that the dataValueField is ProductName and not ProductId.
$(document).ready(function() {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
}
});
$("#sel").on("click", function() {
$("#products").data("kendoMultiSelect").value([3, 1]);
});
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
<button id="sel" class="k-button">Select Chai & Aniseed</button>
<h4>Products</h4>
<select id="products"></select>

scrolling up and down slowly with JQuery

I have this code for scrolling up and down in Html :
<div id="Response" class="comment"></div>
<br>
<br>
<br>
<br>
<div class="but4 , text15"><a id="Resp" href="#rp">Answer</a></div>
and this code in Jquery :
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$("#Resp").click(function () {
$("html").animate({ scrollTop: $("#Response").offset().top }, 1200);
});
</script>
but it's not working .. how can I fix this ? I want when I click on answer it scroll to up and go to Response div .

I'd suggest using the ScrollTo plugin instead of rolling your own solution: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Demo is here: http://demos.flesler.com/jquery/scrollTo/
You can easily specify duration: http://demos.flesler.com/jquery/scrollTo/
EDIT
The solution we came up with in chat is this (not includingscript tags):
$(function () {
$("#Resp").click(function () {
$("body").scrollTo($("#Response"), 1200);
});
});

This depends on the browser implementation, but you can get it to work in webkit (safari, chrome) and firefox with
$('html, body').animate({ scrollTop: $("#Response").offset().top }, 1200);

jqGrid: No such method: restoreRow

I am having an issue working with jaGrid and ASP.NET MVC 2. Everything is working, but when I select a row I get this error on FireBug: uncaught exception: jqGrid - No such method: restoreRow.
Debugin Js I realize that error happend here:
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
I think, the problem is the jqGrid libraries include (or the include order). This is my Index.aspx page.
<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<%--jQuery Library--%>
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>
<%--Must load language tag BEFORE script tag--%>
<script type="text/javascript" src="../../Scripts/grid.locale-es.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../Scripts/grid.jqueryui.js"></script>
<script type="text/javascript" src="../../Scripts/grid.base.js"></script>
<script type="text/javascript" src="../../Scripts/grid.common.js"></script>
<script type="text/javascript" src="../../Scripts/grid.formedit.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.fmatter.js"></script>
<script type="text/javascript" src="../../Scripts/grid.custom.js"></script>
<script type="text/javascript" src="../../Scripts/jqDnR.js"></script>
<script type="text/javascript" src="../../Scripts/jqModal.js"></script>
<script type="text/javascript" src="../../Scripts/grid.import.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<table id="tableAccidentes" border=0>
<tr>
<td><img alt="" src="../../images/icono_victima.png" /></td>
<td><h2>Accidentes Registrados</h2></td>
</tr>
</table>
<script type="text/javascript">
var lastsel;
var Plantas = ['Pablo Podesta', 'Pilar', 'Tigre', 'Otra'];
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Accidentes/ListarAccidentes',
datatype: "json",
colNames: ['Fecha', 'Detalle', 'Accidentado', 'Planta'],
colModel: [
{ name:'Fecha', index:'Fecha', width:150, align:'left',
editable:true },
{ name:'Detalle', index:'Detalle', width:150, align:'left',
editable:true },
{ name:'Accidentado', index:'Accidentado', width:200,
align:'left', editable:true },
{ name:'planta', index:'planta', width:150, align:'left',
editable:true, edittype:"select",
editoptions: { value:Plantas} }
],
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "/Accidentes/GridSave",
edit: {
addCaption: "Agregar Accidente",
editCaption: "Editar Accidente",
bSubmit: "Guardar",
bCancel: "Cancelar",
bClose: "Cerrar",
saveData: "Se modifico el registro! ¿guardar los cambios?",
bYes: "Si",
bNo: "No",
bExit: "Cancelar"
},
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Accidente'
}).navGrid('#pager', { edit: true, add: true, search: false, del: false },
{ closeAfterAdd: true, closeAfterEdit: true });
// add custom button to export the data to excel
jQuery("#list").jqGrid('navButtonAdd','#pager',{
caption:"",
onClickButton : function () {
jQuery("#list").jqGrid('excelExport',
{ url: '/Accidentes/ExportarAccidentes' });
}
});
});
</script>
<%-- HTML Required--%>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
Please, can someone help me?

The restoreRow and editRow methods, which you use, are defined in the grid.inlinedit.js file and are the part of the inline editing module (see more in the jqGrid documentation). Moreover you should remove the file jquery.jqGrid.min.js to avoid having definitions of the same functions twice. Because the method restoreRow was not defined in the jquery.jqGrid.min.js which you use you use probably wrong downloaded jqGrid version. You should download the jqGrid one more time and be sure that you check "Inline Editing" module. If you open jquery.jqGrid.min.js file in the text editor you will see in the comment at the begining of the file all modules which was the part of the download.
Some additional small remarks: in the documentation is described which parameters of the colModel are default. For example, width:150 and align:'left' have defaout values, so you can remove there from the column definition.
The value property for "select" type of the editoptions which you use is wrong. The Plantas should be defined as
var Plantas = { 'Pablo Podesta':'Pablo Podesta', Pilar:'Pilar',
Tigre:'Tigre', Otra:'Otra'};
or as
var Plantas = 'Pablo Podesta:Pablo Podesta;Pilar:Pilar;Tigre:Tigre;Otra:Otra';
See the documentation for details.
The parameter imgpath is deprecated and should be removed. Class "scroll" is also deprecated and the HTML fragment for the jqGrid can be reduced to
<table id="list"></table>
<div id="pager"></div>
See an example here.
The parameter edit is not exist in the jqGrid it is the parameter of editGridRow from the form editing. You can define it as the part of navGrid parameters prmEdit and prmAdd. Currently you use only prmEdit. Probably the usage of grid.locale-XX.js from the i18n directory will make the usage of edit parameter unneeded.

JQuery datepicker language

I'm using the jQuery datepicker from jqueryui.com and I have a problem changing the calendar to Swedish, I have this code:
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.datepicker.regional['sv']);
$("#StartDate").datepicker();
$('#StartDate').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
</script>
Still it shows as an English calendar.
What might be missing?

Maybe you don't have a language file:
Language files are here: https://github.com/jquery/jquery-ui/tree/master/ui/i18n
A new localization should be created
in a separate JavaScript file named
ui.datepicker-.js. Within a
document.ready event it should add a
new entry into the
$.datepicker.regional array, indexed
by the language code, with the
following attributes:
http://api.jqueryui.com/datepicker/

This is for the dutch people.
$.datepicker.regional['nl'] = {clearText: 'Effacer', clearStatus: '',
closeText: 'sluiten', closeStatus: 'Onveranderd sluiten ',
prevText: '<vorige', prevStatus: 'Zie de vorige maand',
nextText: 'volgende>', nextStatus: 'Zie de volgende maand',
currentText: 'Huidige', currentStatus: 'Bekijk de huidige maand',
monthNames: ['januari','februari','maart','april','mei','juni',
'juli','augustus','september','oktober','november','december'],
monthNamesShort: ['jan','feb','mrt','apr','mei','jun',
'jul','aug','sep','okt','nov','dec'],
monthStatus: 'Bekijk een andere maand', yearStatus: 'Bekijk nog een jaar',
weekHeader: 'Sm', weekStatus: '',
dayNames: ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],
dayNamesShort: ['zo', 'ma','di','wo','do','vr','za'],
dayNamesMin: ['zo', 'ma','di','wo','do','vr','za'],
dayStatus: 'Gebruik DD als de eerste dag van de week', dateStatus: 'Kies DD, MM d',
dateFormat: 'dd/mm/yy', firstDay: 1,
initStatus: 'Kies een datum', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['nl']);

You need to do something like this,
$.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
prevText: '<Préc', prevStatus: 'Voir le mois précédent',
nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
currentText: 'Courant', currentStatus: 'Voir le mois courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
'Jul','Aoû','Sep','Oct','Nov','Déc'],
monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
weekHeader: 'Sm', weekStatus: '',
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
dateFormat: 'dd/mm/yy', firstDay: 0,
initStatus: 'Choisir la date', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['fr']);
for sv data follow the following link
http://code.google.com/p/logicss/source/browse/trunk/media/jquery/jquery.ui.i18n.all.min.js?r=41

You need the following line:
<script src="../jquery/development-bundle/ui/i18n/jquery.ui.datepicker-sv.js"></script>
Adjust the path depending on where you put the jquery-files.

Here is example how you can do localization by yourself.
jQuery(function($) {
$('input.datetimepicker').datepicker({
duration: '',
changeMonth: false,
changeYear: false,
yearRange: '2010:2020',
showTime: false,
time24h: true
});
$.datepicker.regional['cs'] = {
closeText: 'Zavřít',
prevText: '<Dříve',
nextText: 'Později>',
currentText: 'Nyní',
monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
'září', 'říjen', 'listopad', 'prosinec'
],
monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
weekHeader: 'Týd',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['cs']);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="datepicker-cs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log("test");
$("#test").datepicker({
dateFormat: "dd.m.yy",
minDate: 0,
showOtherMonths: true,
firstDay: 1
});
});
</script>
</head>
<body>
<h1>Here is your datepicker</h1>
<input id="test" type="text" />
</body>
</html>

Include language file source in your head script of the HTML body.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
Example on JSFiddle

A quick Update, for the text "Today", the right names are:
todayText: 'Huidige', todayStatus: 'Bekijk de huidige maand',

Try Adding this
$('input[name="daterangepicker"]').daterangepicker({
"locale": {
"firstDay" :1 // 0 Tuesday - 6 - Monday between
}});
It must be completed within the locale object of the defined daterangepicker.
detailed information can be found here.

In 2020, just do
$.datetimepicker.setLocale('en');
Of course, replace 'en' with the correct language ('sv', 'fr', ...)

Include js files of datepicker and language (locales)
'resource/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
'resource/bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.sv.min.js',
In the options of the datepicker, set the language as below:
$('.datepicker').datepicker({'language' : 'sv'});

Resources