That's where I change a value:
<div>
<input type="text" id="global-tag1" v-model="liveTag1">
<label for="global-tag1">label</label>
</div>
And I would like to update it everywhere here:
Attention there are multiple of this pieces on my page. And I cannot do it with custom elements, I've done it and it worked but it takes to long to render the page.
<div>
<input name="someValue" value="{{$predefinedValue ?? ''}}" type="text" id="id1">
<label for="id1">label</label>
</div>
Now how do I achieve this with vue.js.
Because I cannot simply set
value="{{liveTag1}}"
Then I do not have a predefined value.
Solution
var vm = new Vue({
el: 'body',
data: {
liveTag1: ''
}
});
This will observe the liveTag1 and as soon as the data changes it will update the value of the given Selector.
vm.$watch('liveTag1', function(value) {
$('[id^="someid"]').val(value);
});
Which version of Vue are you using? On current version you cannot do:
value="{{liveTag1}}"
for input fields, you need to do:
v-model="liveTag1"
Then if you want to set it to a predefined value, in your Vue instance:
Vue({
data: {
liveTag1: "something"
}
})
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 have a (unchangable) form structure like this:
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="frm-registrationForm-form-surname">Surname:</label>
</div>
<div class="col-sm-9">
<input class="form-control text" id="registration-form-surname" type="text" name="surname" required>
</div>
</div>
Is there possible to add the asterisk * sign next to all the labels relying to the inputs with "required" attribute using the CSS? I did not find any option to link the input with the label in CSS even in the same form group.
Thanks.
Using jQuery.
First solution. If .form-group has only one input and label elements.
$(document).ready(function () {
$('input[required]').parents('.form-group').find('label').append('*');
});
Second solution. Working only of your label for and input id attributes the same
$(document).ready(function () {
$("input[required]").each(function(index) {
var id = $(this).attr('id');
$('label[for="'+id+'"]').append('*');
});
});
I would recommend you to use the second solution.
You can use jQuery to implement this functionality. Inside document.ready function,
var str ='*';
$(".control-label").append(str);
Entire script would be
$(document).ready(function () {
var str ='*';
$(".control-label").append(str);
});
I want to include a Blaze template with an argument and then use the argument value in an event. The problem is that when I include the template a second time with a different argument I get the argument value from the first instance of the template in events.
Template:
<template name="UploadFormLayoutImage">
<form class="uploadPanel">
<input type="file" name="fileupload" id="input-field">
<label for="input-field">Upload file</label>
</form>
</template>
Include:
{> UploadFormLayoutImage layoutArea="area1"}}
{> UploadFormLayoutImage layoutArea="area2"}}
js:
Template.UploadFormLayoutImage.onCreated(function(){
this.currentArea = new ReactiveVar;
this.currentArea.set(this.data.layoutArea);
});
Template.UploadFormLayoutImage.helpers({
layoutArea: function() {
return Template.instance().currentArea.get(); //Returns the correct argument value for each instance of the template.
}
});
Template.UploadFormLayoutImage.events({
'change input[type="file"]': function(e, instance) {
e.preventDefault();
console.log(instance.data.layoutArea); //Allways returns 'area1'
}
});
What am I missing here? (This is my first Stackoverflow question. Please be gentle :))
What if you change the instance.data.layoutArea in your events method to this.layoutArea?
In my effort to make the code example easy to read i stripped away the part that caused the problem. I'm using a label for the input field and therefore the input field has an id and thats of course not ok when repeating the template.
I now use the layoutArea-helper as an id value and every thing works just fine.
<template name="UploadFormLayoutImage">
<form class="uploadPanel">
<input type="file" name="fileupload" id="{{layoutArea}}">
<label for="{{layoutArea}}">Upload file</label>
</form>
</template>
I am building a React app with Semantic UI in Meteor. I have had two places where event handlers don't seem to be functioning in any capacity, and I haven't found anything online with a problem to the same extent.
Below is my React class. I have tried various ways of calling the eventHandler methods, but nothing works. That also seems irrelevant since I can't even get an anonymous function to run.
SaveSearchPopout = React.createClass({
getInitialState: function() {
return {username: "", queryname: ""};
},
handleUsernameChange:function(e) {
console.log(e.target.value);
this.setState({username: e.target.value})
},
handleQuerynameChange:function(e) {
this.setState({queryname: e.target.value})
},
handleSave:function(e) {
console.log("handling save");console.log(e);
e.preventDefault();
alert("saving!");
return false;
},
render: function() {
console.log(this);
return (
<div className="ui modal saveSearchPopout">
<div className="header">Save Search</div>
<div className="content">
<form className="ui form" onSubmit={function() {console.log("test");}}>
<div className="field">
<input type="text" name="username"
placeholder="Username"
value={this.state.username}
onChange={function() {console.log("update")}} />
</div>
<div className="field">
<input type="text" name="queryname"
placeholder="Name this search"
value={this.state.queryname}
onChange={this.handleQuerynameChange}></input>
</div>
<div className="actions">
<div className="ui cancel button">Cancel</div>
</div>
<button type="submit">Click</button>
<button className="ui button" type="button"
onClick={function() {console.log("saving");}}>Save</button>
</form>
</div>
</div>
);
}
});
The class is rendered from another classes method which looks like:
saveSearch: function() {
var backingDiv = document.createElement('div');
backingDiv.id = 'shadowPopupBack';
document.getElementsByClassName('content-container')[0].appendChild(backingDiv);
ReactDOM.render(<SaveSearchPopout />, backingDiv);
//this.props.saveSearch;
$('.ui.modal.saveSearchPopout')
.modal({
closeable:false,
onDeny: function() {
var container = document.getElementsByClassName('content-container')[0];
var modalContainer = document.getElementById('shadowPopupBack');
container.removeChild(modalContainer);
}
})
.modal('show');
},
The only button that works is the Semantic UI cancel button.
Has anyone else run into this or have any idea what I am missing. Thanks for the help.
Don't know if this is the case, but in newer versions of React (or JSX), when you pass a function to an HTML component or a custom component, that function is not automatically bound to this instance.
You must bind them manually. For example:
onChange={this.handleQuerynameChange.bind(this)}
Or you could use arrow functions, because they will automatically bind to this:
onChange={e => this.handleQuerynameChange(e)}
I eventually found the answer here. Semantic UI modal component onClose with React
and I haven't worked through it yet, but it looks like this is more Reactive solution than using jQuery to bind eventHandlers: http://www.agilityfeat.com/blog/2015/09/using-react-js-and-semantic-ui-to-create-stylish-apps.
Hope this is helpful to someone else.
How can Ractive Components live inside partials?
I have a FormInput Component
<FormInput type="text" label="Please enter name" value="{{John Doe}}"/>
which translates to
<div>
{{label}}: <input type="{{type}}" value="{{value}}">
</div>
There is also another component Modal
<div>
{{>modalContents}}
</div>
When I create a Modal component with
modalContents:'<FormInput type="text" label="Please enter name" value="{{John Doe}}"/>'
the component isn't rendered at all, probably because ractive thinks it is just text. I know, I am missing something here... Is there a way to make it actually parse the component?
*Note: examples are simplified
This does work, but you need to make sure that the FormInput component is registered. One way is to register it globally...
Ractive.components.FormInput = FormInput;
...but you can also register it when creating a new instance:
var FormInput = Ractive.extend({
template: '<div>{{label}}: <input type="{{type}}" value="{{value}}"></div>'
});
var Modal = Ractive.extend({
template: '<div>{{>modalContents}}</div>'
});
var modal = new Modal({
el: 'body',
partials: {
modalContents: '<FormInput type="text" label="Please enter name" value="John Doe"/>'
},
// register the component here
components: { FormInput: FormInput }
});
There is a small syntax error in your example which may be relevant – it should be John Doe, not {{John Doe}}.
Demo here: http://jsfiddle.net/rich_harris/80w8o1bu/