<div class="close" on-click='close'></div>
Ractive.components['block:close'] = Ractive.extend({
isolated: true,
onrender: function() {
this.on({
close : function(event) {
console.log('close');
}
})
}
});
When trying to click on the 'x' button, it doesn't show "close" in console.log.
Not sure why it is not doing anything.
Also looked up ractivejs on google for the animation (fade out) when click close. Couldn't find a way without using JQuery
Not quite sure what's going on in your example - this works fine!
Ractive.components['block:close'] = Ractive.extend({
isolated: true,
template: '<div class="close" on-click="close">click me</div>',
onrender: function() {
this.on({
close: function(event) {
alert('it works');
}
});
}
});
var ractive = new Ractive({
el: 'main',
template: '<block:close/>'
});
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<main></main>
To add fades and other transitions, you need to use transition plugins. For example:
new Ractive({
el: 'main',
template: '#template'
});
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src='https://rawgit.com/ractivejs/ractive-transitions-fade/master/dist/ractive-transitions-fade.js'></script>
<main></main>
<script id='template' type='text/html'>
<label>
<input type='checkbox' checked='{{visible}}'>
visible (click me)
</label>
{{#if visible}}
<div intro='fade'>this will fade in</div>
{{/if}}
</script>
See the ractive-transitions-fade GitHub repo for more info.
Related
How can I make the checkbox checkbox enabled by default? here is the code
<label class="checkbox woocommerce-form__label woocommerce-form__label-for-checkbox checkbox" data-automation-id="woo-commerce-subscription-opt-in">
<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="mailpoet_woocommerce_checkout_optin" id="mailpoet_woocommerce_checkout_optin" value="1"> I have read and agree to the site terms and conditions *<span class="optional">(necessarily)</span></label>
Solution found thanks to #Eduhud Here is the code:
<script type="text/javascript">
jQuery( function($) {
$( document ).ready(function() {
setTimeout(function() {
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
}, 500);
var checkout_is_updated = false;
$('form.checkout').on('change', 'input[name="payment_method"]', function(){
$(document.body).trigger('update_checkout');
$( document.body ).on( 'updated_checkout', function(){
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
});
});
});
});
</script>
Just add checked
<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="mailpoet_woocommerce_checkout_optin" id="mailpoet_woocommerce_checkout_optin" value="1" checked>
<script>
(function($) {
jQuery('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
})(jQuery);
</script>
If you have access to the html structure, the answer of #Ali jezzni should work, just add checked to the <input> field.
In your case:
<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="mailpoet_woocommerce_checkout_optin" id="mailpoet_woocommerce_checkout_optin" value="1" checked>
If you do not have access to the html structure, a good option is using jQuery to change the element once the page is loaded, as #Rakesh Sharma explains by targeting the element and using the .prop('checked', true) function of jQuery.
In your case:
<script type="text/javascript">
jQuery( function($) {
$( document ).ready(function() {
setTimeout(function() {
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
}, 500);
var checkout_is_updated = false;
$('form.checkout').on('change', 'input[name="payment_method"]', function(){
$(document.body).trigger('update_checkout');
$( document.body ).on( 'updated_checkout', function(){
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
});
});
});
});
</script>
I am having trouble making the jQueryUI selectmenu work in a Meteor app when the options are dynamic. I am using:
Meteor 1.4.1
jQuery 2.2.4
jQueryUI 1.11.4
lodash 4.15.0
physiocoder said on a different question, "The Meteor reactivity force you to choose who is in charge of DOM updates.".
I realize that this is fundamental to my problem here. Accordingly, there is no problem if a page/template can let Meteor load all the page content/data and then hand over DOM control to jQueryUI's widgets. However I have a case where I want to have my cake and eat it too -- I want to have Meteor reactively feed the options for a jQueryUI widget (specifically the selectmenu at the moment) but still let jQueryUI handle the styling/theming.
Initializing jQueryUI widgets in template onRendered functions works just fine, as does destroying jQueryUI widgets, as necessary, in template onDestroyed functions. Calling selectmenu('refresh') on the option template's onRendered function does refresh the selectmenu when new options are available. However, I cannot find anywhere I can effectively call refresh when options are reactively removed such that the selectmenu is refreshed to the new, correct UI state -- not at the end of the event which changes the Meteor data context, not on the option template's onDestroyed function, and not a Tracker.autorun function tied to the appropriate data source.
HTML:
<head>
<title>Proof of Concept</title>
</head>
<body>
<div id="myApp">
{{> myForm}}
</div>
</body>
<template name="myForm">
<div>
<div id="selectedEntries">
<h3>Selected Entries</h3>
<ul class="display-list">
{{#each entry in selectedEntries}}
{{> myForm_entry entry}}
{{/each}}
</ul>
</div>
<br/>
<form id="includeEntry">
<select name="entryToInclude" id="entryToInclude">
{{#each potentialEntry in availableEntries}}
{{> myForm_option potentialEntry}}
{{/each}}
</select>
<input type="submit" value="Include Entry">
</form>
</div>
</template>
<template name="myForm_entry">
<li>
<div class="button removeEntry" data-id="{{_id}}">X</div>
<span>{{name}}</span>
</li>
</template>
<template name="myForm_option">
<option value="{{_id}}">{{name}}</option>
</template>
JavaScript:
Template.myForm.helpers({
availableEntries: function () {
return _.filter(Session.get('someEntries'), function(o) {
return Session.get('selectedEntryIds').indexOf(o._id) == -1;
});
},
selectedEntries: function () {
return _.filter(Session.get('someEntries'), function(o) {
return Session.get('selectedEntryIds').indexOf(o._id) != -1;
});
}
});
Template.myForm.events({
'submit #includeEntry': function (event) {
event.preventDefault();
if (_.isEmpty(Session.get('selectedEntryIds'))) {
Session.set('selectedEntryIds', [$('#entryToInclude').val()]);
} else {
let selectedEntryIds = Session.get('selectedEntryIds');
selectedEntryIds.push($('#entryToInclude').val());
Session.set('selectedEntryIds', selectedEntryIds);
}
$('#entryToInclude').selectmenu('refresh')
},
'click .removeEntry': function (event) {
event.preventDefault();
let selectedEntryIds = Session.get('selectedEntryIds');
selectedEntryIds = _.pull(selectedEntryIds, $(event.target).parent().attr('data-id'));
Session.set('selectedEntryIds', selectedEntryIds);
}
});
Template.myForm.onCreated(function () {
let someEntries = [{
_id:'1',
name:'One'
},{
_id:'2',
name:'Two'
},{
_id:'3',
name:'Three'
},{
_id:'4',
name:'Four'
},{
_id:'5',
name:'Five'
},{
_id:'6',
name:'Six'
}];
Session.set('someEntries', someEntries);
Session.set('selectedEntryIds', []);
});
Template.myForm.onRendered(function () {
$('#entryToInclude').selectmenu();
$('input:submit').button();
});
Template.myForm_entry.onRendered(function () {
$('.button').button();
});
Template.myForm_option.onRendered(function () {
if ($('#entryToInclude').is(':ui-selectmenu')) {
$('#entryToInclude').selectmenu('refresh');
}
});
Template.myForm_option.onDestroyed(function () {
$('#entryToInclude').selectmenu('refresh');
});
Tracker.autorun(function () {
if (Session.get('selectedEntryIds')) {
if ($('#entryToInclude').is(':ui-selectmenu')) {
$('#entryToInclude').selectmenu('refresh');
}
}
});
The #entryToInclude selectmenu continues to include the entry that was just selected; selecting a second entry numbered as high or higher actually selects the subsequent entry (e.g. selecting 4 then 5 actually selects 4 and 6) except that selecting the last entry immediately after a successful selection does nothing but refresh the selectmenu.
Adding a refresh to the entry template's onRendered function makes this work.
Template.myForm_entry.onRendered(function () {
$('.button').button();
if ($('#entryToInclude').is(':ui-selectmenu')) {
$('#entryToInclude').selectmenu('refresh');
}
});
But a better approach to the entire problem would be appreciated.
I'm still new to Meteor. I'm creating a Meteor JS project and one of the central features of it is image upload or more like a featured image upload. The upload works fine and after clicking on submit it will show on my <div class="viewing">. The problem occurs when you restart Meteor. The image will be deleted and thus no image is displayed by the time I run the program.
Here's my code:
The HTML:
<body>
{{> viewPost}}
<h1>Welcome to Meteor!</h1>
{{> addPost}}
</body>
<template name="addPost">
<form class="main-form">
<input type="text" name="title"/>
<br><br>
<input type="file" name="imgUp" class="fileIn"/>
<br><br>
<button>Submit</button>
</form>
</template>
<template name="viewPost">
{{#each images}}
<div class="viewing">
<img src="{{this.url store='images'}}"/>
</div>
{{/each}}
</template>
JS:
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images",{path: "~/uploads"})],
filter: {
allow: {
contentTypes: ['image/*'] //allow only images in this FS.Collection
}
}
});
if (Meteor.isClient) {
Template.addPost.events({
'submit .main-form': function(event, template){
var title = event.target.title.value;
event.preventDefault();
var fileObj = template.find('input:file');
Images.insert(fileObj.files[0], function (err,fileObj){});
}
});
Template.viewPost.helpers({
images: function(){
return Images.find({});
}
});
}
Please tell me what I am doing wrong here. Any help would be great! I've been looking for a way to solve this for a few days already.
I'm having issues finding a way to update the UI AFTER adding to a collection. So in the example below after you click the button and add to the collection an additional input is added to the DOM. All good, but i'd like to find a way to target the new input element and preferably give it focus in addition to CSS. Unfortunately I can't find any info that helps solve this AFTER the DOM's been updated. Any ideas? Thanks
<body>
{{> myTemplate}}
</body>
<template name="myTemplate">
{{#each myCollection}}
<input type="text" value="{{name}}"><br>
{{/each}}
<br>
<button>Click</button><input type="text" value="test" name="testBox">
</template>
test = new Meteor.Collection("test");
if (Meteor.isClient) {
Template.myTemplate.rendered = function()
{
console.log("rendered");
this.$('input').focus()
}
Template.myTemplate.helpers({
'myCollection' : function(){
var testCollection = test.find({});
console.log("helpers");
return testCollection;
}
});
Template.myTemplate.events({
'click button': function(event){
event.preventDefault();
var val = $('[name="testBox"]').val();
console.log("events");
return test.insert({name: val});
}
});
}
Turn what you're adding into a template and call that template's rendered to set the needed css or do whatever transforms are needed.
HTML:
<body>
{{> myTemplate}}
</body>
<template name="item">
<input type="text" value="{{name}}"><br>
</template>
<template name="myTemplate">
{{#each myCollection}}
{{> item this}}
{{/each}}
<br>
<button>Click</button><input type="text" value="test" name="testBox">
</template>
JS:
test = new Meteor.Collection("test");
if (Meteor.isClient) {
Template.myTemplate.onRendered(function() {
console.log("rendered");
this.$('input').focus()
});
Template.myTemplate.helpers({
'myCollection' : function(){
var testCollection = test.find({});
console.log("helpers");
return testCollection;
}
});
Template.myTemplate.events({
'click button': function(event){
event.preventDefault();
var val = $('[name="testBox"]').val();
console.log("events");
test.insert({name: val});
}
});
Template.item.onRendered(function() {
this.$('input').focus();
}
}
On a side note, you should use onRendered instead of rendered as the latter has been deprecated for the former.
Do it inside of your myCollection helper function. Use jquery to target the last input in your template and focus it, add css. Meteor's template helpers are reactive computations based on the DOMs usage of their reactive variables, so it will run each time the DOM updates based on your collection.
I need help for i had develop the modal dialogbox using meteorJs it is not working when ever click the add client button open a dialog box but it is not working please check where i did a mistake, here is my code below.
template:
<template name="shedule">
<button class="btn btn-success addClients">Add Client</button>
</template>
Js code:
Session.setDefault('showclientDialog', false);
template.shedule.events({
'button #addClient':function(e,t){
console.log("You pressed Add Client button");
e.preventDefault();
Session.set('showclientDialog' , true);
}
});
template.shedule.showclientDialog = function(){
return Session.get('showclientDialog');
}
I believe this should work for you:
template:
added an if block to check the session variable
<template name="shedule">
<button class="btn btn-success addClients">Add Client</button>
{{#if showclientDialog}}
<div class="clientDialogue">Client Dialoge</div>
{{/if}}
</template>
Js code:
fixed the event map to check for correct selector
Session.setDefault('showclientDialog', false);
Template.shedule.events({
'click .addClients':function(e,t){
console.log("You pressed Add Client button");
e.preventDefault();
Session.set('showclientDialog' , true);
}
});
Template.shedule.showclientDialog = function(){
return Session.get('showclientDialog');
}