Meteor Bootstrap 3 Form does not Submit - meteor

I'm working with meteor#1.1.10 and twbs:bootstrap#3.3.5
I can get a modal window to spawn, close, and register a button has been clicked. I cannot get it to read any information from a form though. It just closes. I included a console message and it never shows up to either the browser or the command prompt.
Is there a way to do this without including another package? I've included my modal HTML template and Javascript. I'm hoping it's just something missed in the code.
Below is the HTML:
<template name="emodal">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Spends Email Details</h4>
</div>
<div class="modal-body">
<form class="emailspends">
<label for="input">Recipient:</label>
<input type="text" name="emailto" required>
<label for="input">Character Name:</label>
<input type="text" name="charname" required>
<input type="submit" id="sendemail" class="email" value="Email Spends" data-dismiss="modal">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</template>
Below is the Javascript:
Template.emodal.events({
"submit .emailspends": function (event) {
console.log(Meteor.user().emails[0].address);
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
//var emailto = event.target.emailto.value;
var emailto = event.target.emailto.value;
var charname = event.target.charname.value;
var title = "Experience spends for " + charname;
Meteor.call('sendEmail', emailto,
'zbottorff#uwalumni.com', title,
'Yup, modal testies.');
// Clear form
event.target.emailto.value = "";
event.target.charname.value = "";
}
});
Update: Realized I should include this, but I did make sure I could get a submit-able template without it being in a modal window. Now I want to turn it into a modal and it's not submitting.

Bah! I found it just after I posted this.
I had too many parts to my submit button. I removed the "Class" and "id" parts, changed my Javascript to look for a 'submit form' event instead. Voala! Got the bugger to work.

Related

Materialize css modal validation

I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server.
In that form I am checking if all fields are having value.
<form>
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
</div>
The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.
Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.
User Submits form
We check the form
We feedback to user
Depending on the results of 2, we may either go back to step 1, or on to step 3.
Modal Structure:
<div id="modal1" class="modal">
<div class="modal-content">
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
<span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
</div>
</div>
<div class="modal-footer">
<a id="submit-button" href="#!" class="btn">Submit</a>
close
</div>
</div>
We add optional helper-text span for user feedback, as per the documentation.
The Javascript:
document.addEventListener('DOMContentLoaded', function() {
// init modal
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
// get button
var button = document.querySelector('#submit-button');
// Run our own function when clicked
button.addEventListener("click", checkForm);
// Function checks for input
function checkForm() {
var input = document.querySelector('#title');
if(input.value) {
// submit form
// add valid class to show helper
input.classList.add('valid');
// close modal
instances[0].close();
// clear form
input.value = '';
// remove valid class
input.classList.remove('valid');
} else {
// prompt user for input
input.classList.add('invalid');
}
}
});
We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.
The only thing you need to add to this is the actual form submission - so something like form.submit().
Codepen.

ASP.NET Core 2.2 Razor Pages - textarea not binding correctly in Chrome or IE

