Traslating placeholder values by using 18next js - javascript

I wrote a code for translating the app from en-US to id-ID. It translates div, p, span and a tag elements successfully, however it doesn't translate placeholder values.
Here is my code:
<script src="js/i18next-1.10.1.min.js"></script>
<div class="row-fluid" id="loginfb">
<span class="pull-left" id="iconbox"><i class="fa fa-facebook" id="icon"></i></span>
<span class="form-control text-center" id="log_fb_msg"></span>
</div>
<div class="row-fluid" id="loginGmail">
<span class="pull-left" id="iconbox"><i class="fa fa-facebook" id="icon"></i></span>
<span class="form-control text-center log_gmail_msg" id="log-gmail-msg">Login with Gmail</span>
</div>
<div id="top">
<hr class="line_colr" id="right_or_line">
<div id="textrow">
<span class="text-center" id="or_span" </span>
</div>
<hr class="line_colr" id="left_or_line">
</div>
<h5 style="text-align: center; color: red;" id="validation"></h5>
<div class="row-fluid" id="mail">
<input type="text" class="form-control text text-center" id="mail_or_name" data-i18n="[placeholder]mail_or_name" placeholder="Email or Username">
</div>
<div class="row-fluid" id="passwordmail">
<input class="form-control text text-center" type="password" id="pass_span" placeholder="Password">
</div>
<div id="forgotpwd">
<span id="forgot_pass_span"><a id="link" href="#"></a></span>
</div>
<div class="row-fluid" id="signin">
<span class="form-control text-center blue_clr yelw_color" id="sign_in"></span>
</div>
<div id="createAccount">
<span id="create_new_acc"><a id= "registerLink" href="#">CREATE NEW ACCOUNT</a></span>
</div>
<script>
$.i18n.init({
//lng: 'en-US',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
$('#add').text($.t('ns.common:add'));
$('#appname').text($.t('app.name'));
$('#log_fb_msg').text($.t('app.log_fb_msg', {
log_fb_msg: ''
}))
$('#or_span').text($.t('app.or_span', {
or_span: ''
}))
$('#link').text($.t('app.link', {
link: ''
}))
$('#sign_in').text($.t('app.sign_in', {
sign_in: ''
}))
$('#registerLink').text($.t('app.registerLink', {
registerLink: ''
}))
$('.log_gmail_msg').text($.t('app.log_gmail_msg', {
log_gmail_msg: ''
}))
/*$("input[placeholder]").val = $.t('app.sd', {
pvalue: ''
});*/
$("input[placeholder]").val(function() {
var pvalue = $(this).attr("placeholder");
alert($.t('app.sd', {
pvalue: ''
}));
$('pvalue')($.t('app.sd', {
pvalue: ''
}))
});
/*$('#registerLink').text("BUAT AKUN BARU");*/
});
</script>
My ns.special.json is:
{
"app": {
"name": "i18n",
"register": " DAFTAR __register__",
"username": "nama pengguna __username__",
"congrats": "Selamat! __congrats__",
"welcome": "Selamat Datang di Bistip Aplikasi Mobile __welcome__",
"please" : "Lengkapi profil Anda, sehingga Anda __please__",
"post" : "posting yang ditampilkan pada timeline. __post__",
"continue_span" : "LANJUTKAN __continue_span__",
"log_fb_msg" : "Masuk dengan Facebook __log_fb_msg__",
"or_span" : " Atau __or_span__",
"link" : "lupa kata sandi? __link__",
"sign_in" : "MASUK __sign_in__",
"header_msg" : "REKENING __header_msg__",
"profile" : "Profil __profile__",
"hover_my_trip" : "Saya Perjalanan __hover_my_trip__",
"review" : "Ulasan __review__",
"payout" : "Pembayaran __payout__",
"warning" : "Tidak ada diposting perjalanan ditemukan! __warning__",
"leftcolumn" : "Menyerahkan __leftcolumn__",
"rightcolumn" : "Membatalkan __rightcolumn__",
"registerLink" : "BUAT AKUN ANDA __registerLink__",
"log_gmail_msg" : "Masuk dengan Gmail __log_gmail_msg__",
"sd": "Email atau nama pengguna __mail_or_name__"
},
"placeHolder": {
"mail_or_name": "Email atau nama pengguna __mail_or_name__"
}
}
The problem is when I set setLng to id-ID, placeholder values are shown as alert, but they won't be translated on the page. Rest of the things are working fine. How can I modify my code to translate placeholders?

