I think the title is pretty self-explanatory, I've been playing with RactiveJS for a while now and I still didn't manage to figure out how could partials inherit parent events.
There's no reason for a jsfiddle because it's no particular problem.
someTemplate:
<div id="container">{{ > somePartial }}</div>
somePartialContent:
<div id="testMessage" on-click="showMessage:hello">click me</div>
Then running this:
var content = new Ractive({
el : 'body',
template : someTemplate,
partials : { somePartial : somePartialContent }
});
content.on({ showMessage: function( e , _message ) { alert( _message ) } });
The expected behaviour is that when I click #testMessage an alert box would pop up , but it doesnt.
Related
I have this little snippet of code that works great in JSFiddle and in a Chrome extension. On clicking "button" it blurs the ID "content".
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
I've been through quite a few of the similar question that say to add $(document).ready(function(){
before and this });`
at the end giving this
$(document).ready(function(){
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
That has worked for me before but not helping with this little ditty of code.
When I add the second set of code I get "$ is not a function error"
Thanks in advance for the help.
***** ANSWER (since I can't post answers for some reason) ******
This is a Wordpress site and Wordpress uses jQuery.noConflict();
So, in Wordpress, $ is undefined ergo the message "$ is not a function error"
Instead of
$(document).ready(function(){
in Wordpress you need to use
jQuery(document).ready(function($) {
What worked is putting it in the child-themes funtion.php like this:
function load_dimmer_script(){
?>
<script>
jQuery(document).ready(function($) {
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
</script>
<?php
}
add_action( 'wp_footer', 'load_dimmer_script' );
What this does is this: If the menu toggle is defined as a button, when the menu is clicked the content of the page (#content) gets blurred. Click menu toggle again, it goes unblurred.
See nova-energy.net
Here's the one piece of CSS needed:
#content.alt {
filter: blur(4px) !important;
}
You have to wrap the JS code:
jQuery(document).ready(function($) {
// your code
)};
Previous post which lead to this issue: Fullcalendar using resources as a function with select menu
Based on my previous post, I have an issue using fullcalendar 4. When I am using resources as a function, my all-day blocks do not line up with my scheduler time slots. You can see it in the picture.
Here's my resources function:
resources: function(fetchInfo, successCallback, failureCallback) {
// Filter resources by whether their id is in visibleResourceIds.
var filteredResources = [];
filteredResources = resourceData.filter(function(x) {
return visibleResourceIds.indexOf(x.id) !== -1;
});
successCallback(filteredResources);
},
Here's my toggleresource function:
// menu button/dropdown will trigger this function. Feed it resourceId.
function toggleResource(resourceId) {
visibleResourceIds = [];
//if select all... see if undefined from loading on initial load = true
if ((resourceId == '') || (resourceId === undefined)) {
$.map( resourceData, function( value, index ) {
visibleResourceIds.push(value.id);
});
}
var index = visibleResourceIds.indexOf(resourceId);
if (index !== -1) {
visibleResourceIds.splice(index, 1);
} else {
visibleResourceIds.push(resourceId);
}
calendar.refetchResources();
Other related code (when the menu changes, the resources of the selected menu item show only in fullcalendar):
var resourceData = [];
var visibleResourceIds = [];
$.getJSON('ajax_get_json.php?what=schedule_providers_at_location',
function(data) {
$.each(data, function(index) {
resourceData.push({
id: data[index].value,
title: data[index].text
});
});
});
$('#toggle_providers_calendar').change(function() {
toggleResource($('#toggle_providers_calendar').val());
});
The resources show/hide just fine based on the selected menu resource, but look at the allday blocks - they don't line up after the resources are refetched for some reason. They correct themselves as the user navigates the scheduler though!
UPDATE BELOW
After looking around it looks like when refetchevents is called, the class .fc-week loses the following css:
style="border-right-width: 1px; margin-right: 20px;"
Here's a full pic of the calendar on initial load:
After I click a one of the navigation arrow, the all-day lines meet up with the rest of the calendar times because that style is applied to .fc-week.
I don't have any special css applied to the calendar and I am not using any themes that would get rid of this: at least not that I see now.
Here's the html that houses the calendar:
<div class="portlet-body">
<div class='loader'></div>
<div class="row">
<div id="calendar_full" style="padding-left: 10px; padding-right: 15px;"></div>
</div>
</div>
In order to fix this, I can add this following line after the resources are refetched in my toggleResources function:
$('#calendar_full .fc-week').css('border-right-width', '1px').css('margin-right', '20px');
I am going to keep looking as to why this css disappears after the resources are refetched. I wonder if it could be a glitch?
I'm working in meteor trying to use a reactive var to switch the content in the main panel between two tabs. I've been able to test the content successfully on it's own so I'm fairly confident the issue lies in the reactive var code. Specifically I think the issue is with the tab: function() but after many searches and reading documentation I haven't found a solution.
The relevant js:
Template.content.onCreated( function() {
this.currentTab = new ReactiveVar('form');
});
Template.content.helpers({
tab: function() {
return Template.instance().currentTab.get();
}
});
Template.content.events({
'click .nav li': function (event, template) {
var currentTab = $( event.target ).closest( "li" );
currentTab.addClass( "active" );
$( ".nav li" ).not( currentTab ).removeClass( "active" );
Template.currentTab.set();
}
});
The relevant html:
<template name ="content">
<ul class ="nav">
<li data-template="form">Form</li>
<li data-template="results">Results</li>
</ul>
{{ > Template.dynamic template=tab}}
</template>
{{ > Template.dynamic template=tab}}
This is calling the tab helper to get a string that is the name of the template you want to show here. It should work the first time because you start out by setting the value of currentTab to "form".
To change the template that gets shown, you need to change the value of currentTab to a string matching the name of the new template. You're not doing that.
Template.currentTab.set();
This is where you should be doing that. Instead you're calling set() on the currentTab property of Template, which I don't think exists. Template with a capital T is a Meteor object, not the template instance that I think you're trying to refer to. And to set a new value for currentTab, you actually need to provide a value. Like so:
Template.content.events( {
'click .nav li': function(event, instance) {
//logic to decide which template you want to show
//and put the name of that template in templateName
instance.currentTab.set(templateName)
}
});
If I have the following in my Ractive template:
<span on-click='handleClick'>click me</span>
Then I can listen for the click with this:
app.on({
handleClick:function() {
alert("clicked!") ;
}
})
But lets say I have that same markup stored in a string variable called clicklyspan:
app.set("clicklyspan", "<span on-click='handleClick'>click me</span>")
and I render it in the template using the triple-stash syntax:
{{{clicklyspan}}}
The handleClick listener no longer gets fired. Is there anything I can do to force some kind of update to the rendered template so that the listener works? Say, after I do that app.set() call?
Here's a fiddle demonstrating the problem.
Thanks,
Dave
I have never used Ractive, but I did some research and it seems you have to use partials, like this:
var app = new Ractive({
el: 'container',
template: '#template',
data: {
myFunction: function() {
var template = '<a on-click="handleClick">I can now be clicked as well!</a>';
if (!this.partials.myFunction) {
this.partials.myFunction = template;
}
else {
this.resetPartial('myFunction', template);
}
return 'myFunction';
}
}
});
You will also need to use this instead of the triple mustache:
{{> myFunction() }}
Here's the corresponding jsfiddle.
Of course, replace myFunction with whatever name you like.
Related question I found useful:
RactiveJS events on tripple mustache
I am using a decorator for some sliders like the following:
content = new Ractive({
el: '.wrapper',
template: templates.wrapper,
partials: templates,
data : { ... },
decorators: {
carousel: function( node )
{
console.log( 'carousel init' );
carousel = $( node ).owlCarousel({
items: 1,
navigation: false
});
return {
teardown: function () {
console.log( 'carousel destroy' );
carousel.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
carousel.find('.owl-stage-outer').children().unwrap();
}
}
}
}
}
What happens is that, as you can see in the logs, when swapping between a template which has inited the carousel to another template that has this decorator as well, the first decorator teardown is being triggered after the new template's decorator is initiated, therefore the carousel on the second template gets torn down and not the one in the first template.
Am I doing something wrong ? Thanks !
UPDATE
I have made a jsfiddle for it here : https://jsfiddle.net/05sq8o2k/6/
Make sure to tap load unsafe scripts if you get the warning because ractivejs cdn does not support https as far as I can see so jsfiddle kind of disagrees with it now.
This seems fixed in the next version of Ractive. Update your fiddle to use: https://cdn.ractivejs.org/edge/ractive.min.js
Kind regards
Bob