I had finally got SignalR to send messages to a textarea successfully on my razor page, but for some reason the only browser that works is Microsoft Edge (using W10) Neither IE or Chrome displays the messages.
I've tried almost everything I can think of but nothing is fixing the issue.
I also find that an alert bar does not work in IE, but works in Chrome & Edge. Bit disappointing to find the number of issues that appear to stem between different browser platforms...
When testing between Edge & Chrome, joining the SignalR group using Chrome I know does work because I see the join message in Edge, so it seems we're dealing with simply a binding issue using Chrome, but as said all the below functionality using Edge is working Ok for me, very strange...
Razor Page:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-8">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<label asp-for="SystemMapping" class="control-label"></label>
<select asp-for="SystemMapping" class="form-control" asp-items="ViewBag.SystemMappingID" name="group-name" id="group-name">
<option>Select</option>
</select>
</div>
<div class="col">
#*Spare column here!*#
</div>
</div>
<div class="row" style="margin-top: 1em">
<div class="col">
<label for="exampleFormControlTextarea1">Inbound Events</label>
<textarea class="form-control" rows="20" id="inboundTextArea" oninput="countCharInbound(this)"></textarea>
</div>
</div>
<div class="row" style="margin-top: 1em">
<div class="col-md-auto col-sm-auto">
<button type="button" class="btn btn-secondary" onclick="eraseTextInbound();">
Clear Window
<i class="fas fa-broom"></i>
</button>
<div class="mb-2 mb-md-0"></div>
</div>
<div class="col-md-auto col-sm-auto">
<button type="button" class="btn btn-secondary" id="join-group">
Connect
<i class="fas fa-play"></i>
</button>
<div class="mb-2 mb-md-0"></div>
</div>
<div class="col-md-auto col-sm-auto">
<button type="button" class="btn btn-secondary" id="leave-group">
Disconnect
<i class="fas fa-pause"></i>
</button>
<div class="mb-2 mb-md-0"></div>
</div>
</div>
Razor Page js script:
<script>
// Clear Window button Inbound.
function eraseTextInbound() {
document.getElementById("inboundTextArea").value = "";
document.getElementById("inboundTextArea").innerHTML = "";
}
// Clear Window button Inbound.
function eraseTextOutbound() {
document.getElementById("outboundTextArea").value = "";
document.getElementById("outboundTextArea").innerHTML = "";
}
// When textarea reached x no. chars, clear text.
function countCharInbound(val) {
var len = val.value.length;
if (len >= 10000) {
document.getElementById("inboundTextArea").value = "";
document.getElementById("inboundTextArea").innerHTML = "";
}
}
// When textarea reached x no. chars, clear text.34
function countCharOutbound(val) {
var len = val.value.length;
if (len >= 10000) {
document.getElementById("outboundTextArea").value = "";
document.getElementById("outboundTextArea").innerHTML = "";
}
}
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/systemEvents.js"></script>
SignalR js file script:
"use strict";
const connection = new
signalR.HubConnectionBuilder().withUrl("/messageHub").build();
// Function binds the Inbound messages received from
// SignalR to the inboundTextArea
connection.on("Send", function (message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var div = document.createElement("div");
// The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
//div.innerHTML = msg + "<hr/>"; // + "<hr/>" adds a line underneath each event message.
div.innerHTML = msg
document.getElementById("inboundTextArea").appendChild(div);
});
A partial solution here:
Changing the js script below has at least started showing the messages appear in Chrome as well as Edge, IE still not working though...
// Function binds the Inbound messages received from SignalR to the inboundTextArea.
connection.on("Send", (message) => {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
$("#inboundTextArea").val($("#inboundTextArea").val() + '\n' + msg);
});

Wordpress Plugin Fullcalendar not showing in bootstrap modal dialog

