I created a function that will transliterate text to different language. I have a button that works great:
<input onclick="translateAll()" type="button" class="button" value="Transliterate">
I'm trying to place that button on MarkitUp editor. I created a button:
{name: 'Translit', className: "translit", onclick:'translateAll()'},
But it doesn't work. Any idea how to call a function or if it even possible?
{name: 'Translit', className: "translit", replaceWith: translateAll},
Related
I'm developing an Angular 6 app which uses ngx-translate for localization and I'm also using Bootstrap 4 tooltips and the problem I'm facing is I'm not being able use localization keeping Bootstrap tooltip style.
Without localization I would use an input this way:
<input type="text" class="form-control text-truncate" id="position"
placeholder="position" data-title="position" />
And this will show a very nice Bootstrap tooltip as it can be seen below:
With ngx-translate localization I would use an input this way:
<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
[attr.placeholder]="'wfrh_vacancyform_position' | translate"
[attr.data-title]="'wfrh_vacancyform_position' | translate" />
and the problem here is data-title attribute. "data-title" attribute is used to display the tooltip but I guess ngx-translate doesn't recognize it (maybe?).
Placeholder is working fine this way (the text is translated and shown correctly) but tooltip won't show.
I've also tried this way:
<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
placeholder="{{'wfrh_vacancyform_position' | translate}}"
data-title="{{'wfrh_vacancyform_position' | translate}}" />
which is also not working (it only works for placeholder) so I'm stuck.
If I do:
<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
[attr.placeholder]="'wfrh_vacancyform_position' | translate"
[attr.title]="'wfrh_vacancyform_position' | translate" />
then the tooltip shows but with no style as it can be seen in the next image:
And this is the way I create the tooltips in code (in ngOnInit):
ngOnInit() {
setTooltip()
}
setTooltip() {
$('.tooltipped').tooltip({
placement: 'auto',
trigger: 'focus',
template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>'
});
$('.tooltipped').bind("mouseover", function () {
var _this = $(this);
_this.tooltip("show");
});
$('.tooltipped').bind("mouseout", function () {
var _this = $(this);
_this.tooltip("hide");
});
$('.tooltipped').bind("keyup", function () {
var _this = $(this);
_this.tooltip("hide");
});
}
Well I'm stuck. I need to be able to display this nice styled tooltip with translation. Any help / ideas?
Thanks.
Ok, after long time investigating I was able to find a solution and I'll post it here in case it helps anyone else.
The problem is I was setting tooltip in onInit (which is fired only once when the component is created) and wasn't setting any tooltip text, just leaving it to pickup the one set with:
[attr.data-title]="'text_to_translate_key' | translate"
(the initial text translation) and after changing language tooltip was not refreshing (the text was static with the initial value) but you can use a function with the tooltip "title" property this way:
$('.tooltipped').tooltip({
placement: 'auto',
trigger: 'focus',
template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>',
title: this.setTitle
});
setTitle() {
return $(this).attr("placeholder");
}
and this function (which has current object reference -this- as an implicit input parameter) acts as a binding which updates the title property continuosly so when placeholder text changes (placeholder does not need to be refreshed after language changes and that's why it works) the tooltip "title" property will be updated and as a consequence tooltip text will change and user will see updated text.
"The end" :)
i m trying to create a view in which the header of page contain some button and according to the button click the content on the page should be change.
should i use partial view?
You can use ajax and webapi.
e.g.
<span id="test_span">default text</span>
<input type=button value="change text by webapi" />
<script>
$(document).ready(function(){
$("#test_span").click(function(){
$.ajax({
type:'GET',
url:'webapi url',
success: function(data){
$("#test_span").text(data);
}
});
});
});
</script>
I am new to Meteor this is how I kept the button in html file.
<input type="button" class="number" value="1">
<input type="button" class="number" value="2">
<input type="button" class="number" value="3">
How to get the value of these buttons in the js file.
Any one help me.
Thanks in advance.
Get the value using an event:
'click .number': function(event, template) {
console.log(event.currentTarget.value);
}
Or plain Jquery:
$($('.number')[0]).val()
$($('.number')[1]).val()
$($('.number')[2]).val()
well to determine which buttons get clicked you can simply use event handlers for your template. And its very important to know that the buttons are identified through their class names. Therefor you have to choose unique classnames.
For example if you have the buttons inside a template called template1 you just do the following:
//in your .html inside your template1
<button class="button1">Button1</button>
<button class="button2">Button2</button>
<button class="button3">Button3</button>
and the corresponding JS:
//in your clientside JS
Template.template1.events({
"click.button1": function () {
//exec code when button1 clicked
//[...]
},
"click.button2": function () {
//exec code when button2 clicked
//[...]
},
"click.button3": function () {
//exec code when button3 clicked
//[...]
}
});
if your buttons aren't in an template, but just inside your just use the area as template. for example Template.body.events will handle events in your body.
Can be done like below:
Template.TemplateName.events({
'click .number': function (event,template) {
return event.target.value;
}
});
I have a page with table. Each table row, has two links "delete", and "edit". "delete" works fine.
I would like to do this scenario:
When user clicks on row "edit" link, a small window appears with the fields of this row.
User decide to edit or not.
User may press "Save Changes", or "Cancel".
I did the option of small window with JavaScript document.createElement(), and the window appears successfully.
But I would like to add helpers for "Save Changes", and "Cancel" buttons.
I can't do this using helpers
Template.codesList.events({
'submit form#newForm': function (events) {
// some actions
};
},
'click #edit': function () {
var px = 'px';
// Create an Overlay
var myOverlay = createOverlay();
document.body.appendChild(myOverlay);
// Create edit window display it over the Overlay
var editWindow = createPopup(300, 400);
// Create elements and append it to edit window
var editForm = editWindowForm(this._id, this.name);
editWindow.appendChild(editForm);
document.body.appendChild(editWindow);
},
'click #delete': function () {
if (confirm("Are you sure?")) {
Codes.remove({_id: this._id})
}
},
'submit form#editForm': function (event) {
event.preventDefault();
console.log("Clicked"); // This doesn't displayed
}
});
And this is the form after displaying it.
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
<div class="form-group">
<label for="itemCode" class="control-label">Code</label>
<input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
</div>
<div class="form-group">
<label for="itemName" class="control-label">Name</label>
<input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="button" value="Cancel" class="btn btn-info">
</form>
But when I press on "Save Changes" button, no print from console.log() and the form is making the normal submit and the page reloads again.
So, what I'm missing?
By the way that's the output of the console:
document.querySelector('form#editForm')
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">…</form>
Define edit form as a template. Use event handlers as usual to handle save and cancel button clicks.
To render it, either just put it inside the page template with '#if sessionEditPopup' or if you must do it yourself then use UI.renderWithData docs here
BTW manually modifying DOM using jquery etc is something to be avoided unless there is no other way and is not the Meteor way of doing things.
Add event on click save the data into Session because Session can access globally.
And Take the data from Template.name.Healper using session,
So when u change the session value that will automatically change your page content.
Here is the link may be useful for U
http://meteortips.com/first-meteor-tutorial/sessions/
I am working on a Spring WebFlow project that is using Dojo (dijit) for the forms and if the user does now fill in a textfield that is required the field does turn red on the click of the submit button. But radio buttons and checkboxes dont..
1) How can I make a radio button and checkbox act like text fields and turn red?
2) How can I change the following code popup a messages that the user has to fix some text fields.
<input type="submit" name="_eventId_submit" id="submit" value="Submit" tabindex="11" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ValidateAllDecoration({
elementId : 'submit',
event : 'onclick'
}));
</script>
for 2) you can use Spring.validateAll() instead of the ValidateAllDecoration. (you have to remove the ValidateAllDecoration)
the function Spring.validateAll() return true or false depending on the validation results.
something like that on the onClick:
onclick="if(!Spring.validateAll()){alert('errors')}else{Spring.submitForm(...)}"
should work