I am using Laravel with Vuejs. i want to fire an event on component show or hide. how to achieve this?
<album-images v-show ="!gallery"
:album = "album"
:image-arr = "imageArr"></album-images>
You can use a watcher:
watch: {
gallery: {
handler: value => {
this.$emit('gallery-toggled', value)
}
}
}
or a computed:
computed: {
toggle () {
this.$emit('gallery-toggled', this.gallery)
}
}
If you want to do something after the view has updated (i.e the component is actually visible or hidden), you may have to wrap the $emit in nextTick(), see Vue.nextTick( [callback, context] ).
It depends on the exact order of updating the watch or computed, but if you are getting unexpected results in the receiver of the event, this is an option to try.
See the discussion here.
this.$nextTick(function() {
this.$emit('galleryVisible', this.gallery)
});
Related
I want to remove an option from selection conditionally.. I tried to use #remove event but I couldn't stop remove event before my check... I want to do something below;
<q-select #remove.stop="isItRemovable"></q-select>
.
.
.
methods: {
isItRemovable(option) {
if (option.value.name === 'yes removable') {
remove
} else {
show not removable warning
}
}
}
how can i do this? than you.
I encountered the same problem and figured out a dirty solution
function onRemove(details) {
setTimeout(()=>{
tags.value.splice(details.index, 0, details.value as never);
}, 1) // yes this is very dirty, but it seems to me there is no better way with current Quasar API
}
Where tags is your ref used as v-model and this function is used as event callback: #remove="onRemove".
This will prevent any item removal, but of course you can add any conditions. Side effect: element blinks for a millisecond.
Is it possible in fullcalendar to have the same behavior than in bootstrap dismissible alerts for removing an event?
I would like to have the same behavior than in Bootstrap alert in the following example:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_alerts_fade&stacked=h
element.find('div.fc-title').append("<span id='eventTimes'><i class='fas fa-times'/></span>");
element.find("#eventTimes").click(function () {
deleteBookingById(event._id);
$('.tooltip').remove();
});
function deleteBookingById(id) {
if (confirm('Do you want to remove this booking?')) {
// ToDo: C# delete part
$('#calendar').fullCalendar('removeEvents', id);
setNormalBehavior();
}
}
I would like to turn a primitive event (a click) into a semantic event, like "deleteTodo"
This is described here, but not how to implement :(
I have the following code:
App.TodoView = Em.View.extend({
click: function(e) {
this.trigger("deleteTodo");
}
});
App.Router.map(function(match) {
match('/').to('index');
});
App.IndexRoute = Ember.Route.extend({
deleteTodo: function(e) {
// this code is never executed :(
}
}) ;
After I perform the 'click', I see that the TodoView click function is called, but not the deleteTodo function from the IndexRoute. Any suggestions what might go wrong here ?
CHeers
You can use this.get("controller").send("deleteTodo"). This will send a message to the controller, if the controller doesn't handle deleteTodo it will bubble to the router and be handled there.
click: function(e) {
this.get('controller').send("deleteTodo");
}
In your router you will also need to define the event:
events: {
doStuff: function(e) {
alert("Do stuff") ;
}
}
http://jsfiddle.net/9Xasr/7/
I would typically do record deletion in the controller. Seems like putting that in a router event would not be ideal.
I have buttons that trigger jQuery validation. If the validation fails, the button is faded to help draw attention away from the button to the validation messages.
$('#prev,#next').click(function (e)
{
var qform = $('form');
$.validator.unobtrusive.parse(qform);
if (qform.valid())
{
// Do stuff then submit the form
}
else
{
$('#prev').fadeTo(500, 0.6);
$('#next').fadeTo(500, 0.6);
}
That part works fine.
However, I would like to unfade the buttons once the invalid conditions have been cleared.
Is it possible to hook into jQuery Validation to get an appropriate event (without requiring the user to click a button)? How?
Update
Based on #Darin's answer, I have opened the following ticket with the jquery-validation project
https://github.com/jzaefferer/jquery-validation/issues/459
It might sound you strange but the jQuery.validate plugin doesn't have a global success handler. It does have a success handler but this one is invoked per-field basis. Take a look at the following thread which allows you to modify the plugin and add such handler. So here's how the plugin looks after the modification:
numberOfInvalids: function () {
/*
* Modification starts here...
* Nirmal R Poudyal aka nicholasnet
*/
if (this.objectLength(this.invalid) === 0) {
if (this.validTrack === false) {
if (this.settings.validHandler) {
this.settings.validHandler();
}
this.validTrack = true;
} else {
this.validTrack = false;
}
}
//End of modification
return this.objectLength(this.invalid);
},
and now it's trivial in your code to subscribe to this event:
$(function () {
$('form').data('validator').settings.validHandler = function () {
// the form is valid => do your fade ins here
};
});
By the way I see that you are calling the $.validator.unobtrusive.parse(qform); method which might overwrite the validator data attached to the form and kill the validHandler we have subscribed to. In this case after calling the .parse method you might need to reattach the validHandler as well (I haven't tested it but I feel it might be necessary).
I ran into a similar issue. If you are hesitant to change the source as I am, another option is to hook into the jQuery.fn.addClass method. jQuery Validate uses that method to add the class "valid" to the element whenever it is successfully validated.
(function () {
var originalAddClass = jQuery.fn.addClass;
jQuery.fn.addClass = function () {
var result = originalAddClass.apply(this, arguments);
if (arguments[0] == "valid") {
// Check if form is valid, and if it is fade in buttons.
// this contains the element validated.
}
return result;
};
})();
I found a much better solution, but I am not sure if it will work in your scenario because I do not now if the same options are available with the unobtrusive variant. But this is how i did it in the end with the standard variant.
$("#form").validate({
unhighlight: function (element) {
// Check if form is valid, and if it is fade in buttons.
}
});
Is there a way to mask chart while loading?
LineChart has event 'afterrender', store has 'load' but it is not what i need.
I see sufficient delay between them and final chart rendering.
tnx
Env: extjs 3.3.1. flash
var chart = new Ext.chart.LineChart({
id: 'chart1',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
'afterrender': function() {
Ext.getCmp('chart1').getEl().unmask();
}
}
});
Why the heck would you use getCmp in an event of that Component? The function has arguments:
listeners: {
afterrender: function(chart) {
chart.getEl().unmask();
}
}
Also, be mindful of memory leaks as this would keep the listener on this chart until it gets destroyed but it only renders once
listeners : {
afterrender : {
single : true,
fn : function(chart) {
chart.getEl().unmask();
}
}
}
With single = true, it will remove itself after the first firing of the event. You can also put delay and pass in a number (in milliseconds) to delay the firing, buffer (not for afterrender) and pass in a number (in milliseconds) and all the same events within the number of milliseconds will be put into one event firing, scope to change the scope of the function. Some others but those are the top 4 options.
Try either the render or beforerender event hooks.
I think this will solve your problem
store.load({
scope: this,
callback: function(records, operation, success) {
Ext.getCmp('chart1').getEl().unmask();
}
});
else you can use the activate event of the chart to unmask it.