I am using WP Fullcalendar Plugin (https://wordpress.org/plugins/wp-fullcalendar/) on my website. It works fine as a shortcode placed on a normal page template. However I want it to work in a Bootstrap Modal Dialog box which is opened on clicking a link.
Here is my code of modal Dialog with Fullcalendar shortcode in it.
<!-- Modal -->
<div class="modal fade" id="myCalendarModal" tabindex="-1" role="dialog" aria-labelledby="myCalendarModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myCalendarModalLabel">Modal title</h4>
</div>
<div class="modal-body"><?php echo do_shortcode( ' [fullcalendar] ' ); ?></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And here is the link to open this dialog box
<a class="open-cal" href="#" data-toggle="modal" data-target="#myCalendarModal">Open Calendar</a>
Now when I open the modal dialog box it does not load the calendar and only shows the loader spinning and spinning.
As suggested in answers like this one, Full calendar not showing inside bootstrap modal, the solution like
$('#myCalendarModal').on('shown.bs.modal', function () {
$(".wpfc-calendar").fullCalendar('render');
});
is not feasible here because the fullCalendar function needs to be passed the "fullcalendar_args" which is set in a footer hook and the related javascript file is located within the plugin files.
Any suggestion to make it work without hacking core plugin files?
Yes I have had to hack the core plugin inline.js file, as there is no other option right now.
1.You have to declare the "fullcalendar_args" variable as global
In line 4 of /includes/js/inline.js, Change
var fullcalendar_args = {
to
fullcalendar_args = {
2.Comment out 90 and 91 lines in the same file
/*
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
$('.wpfc-calendar').first().fullCalendar(fullcalendar_args);
*/
And then
3.Call these two lines in the page template where you have modal to be called, such as:
$('#myCalendarModal').on('shown.bs.modal', function () {
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
});
After this has been done, if wanted to show normal calendar on any other page, you may have to call the following two lines where ever you want calendar to appear, such as in footer or something, based on a condition etc.
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
It would be good if further updates to WP Fullcalendar Plugin incorporate these changes based on a shortcode argument or something similar approach.

Getting a meteor modal to be dynamic

I'm working w/ a modal template (maybe I shouldn't be?). On screen, I have a list of products. When a user clicks on a product, I want the modal to open w/ details of that given product.
Right now, what I'm trying to do is update the subscription of the modal. However, the OnCreate() and OnRender() are not firing when the modal opens. Right now the rendered, OnRender, created, and onCreated of the modal all fire when the parent template (the product list) is first opened. I need it to happen when a product is clicked and the modal is shown.
Am I attacking this wrong? Or do I just need to position my subscription somewhere else in the modal?
(adding code - very simple)
<template name="parent">
...
<div class="row form-row">
<div class="col-sm-12 text-right">
<a class="btn btn-outline" type="button" id="remove">Remove</a>
</div>
</div>
{{> productEditModal}}
</template>
<template name="productEditModal">
<div class="modal inmodal" id="productEditModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
...
Template.parent.events({
...
"click #aEditProduct": function (e) {
e.preventDefault();
Session.set("productId", this._id);
$('#productEditModal').modal('toggle');
$('#productEditModal').modal('show');
Template.productEditModal.onRendered(function() {
var self = this;
self.autorun(function() {
self.subscribe("products", Session.get("bid"), function() {
var bProduct = BoardProducts.findOne(Session.get("productId")); // some reactive operation
// do fun stuff with thing
});
});
});
ok, here is how I would approach this, assuming you did meteor add peppelg:bootstrap-3-modal
parent template: loop over products and display preview
<template name="parent">
{{#each products}}
{{name}}
{{pic}}
etc...
<a class="btn show-details" type="button">show details</a>
{{/each}}
</template>
create a details modal
<template name="productDetailsModal">
<div class="modal" id="productDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Details for product {{name}}
...
parent template helper to return products cursor:
Template.parent.helpers({
products() {
return Products.find();
},
})
the event to show details modal for every product
Template.parent.events({
'click .show-details'() {
Modal.show('productDetailsModal', this);
},
})
I wrote this off the top of my head and did not test it. Let me know if it works for you.

AngularJS in ASP.NET MVC Partial View

I am currently loading Partial View returned by MVC controller to a bootstrap model via AngularJS $http.get call. My View in rendered properly in modal dialog, but the only problem is that my partial view which is rendered also uses angular and for some reason angular is not working in my partial view, but if the i convert the same partial view to a normal view it works properly.
Partial View Code:
#{
ViewBag.Title = "Add Article Types";
}
//other scripts files e.g app.js and angular.js are included in main layout file.
<script src="~/Scripts/Angular/ArticleTypeController.js"></script>
<div class="modal-content" ng-controller="ArticleTypeController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
Add New Article Type
</div>
<form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid && Add(model)">
<div class="modal-body">
<div class="form-group">
<label for="ArticleType" class="control-label">Article Type</label>
<input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" />
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="Add" >Add</button>
{{ArticleTypeForm.$valid}}
</div>
</div>
Controller to load modal with the partial view.
MenuController.js
angular.module('myApp').controller('MenuController', [
'$scope', '$http', 'httpPreConfig', function ($scope, $http, httpPreConfig) {
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")//returns the partial view.
.success(function (response) {
ShowModal(response);//it properly shows the modal. but angular doesn't work
});
}
}]);
As you can see from the image below that angular expression is not being evaluated.
Any help would be really appreciated.
Just so that you know, angular expressions etc. are working in normal views.
Perhaps the view you're returning is not compiled by Angular. Try compiling it before displaying it in the modal by the $compile service and linking to a correct scope:
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")
.success(function (response) {
$compile(response)($scope);
ShowModal(response);
});
}
But actually, this is not the right thing to do in the Angular world. IMO it would be better to use ng-include to load your content inside the modal and then show it to the user.

Resources