I'm working with my classmate on a project (https://github.com/samrent/tagCurator) where everyone could assign tags to random memes. This kind of folksonomy must help find relative-content over tags using a searchbar.
We are actually stuck at the input step as we cannot find a way for MangoDB to update the database when a new tags is putted, as you can see in the code below. Thank you for your help.
import { Template } from 'meteor/templating';
import { ImgCollection } from '../api/ImgCollection';
import './imageModule.html';
Template.imageModule.helpers({
Image() {
return ImgCollection.find();
},
});
Template.imageModule.events({
"submit .addTag"(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
const target = event.target;
const text = target.text.value;
// Insert a task into the collection
ImgCollection.update({
tag: text,
});
// Clear form
target.text.value = '';
}
})```
Related
I'm working with form that consists of multiple pages and I want to solve validation.
When I hit Submit button all fields on the present page shows error messages beneath, but if I change the page then I need to hit submit again because these fields weren't set as touched.
My problem would be solved if I could for example set all fields on the page as touched, once the form has flag anyTouched: true.
I'm using redux-form: '^6.0.0-rc.4' and I have one container where I include redux-form and multiple components consisting of fields.
I think your problem was the opposite way around, but in case anyone lands here as I did looking for a way to have anyTouched set after any field in the form is touched...
In redux-form 6 and above you have to explicitly choose the behaviour you want with the form-level configurations touchOnChange and touchOnBlur - see the docs here - by default nothing is configured and so nothing happens.
const Form = reduxForm({
form: 'my-form',
touchOnChange: true,
touchOnBlur: true
})(...)
These flags make it so that any given field is marked as touched (and therefore anyTouched is marked true on the form) when that field's onChange or onBlur handler is called, respectively.
I should have looked better:
Redux form returns touch as a prop to the component. The function takes names of fields as a parameter, so I'm checking in componentWillUpdate when submitFailed will change and then I'm gonna touch all fields that are not valid.
componentWillUpdate(nextProps) {
const {
formName: { syncErrors },
submitFailed,
touch
} = this.props
if (submitFailed !== nextProps.submitFailed) {
const toTouch = []
for (const key in syncErrors) {
syncErrors.hasOwnProperty(key) && toTouch.push(key)
}
touch(...toTouch)
}
}
In redux-form 7.4.2. This can be achieved by checking to see if the form is valid.
If valid you can can load one of your other pages.
If the form is not valid, use reduxForms getFormSyncErrors selector and pass in the keys returned by this object to the reduxForm touch property.
import React, { Component } from 'react'
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm, getFormSyncErrors } from 'redux-form';
class MyComponent extends Component {
...
this.props.valid ?
// navigate away
: this.props.touch(...Object.keys(this.props.formErrors))
...
}
function mapStateToProps(state) {
return {
formErrors: getFormSyncErrors('myForm')(state)
}
}
export default compose(
connect(mapStateToProps, null),
reduxForm({form: 'myForm'})
)(MyComponent)
On the add page of a new Plone Page i want to suggest a title to the user derived from the Folder title by adding it into the title form field.
What is the best practice on implementing that behavior in my Plone instance?
An alternative solution can be to use Javascript, respectively jQuery:
(function($) { $(document).ready(function() {
// A Dexterity-based document is added:
if( window.location.href.endsWith('/++add++Document') ) {
// Grab the parent's title of the current title-tag's content:
var title = $('title')[0].innerHTML.split(' — ')[0]
// Prefill the new document's title-field with the parent's title:
$('#form-widgets-IDublinCore-title').val(title)
}
// An Archetypes-based document is added:
if( window.location.href.indexOf('/portal_factory/Document/') > -1 ) {
var parentUrl= document.referrer
var parentTitleEleId = 'parent-fieldname-title'
// Provide ele to load parent's title into:
var loadEle = document.createElement('span')
// Load parent's title into ele:
$(loadEle).load(parentUrl + ' #' + parentTitleEleId, function() {
// After loading finished, fetch parent-title of ele, remove
// trailing spaces and set it into the new doc's title-field:
$('#title').val(loadEle.childNodes[0].innerHTML.trim())
// Thy had served y'er purpose, vanish:
loadEle.remove()
});
}
});})(jQuery);
More to MonkeyPatching can you find in the Docs. Another solution is, you can register your own AddForm and set the Value of the Textline-Widget. To create a Custom AddForm look at the Docs
You can monkeypatch or subclass the Basic metadata behavior to modify the behavior of _get_title: https://github.com/plone/plone.app.dexterity/blob/master/plone/app/dexterity/behaviors/metadata.py#L350-L351
I'm currently rendering bootstrap modals on my webpage using MeteorJS's "renderWithData" method to load each template when it's needed.
I'm running into an issue where my helper methods which access the data in the modal using "Blaze.getData()" will occasionally return undefined and I'm unsure how to fix that.
The only way I've been able to replicate the issue is by constantly creating/destroying the modals and there doesn't seem to be anything that specifically causes the issue.
Here are the steps I've been taking:
1) I instantiate the modal with the proper data
Template.Courses.events({
'click .share-course': function (e,t) {
var courseID = $(e.target).data('courseid');
Template.instance().activeCourse.set(
createModalWithData(
{
currentInstance: Template.instance().activeCourse.get(),
template: Template.Enrollment_Generator,
dataToRender: {courseID: courseID}
}
));
$('#generateEnrollmentURL').modal('show');
}
});
Also, here is the code for "createModalWithData":
// Create a modal with a specific data context
// If modal template already exists, destroy
// and re-create with the new data context.
// If a location to render isn't specified, renders
// content in the body .
// Parameters: [Object] data { currentInstance : Template || null,
// template : Template,
// dataToRender : Object,
// (optional) location : Element
// Return: Blaze Template Instance
createModalWithData = function createModalWithData(data) {
// Ensure data exists
if (_.isUndefined(data) || _.isNull(data)) {
throw "data cannot be null or undefined";
}
// If modal already exists, destroy it
if (!_.isNull(data.currentInstance)) {
Blaze.remove(data.currentInstance);
}
// If location is undefined, set to page body
if (_.isUndefined(data.location)) {
data.location = document.body;
}
// Render modal with dataToRender
return Blaze.renderWithData(data.template,
data.dataToRender,
data.location
);
};
2) I attempt to retrieve the data using "Blaze.getData()" within my modal template
Template.Enrollment_Generator.onCreated(function() {
var courseID = Blaze.getData().courseID; // Occasionally undefined
Meteor.subscribe('enrollment-codes',courseID);
});
So far I've attempted to replace the "onCreated" method with "onRendered" but still had the same issue.
It turns out the issue was within the click event. I had a nested span element within my share-course button:
<small class="share-course" data-courseid="{{_id}}">
Share
<span class="glyphicon glyphicon-share"></span>
</small>
This was messing up the way I was targeting my embedded courseID
Instead of Blaze.getData(), I should have also been using Template.currentData() to retrieve the data within my template
As stated here: https://forums.meteor.com/t/blaze-getdata-question/5688
I did one sample Searchapp using meteor add sebdah:autocompletion package.When ever given inputs it shows drop down list.In this list how to get selected value as shown below code:
Js Code :
Friends = new Meteor.Collection('friends');
if (Meteor.isClient) {
/**
* Template - search
*/
Template.search.rendered = function () {
AutoCompletion.enableLogging = true;
var res = AutoCompletion.init("input#searchBox");
console.log("res :"+res);
}
Template.search.events = {
'keyup input#searchBox': function (e,t) {
AutoCompletion.autocomplete({
element: 'input#searchBox', // DOM identifier for the element
collection: Friends, // MeteorJS collection object
field: 'name', // Document field name to search for
limit: 0, // Max number of elements to show
sort: {name: 1}
});
}
}
}
I didn't get any idea about this.So please suggest me how to get selected drop down list values?
AutoCompletion package doesn't give any good API to read value on select. Instead you need to manually read the value of input#searchBox.
Please take a look at source code.
I would recommend to implement searching in your meteor app using Arunoda's approach : https://meteorhacks.com/implementing-an-instant-search-solution-with-meteor.html
I have the following template:
<template name="modalTest">
{{session "modalTestNumber"}} <button id="modalTestIncrement">Increment</button>
</template>
That session helper simply is a go-between with the Session object. I have that modalTestNumber initialized to 0.
I want this template to be rendered, with all of it's reactivity, into a bootbox modal dialog. I have the following event handler declared for this template:
Template.modalTest.events({
'click #modalTestIncrement': function(e, t) {
console.log('click');
Session.set('modalTestNumber', Session.get('modalTestNumber') + 1);
}
});
Here are all of the things I have tried, and what they result in:
bootbox.dialog({
message: Template.modalTest()
});
This renders the template, which appears more or less like 0 Increment (in a button). However, when I change the Session variable from the console, it doesn't change, and the event handler isn't called when I click the button (the console.log doesn't even happen).
message: Meteor.render(Template.modalTest())
message: Meteor.render(function() { return Template.modalTest(); })
These both do exactly the same thing as the Template call by itself.
message: new Handlebars.SafeString(Template.modalTest())
This just renders the modal body as empty. The modal still pops up though.
message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))
Exactly the same as the Template and pure Meteor.render calls; the template is there, but it has no reactivity or event response.
Is it maybe that I'm using this less packaging of bootstrap rather than a standard package?
How can I get this to render in appropriately reactive Meteor style?
Hacking into Bootbox?
I just tried hacked into the bootbox.js file itself to see if I could take over. I changed things so that at the bootbox.dialog({}) layer I would simply pass the name of the Template I wanted rendered:
// in bootbox.js::exports.dialog
console.log(options.message); // I'm passing the template name now, so this yields 'modalTest'
body.find(".bootbox-body").html(Meteor.render(Template[options.message]));
body.find(".bootbox-body").html(Meteor.render(function() { return Template[options.message](); }));
These two different versions (don't worry they're two different attempts, not at the same time) these both render the template non-reactively, just like they did before.
Will hacking into bootbox make any difference?
Thanks in advance!
I am giving an answer working with the current 0.9.3.1 version of Meteor.
If you want to render a template and keep reactivity, you have to :
Render template in a parent node
Have the parent already in the DOM
So this very short function is the answer to do that :
renderTmp = function (template, data) {
var node = document.createElement("div");
document.body.appendChild(node);
UI.renderWithData(template, data, node);
return node;
};
In your case, you would do :
bootbox.dialog({
message: renderTmp(Template.modalTest)
});
Answer for Meteor 1.0+:
Use Blaze.render or Blaze.renderWithData to render the template into the bootbox dialog after the bootbox dialog has been created.
function openMyDialog(fs){ // this can be tied to an event handler in another template
<! do some stuff here, like setting the data context !>
bootbox.dialog({
title: 'This will populate with content from the "myDialog" template',
message: "<div id='dialogNode'></div>",
buttons: {
do: {
label: "ok",
className: "btn btn-primary",
callback: function() {
<! take some actions !>
}
}
}
});
Blaze.render(Template.myDialog,$("#dialogNode")[0]);
};
This assumes you have a template defined:
<template name="myDialog">
Content for my dialog box
</template>
Template.myDialog is created for every template you're using.
$("#dialogNode")[0] selects the DOM node you setup in
message: "<div id='dialogNode'></div>"
Alternatively you can leave message blank and use $(".bootbox-body") to select the parent node.
As you can imagine, this also allows you to change the message section of a bootbox dialog dynamically.
Using the latest version of Meteor, here is a simple way to render a doc into a bootbox
let box = bootbox.dialog({title:'',message:''});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,MyCollection.findOne({_id}),box.find(".modal-body")[0]);
If you want the dialog to be reactive use
let box = bootbox.dialog({title:'',message:''});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,function() {return MyCollection.findOne({_id})},box.find(".modal-body")[0]);
In order to render Meteor templates programmatically while retaining their reactivity you'll want to use Meteor.render(). They address this issue in their docs under templates.
So for your handlers, etc. to work you'd use:
bootbox.dialog({
message: Meteor.render(function() { return Template.modalTest(); })
});
This was a major gotcha for me too!
I see that you were really close with the Meteor.render()'s. Let me know if it still doesn't work.
This works for Meteor 1.1.0.2
Assuming we have a template called changePassword that has two fields named oldPassword and newPassword, here's some code to pop up a dialog box using the template and then get the results.
bootbox.dialog({
title: 'Change Password',
message: '<span/>', // Message can't be empty, but we're going to replace the contents
buttons: {
success: {
label: 'Change',
className: 'btn-primary',
callback: function(event) {
var oldPassword = this.find('input[name=oldPassword]').val();
var newPassword = this.find('input[name=newPassword]').val();
console.log("Change password from " + oldPassword + " to " + newPassword);
return false; // Close the dialog
}
},
'Cancel': {
className: 'btn-default'
}
}
});
// .bootbox-body is the parent of the span, so we can replace the contents
// with our template
// Using UI.renderWithData means we can pass data in to the template too.
UI.insert(UI.renderWithData(Template.changePassword, {
name: "Harry"
}), $('.bootbox-body')[0]);