I am showing datepicker control using bootstrap-datepicker I want to call one custom javascript event before open the datepicker popup
I did the code like bellow
var date = $(id).datepicker({});
$(date).on('show.bs.modal', function (e) {
e.stopPropagation();
}).on('hide.bs.modal', function (e) {
e.stopPropagation();
});
}
$(date).on('show',function (e) {
alert(1);
return;
});
When I open the datepicker the allert message '1' was keep on showing.
$(document).ready(function(){
var dateObj =$('#DOB').datepicker()
$(dateObj).on('show.bs.modal', function (e) {
e.stopPropagation();
}).on('hide.bs.modal', function (e) {
e.stopPropagation();
});
$(dateObj).on('show', function (e) {
alert(1);
return;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="form-group required">
<label class="control-label" for="DOB">Normal Date<span></span> </label>
<input class="form-control input-singleDate calendarIcon" id="DOB" name="DOB" placeholder="Select Date" type="text">
</div>
What's happening is you are focusing on alert and then the focus is shifted to the datetime picker triggering the event again.
If you change the alert to console.log(1); It will fire correctly.
Related
I am having collection issues in my Meteor project. I added the following code to my Resolutions.js file:
Resolutions = new Mongo.Collection('resolutions');
if (Meteor.isClient) {
Template.body.helpers({
resolutions: function() {
Resolutions.find({});
}
});
Template.body.events({
'submit .new-resolution': function(event) {
var title = event.target.title.value;
Resolutions.insert({
title: title,
createdAt: new Date()
});
event.target.title.value = "";
return false;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
and added the following to my Resolutions.html file:
<head>
<title>Resolutions</title>
</head>
<body>
<div class="container">
<header>
<h1>Monthly Resolutions</h1>
<form class="new-resolution">
<input type="text" name="title" placeholder="A new resolution" />
<input type="submit" value="Submit"/>
</form>
</header>
<ul>
{{#each resolutions}}
{{> resolution}}
{{/each}}
</ul>
</div>
</body>
<template name="resolution">
<li>{{title}}</li>
</template>
After running the app I get zero errors but still the site does not return any of the collection value. I have no clue what is wrong with this project.
Template.body.helpers({
resolutions: function() {
return Resolutions.find({});
}
});
You forgot to use the return keyword.Remember that when creating a helper, you always need to return a value.
I'm playing around with Meteor and react-meteor. However, I can't seem to grok how the template event-handling works when using react (if it even does).
index.html:
<head>
<title>reactjs</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> FormTest}}
</body>
lib/components/testform.jsx:
var FormTest = ReactMeteor.createClass({
templateName: "FormTest",
render: function() {
return (
<div>
<button className="my-button">My byutton</button>
</div>
);
}
});
index.js:
if (Meteor.isClient) {
Template.FormTest.events({
"click .my-button": function (event, template) {
alert("My button was clicked!");
}
});
}
I get nothing.
Is there something wrong with my code or my approach? If approach, what would be the proper way to handle events?
If you add an event handler here:
<button className="my-button" onClick={this.handleClick}>My button</button>
You can then do this in your testform.jsx file:
handleClick: function(e) {
if (Meteor.isClient) {
e.preventDefault();
console.log("My button was clicked");
}
}
I'm also testing React with Meteor, but this seems to work.
I am having a little bit of trouble outputting a image after a filepicker selection with the file picker plus package from meteor. How to I grab the uploaded image url or file path, so I can pass it into a form input and put it in a collection. Putting in into the collection isnt the part I am worried about its getting the path that I am having trouble with cheers.
All contained in postSubmit template.
I have a form with
<input type="filepicker" name="myName" />
and a img output in the same template
<img src="{{filepickerIdToUrl myName}}">
and a router file containg
Router.onBeforeAction(function(){
loadFilePicker('magickey');
//can leave out key if its in settings
this.next();
},{only:['postSubmit']});
Here is the full postSubmit template
<template name="postSubmit">
<form>
<label for="title">Title</label>
<input name="title" id="title" type="text" value="" placeholder="Name your post"/>
<button id="uploadImage" class="btn btn-info btn-sm"><i class="fa fa-upload"></i> Upload</button>
<input type="submit" value="Submit"/>
</form>
<img id="imagePreview" class="img-responsive" src="{{filepickerIdToImageUrl imageId placehold_it='500x350' h=200 w=300}}"/>
<button id="removeImage" class="btn btn-warning btn-sm"><i class="fa fa-trash-o"></i> Remove</button>
This is also my postSubmit events
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
image: $(e.target).find('[name=image]').val()
};
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('postPage', {_id: result._id});
});
}
});
Thanks to Nate and the google groups link above, I got it working.
Here is my solved code, Right now it only shows the preview on the form and you can remove it by clearing the session value, but it will be easy enough to grab that session value and put it into the form on submit.
Thanks again Nate.
Template.postSubmit.created = function(){
Session.setDefault("imageId", null);
Session.setDefault("imageKey", null);
};
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
image: $(e.target).find('[name=image]').val()
};
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('postPage', {_id: result._id});
});
},
'click #uploadImage':function(event, template){
event.preventDefault();
filepicker.pickAndStore(
{
mimetypes: ['image/gif','image/jpeg','image/png'],
multiple: false
},{
access:"public"
},
function(InkBlobs){
// the upload is now complete to filepicker - but the form hasnt persisted the values to our collection yet
Session.set("imageId", _.last(_.first(InkBlobs).url.split("/")));
Session.set("imageKey", _.first(InkBlobs).key);
// once the session changes are made, the form will now have the new values, including a preview of the image uploaded
},
function(FPError){
log.error(FPError.toString());
}
);
},
'click #removeImage':function(event, template){
event.preventDefault();
Session.set("imageId", "remove");
Session.set("imageKey", "remove");
}
});
Template.postSubmit.helpers({
'hideRemove':function(){
return Session.equals("imageId", null) || Session.equals("imageId", "remove");
},
'imageId':function(){
if(Session.equals("imageId", "remove"))
return "";
else
return Session.get("imageId") || "";
},
'imageKey':function(){
if(Session.equals("imageKey", "remove"))
return "";
else
return Session.get("imageKey") || "";
}
});
I successfully implemented a form with quill wysiwyg but now I want to create a component to reuse it. This is my working implementation:
<template name="form">
<form>
<div id="toolbar"> ... html with toolbar buttons </div>
<div id="editor"></div>
<input type="submit" value="save"/>
</form>
</template>
Template.form.rendered = function () {
this.quill = new Quill('#editor', {
modules: {
'toolbar': { container: '#toolbar' },
'link-tooltip': true
},
theme: 'snow' }
);
}
Template.form.events({
'submit form': function(e, tmpl) {
e.preventDefault();
var html = tmpl.quill.getHTML();
// code to save the form data
}
This is what I want to make it reusable. My questions are inside the code:
<template name="form">
<form>
{{> editor }}
<input type="submit" value="save"/>
</form>
</template>
<template name="editor">
<div id="toolbar"> ... html with toolbar buttons </div>
<div id="editor"></div>
</template>
Template.editor.rendered = function () {
this.quill = new Quill('#editor', {
modules: {
'toolbar': { container: '#toolbar' },
'link-tooltip': true
},
theme: 'snow' }
);
// How can I pass quill to the parent template?
}
Template.form.events({
'submit form': function(e, tmpl) {
e.preventDefault();
// How can I access quill variable on the nested template, so I can
// call quill.getHTML()?
}
Here's a pattern I use to solve this sort of problem. Define a class called Editor and a template editor. The intention is that the data context inside editor will be an instance of Editor.
function Editor() {
this.quill = null;
}
Template.editor.rendered = function () {
this.data.quill = new Quill(...);
}
<template name="editor">...</template>
Inside form's created callback, create an Editor and store it on the template instance. Then when you call out to the editor template, pass in the Editor instance as the data context.
Template.form.created = function () {
this.editor = new Editor();
}
Template.form.helpers({
editorInstance: function () {
return Template.instance().editor;
}
});
<template name="form">
<form>
{{> editor editorInstance }}
<input type="submit" value="save"/>
</form>
</template>
You can then define methods on the Editor prototype which can be called by the form:
Editor.prototype.getTextAsHTML = function () {
return this.quill && this.quill.getHTML();
}
Template.form.events({
"submit form": function(e, tmpl) {
e.preventDefault();
var html = tmpl.editor.getTextAsHTML();
// ...
}
}
This is a nice way to abstract the details of the editor so that the form doesn't need to know about it. You can reuse the editor and if you ever want to change it, you just have to make sure getTextAsHTML works the same.
If I have a template like this
<template name="my_form">
<form name="my_form">
<input name=" ....
</form>
</template>
I'd like to listen to the submit event of "my_form".
I tried this:
Template.my_form.events({
'submit form': function( event ){ // also tried just 'submit'
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
But no luck. It appears the event handler doesn't get registered. Is there something I'm missing?
p.s. I am aware that I can handle a form "submission" by listening to the submit button click event, but I need to use the form submit event in this specific scenario.
Doesn't seem like you are missing something. I was not able to reproduce your problem. When hitting return while the textinput has focus the console prints 'Submitting form!' as expected.
My code, just two files:
form.html:
<head>
<title>form</title>
</head>
<body>
{{> my_form}}
</body>
<template name="my_form">
<form name="my_form">
<input></input>
</form>
</template>
form.js
if (Meteor.isClient) {
Template.my_form.events({
'submit form': function( event ){ // also tried just 'submit', both work for me!
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
}
You can use general listener for it.
$("my_form").submit(function (e) {
e.preventDefault();
});
You can create a single submit form event, and you conditionally check the event target field. Call appropriate Meteor method based on the collection you are inserting into.
Template.detailsViewTemplate.events({
'submit form': function(ev){
ev.preventDefault();
var detail_input_field = template.$('#detail_entry');
var message_input_field = template.$('#message_entry');
if(detail_input_field != undefined){
var detailFormData = {
detail: $(ev.target).find('[name = detail]').val(),
parentId: $(ev.target).find('[name = parentId]').val(),
checkboxStatus: ''
}
Meteor.call('addDetail', detailFormData);
$('.form-group').children().val('');
} else if(message_input_field != undefined){
var newMessageData = {
listId: this.params_id,
message: $(ev.target).find('[name = message]').val()
}
Meteor.call('addMessage', newMessageData);
$('.form-group').children().val('');
}
}
}