Got the solution.
I wrote a code like this:
$('#text_pswrd_conf').attr("placeholder",$.t('app.pwordConf'));
Where #text_pswrd_conf is the id of required input text. pwordConf is the translated value from ns.special.json

Given your ns.special.json file, the key for your placeholder should be placeHolder.mail_or_name

Related

How to create dynamic onclick elements in vuejs without repeating same value

I am trying to create a form in vuejs, where a group of inputs can be append onclick. It works fine, but the problem is, All inputs return the same value. I am sharing an image here :
I am sharing my code from template :
<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
<div class="row mb-2">
<div class="col-md-3">
<select class="form-control" v-model="data.invoice_product.product_id"
#change="getProductCost">
<option v-for="(product, i) in products" :key="i" :value="product.id">{{
product.product_name }}</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Quantity" v-
model="data.invoice_product.quantity" #keyup="getProductCost">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Total" v-
model="data.invoice_product.total">
</div>
<div class="col-md-3">
<span>
<i class="fa fa-minus-circle" #click="removeElement(k)" v-show="k || ( !k
&& data.invoice_product.length > 1)">Remove</i>
<i class="fa fa-plus-circle" #click="addElement(k)" v-show="k ==
data.invoice_product.length-1">Add fields</i>
</span>
</div>
</div>
</div>
from my script (I am excluding irrelevant code segments) :
export default {
data() {
return {
data : {
customer_id : '',
vat : ''
},
inputs: [{
product_id : '',
quantity : '',
total : ''
}],
input: {
product_id : '',
quantity : '',
total : ''
},
products : []
}
},
methods : {
getProductCost() {
axios.get('/api/product-cost?
product_id='+this.item.product_id+'&&quantity='+this.item.quantity,
this.data).then(response => {
this.input.total = response.data
})
},
addElement() {
this.data.invoice_product.push({
product_id : '',
quantity : '',
total : ''
})
},
removeElement (index) {
this.data.invoice_product.splice(index, 1)
},
}
Input returns null if I use "input" instead :
The problem is not providing correct data to v-model.
Here, you make an iteration, where you get "input" as an element.
<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
But here, you are providing "data.invoice_product" instead of "input".
<select class="form-control" v-model="data.invoice_product.product_id"
#change="getProductCost">
Just change "data.invoice_product.product_id" to "input.product_id", and also do it for other inputs.
You are already looping through data.invoice_product with this
<div class="form-group" v-for="(input,k) in data.invoice_product"> .... </div>
so the v-model on your select tag should be
<select v-model="input.product_id"> .... </select>
instead of
<select v-model="data.invoice_product.product_id"> .... </select>
Similar case for your input tags for Quantity and Total.
So, the code in your template should be something like this:
<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
<div class="row mb-2">
<div class="col-md-3">
<select class="form-control" v-model="input.product_id"
#change="getProductCost">
<option v-for="(product, i) in products" :key="i" :value="product.id">{{
product.product_name }}</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Quantity" v-
model="input.quantity" #keyup="getProductCost">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Total" v-
model="input.total">
</div>
<div class="col-md-3">
<span>
<i class="fa fa-minus-circle" #click="removeElement(k)" v-show="k || ( !k
&& data.invoice_product.length > 1)">Remove</i>
<i class="fa fa-plus-circle" #click="addElement(k)" v-show="k ==
data.invoice_product.length-1">Add fields</i>
</span>
</div>
</div>
</div>
[Updated]
Your scripts should be left as it was before:
export default {
data() {
return {
data : {
customer_id : '',
vat : '',
invoice_product: [{
product_id : '',
quantity : '',
total : ''
}],
},
input: {
product_id : '',
quantity : '',
total : ''
},
products : []
}
},
methods : {
addElement() {
this.data.invoice_product.push(this.input)
},
removeElement (index) {
this.data.invoice_product.splice(index, 1)
},
}

How do I use one input to control the other in vuejs

I need to find a way to basically show "per Month" in the assessments_period input if the assessments fee input has a typed-in value.
I've tried bindings and components but can't pull this off.
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Fee <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_fee" placeholder="$">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Period <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_period" placeholder="(per month/quarter/etc.)">
</div>
</div>
data() {
return {
now: new Date().toISOString(),
document: {
assessments_fee: '',
assessments_period: '',
}
}
},
components: {
assessments_fee: function() {
if(this.assessments_fee != null || '') this.assessments_period = "per Month";
}
},
you can create a watcher for assessments_fee so when its not null assessments_period= 'per Month'.
Here is how you can do it:
new Vue({
el: '#app',
data() {
return {
now: new Date().toISOString(),
document: {
assessments_fee: '',
assessments_period: '',
}
}
},
computed: {
assessmentsFee() {
return this.document.assessments_fee
}
},
watch: {
assessmentsFee() {
this.document.assessments_fee ?
this.document.assessments_period = "per Month" :
this.document.assessments_period = ""
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Fee <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_fee" placeholder="$">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Assessment Period <span class="note">C</span></label>
<input type="text" class="form-control" v-model="document.assessments_period" placeholder="(per month/quarter/etc.)">
</div>
</div>
</div>

select from tag and use as property - vuejs

I am trying to get a property from a select tag and use in a property object.
Here is my html:
<div id="app">
<h3>{{title}}</h3>
<div class="form">
<div class="form-group">
<div class="form-group">
<label>Note Title</label>
<input class="form-control" type="text" v-model="note.title">
</div>
<div class="form-group">
<label>Note text</label>
<textarea class="form-control" v-model="note.text"></textarea>
</div>
<div class="form-group">
<label>Cor</label>
<select v-model="note.cor">
<option disabled value="">Selecione a cor</option>
<option value="blue">Azul</option>
<option value="green">Verde</option>
</select>
<span>Cor Selecionada: {{ note.cor }}</span>
</div>
<button class="btn btn-primary" #click="addNote">Submit</button>
</div>
<div class="col-sm-12">
<div class="col-sm-4" v-for="(note, index) in notes">
<button class="close" #click="removeNote(index)">×</button>
<div class="card-block">
<h4 class="card-title" v-bind:style="{ color: note.cor }">{{note.title}}</h4>
<h6 class="card-subtitle mb-2 text-muted">{{note.date}}</h6>
<p class="card-text">{{note.text}}</p>
</div>
</div>
</div>
</div>
</div>
Here is the Js:
var app = new Vue({
el: '#app',
data: {
title: 'Notemaster',
note: {
title: '',
text: '',
cor: ''
},
notes: [
{
title: 'Visit Hawaii',
text: 'just kiddind lol',
date: new Date(Date.now()).toLocaleString(),
cor:'blue'
}
]
},
methods: {
addNote() {
let { text, title } = this.note
this.notes.push({
text,
title,
date: new Date(Date.now()).toLocaleString(),
cor
})
},
removeNote(index) {
<!-- apaga o número de itens dispostos no segundo parametro-->
this.notes.splice(index, 1)
}
}
});
The value of the select tag works to show at <span>Cor Selecionada: {{ note.cor }}</span>;
It works to show the color of the title at <h4 class="card-title" v-bind:style="{ color: note.cor }">{{note.title}}</h4>
But I can't create a new note.
The error shown is that cor in this.notes.push({ ... cor }) is not defined.
Thanks in advance
The error message is pretty self-explanatory, cor is not defined in that scope.
Perhaps you meant to do this:
let { text, title, cor } = this.note
^^^

add class to footer after click button from submit

Hello i'm new in php and javascript developer and i have a question.
i have an html file with a form for registration and a footer section
In the registration form when i add sucessfully a user i hide the input text and show a message, but the footer section go up.
For fix this visual problem i want add the "footer-fixed-bottom" to fotter section but only when hide the input text in this way i block the footer at the end of page.
i have an html and a java script in external file... my problem is access to footer section from javascript.
html code
<section class="page-login section-4">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
<div class="well well-6 mb0">
<h2 class="section-title-2 st-2 mb20">Registrazione</h2>
<p>Possiedi gi&agrave un account ? Login</p>
<form id="RegistrationForm" class="register-form form form-2" method="post" action="php/registrati.php">
<label>
Nome Utente
<input name="name " id="name" type="text" required class="form-control" placeholder="Nome">
</label>
<label>
Email <span class="required">*</span>
<input name="email " id="email" type="email" required class="form-control" placeholder="Email">
</label>
<label>
Password <span class="required">*</span>
<input name="password " id="password" type="password" required class="form-control" placeholder="Password">
</label>
<label>
Confirm Password <span class="required">*</span>
<input name="confirmpassword" id="confirmpassword" type="password" required class="form-control" placeholder="Confirm Password">
</label>
<label class="hideFormcontrol">
<input type="checkbox" name="terms" id="terms" value="ok" required class="hideFormcontrol">
Acconsento a DBSoftware Termini e condizioni e Privacy
</label>
<div class="alert alert-success hidden br0" id="contact-success">
<span class="glyphicon glyphicon-ok "></span>
<strong>Success!</strong> Grazie per esserti registrato.
</div>
<div class="alert alert-danger hidden br0" id="contact-error">
<span class="glyphicon glyphicon-remove "></span>
<strong>Error!</strong> Le password inserite non corrispodono.
</div>
<div class="alert alert-danger hidden br0" id="contact-present">
<span class="glyphicon glyphicon-remove "></span>
<strong>Error!</strong> Email gi&agrave presente nel database.
</div>
<div>
<input type="submit" class="hideFormcontrol btn voyo-btn-2 rounded mt5" value="Registrati">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer-wrapper no-border" >
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<p>© Copyright 2015 DBSoftware</p>
</div>
<div class="pull-right">
<ul class="social-icon dark-2 rounded">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-tumblr"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END Sub footer -->
</footer>
<!-- END Footer -->
jscript with validate code
if ($('.register-form').length) {
var form = {
init: false,
initialize: function () {
// if form is already initialized, skip
if (this.init) {
return;
}
this.init = true;
var $form = $(".register-form");
$form.validate({
submitHandler: function (form) {
// Loading Button
var btn = $(this.submitButton);
btn.button("loading");
// Ajax Submit
$.ajax({
type: "POST",
url: $form.attr("action"),
data: {
"name": $form.find("#name").val(),
"email": $form.find("#email").val(),
"password": $form.find("#password").val(),
"confirmpassword": $form.find("#confirmpassword").val(),
"terms": $form.find("#terms").val()
},
dataType: "json",
success: function (data) {
var $success = $form.find("#contact-success"),
$error = $form.find("#contact-error"),
$present = $form.find("#contact-present");
switch (data.response) {
case "success":
$success.removeClass("hidden");
$error.addClass("hidden");
$present.addClass("hidden");
//Reset Form
$form.find(".form-control")
.val("")
.blur()
.parent()
.removeClass("has-success")
.removeClass("has-error")
.addClass("hidden")
.find("label.error")
.remove();
$form.find(".hideFormcontrol")
.addClass("hidden")
break;
case "error":
$error.removeClass("hidden");
$success.addClass("hidden");
$present.addClass("hidden");
break;
case "present":
$error.addClass("hidden");
$success.addClass("hidden");
$present.removeClass("hidden");
break;
}
},
complete: function () {
btn.button("reset");
}
});
},
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true
},
confirmpassword: {
required: true,
equalTo: "#password"
},
terms: {
required: true
}
},
messages: {
name: {
required: "<span class='form-message-error'>Please enter your name!</span>"
},
email: {
required: "<span class='form-message-error'>Please enter your email address!</span>",
email: "<span class='form-message-error'>Please enter a valid email address!</span>"
},
password: {
required: "<span class='form-message-error'>Please enter a password!</span>"
},
confirmpassword: {
equalTo: "<span class='form-message-error'>Prego, inserire la stessa password!</span>"
},
terms: {
required: "<span class='form-message-error'>Prego, selezionare le condizioni della privacy!</span>"
}
},
highlight: function (element) {
$(element)
.parent()
.removeClass("has-success")
.addClass("has-error");
},
success: function (element) {
$(element)
.parent()
.removeClass("has-error")
.addClass("has-success")
.find("label.error")
.remove();
}
});
} // END initialize
}; // END form object
form.initialize();
}
i want add in the jscript a part where i can addclass in the footer section class. In the jscript i can access to all element in the form section but i can't access the element out of form section, how can reference to footer section in the section code?
case "success":
$success.removeClass("hidden");
$error.addClass("hidden");
$present.addClass("hidden");
//Reset Form
$form.find(".form-control")
.val("")
.blur()
.parent()
.removeClass("has-success")
.removeClass("has-error")
.addClass("hidden")
.find("label.error")
.remove();
$form.find(".hideFormcontrol")
.addClass("hidden")
break;
thanks a lot for help.
You can use element/type selector to select the <footer>, and use addClass() to add a class to the element.
Using type selector:
$('footer').addClass('footer-fixed-bottom');
Using class selector:
$('.footer-wrapper').addClass('footer-fixed-bottom');

How to use two types of editing like popup and Inline in a single kendo Grid in asp?

I want to use two types of editing like inline editing and popup editing for a single kendo grid
inline editing for Commands
popup editing for Toolbar,,
alredy i searched google but i didnt get related pages
in popup editing i want to use template
<script id="customPopUpTemplate" type="text/x-kendo-template">
<form id="myForm" action="" method="post">
<div align="right">
<span id="Spn2" class ="span">* Mandatory Fields</span>
</div>
<div align="center">
<span id="Spn1" class ="span1" ></span>
</div>
<div class="heig"> </div>
<div class="k-edit-field">
<input name="FirstName" class="k-textbox"/>
<span id="sta1" style="color: Red; font-size:medium ;">
</span>
</div>
<div class="div">First Name: </div>
<div class="k-edit-field">
<input name="LastName" class="k-textbox"/>
<span id="sta2" style="color: Red; font-size:medium ;">
</span>
</div>
<div class="div">Last Name: </div>
<div class="k-edit-field">
<input name="LoginName" class="k-textbox"/><
<span id="sta3" style="color: Red; font-size:medium;">
</span>
</div><div class="div">Login Name: </div>
<div class="k-edit-field">
<input name="Password" type="Password" class="k-textbox"/>
<span id="sta4" style="color: Red; font-size:medium ;">
</span>
</div>
<div class="div">Password: </div>
<div class="k-edit-field">
<input name="ReTypePassword" type="Password" class="k-textbox"/>
<span id="sta5" style="color: Red; font-size:medium ;"> * </span>
</div> <div class="div">ReTypePassword: </div>
<div class="k-edit-field">
<input name="ScopeId"
data-bind="value:ScopeId"
data-value-field="ScopeId"
data-text-field="ScopeName"
data-source="dropDownDataSource"
data-role="dropdownlist" />
<span id="sta6" style="color: Red; font-size:medium ;"> * </span>
</div>
<div class="div">Scope: </div>
</form>
</script>
my template id is customPopUpTemplate
My toolbar code is
toolbar: [ { text : "Add new record", name: "popup", iconClass: "k-icon k-add"} ],
editable: "inline",
columns:
[
{
field: "LoginName",
title: "Login Name",
width:"175px"
},
{
field: "FirstName",
title: "First Name",
width:"115px"
},
{
field: "LastName",
title: "Last Name",
width:"100px"
}
$(".k-grid-popup", grid.element).on("click", function () {
grid.options.editable = "popup";
grid.addRow();
grid.options.editable = "inline";
});
its working fine but it will display normal columns,,
in my template i add extra columns ,,
how to i use my template for popup editing...
thanks in advance.!!!!!!!!!!
Assign a json values having options templates ,mode.. to grid.options.editable
$(".k-grid-popup", grid.element).on("click", function () {
var popupWithOption = {
mode: "popup",
template: kendo.template($("#customPopUpTemplate").html()),
window: {
title: "Your Title"
}
};
grid.options.editable = popupWithOption ;
grid.addRow();
grid.options.editable = "inline";
});
i hope this will help you

Categories

Resources