I want to insert textarea's into a form in meteor. This is the template I currently have:
template(name="guide_create")
.format-properly
form.form-horizontal(id="guideForm" method="POST" action="/create-guide")
.form-group
label.col-sm-2.control-label(for="title") Title
.col-sm-10
input.form-control(name="title" id="title")
.form-group
.col-sm-offset-2.col-sm-10
.checkbox
label
input(name="is_public" type="checkbox")
p Make your guide public
.form-group
label.col-sm-2.control-label(for="cards") Cards
.col-sm-10
input.form-control(name="cards" id="cards")
center
button.btn.btn-primary#add-section(style="margin-bottom: 15px;") New Section
each sections
+section
template(name="section")
textarea.new-section(type="text" uniqid=uniqid)
button.remove-section Remove
The first template, guide_create, has the form and the second template section includes the textarea. This is how I currently add my textarea's dynamically to the page:
Template.guide_create.onCreated(function() {
Session.set('sections', []); // on page load, set this to have no inputs
});
Template.guide_create.events({
'click #add-section': function () {
var sections = Session.get('sections');
var uniqid = Math.floor(Math.random() * 100000);
sections.push({uniqid: uniqid});
Session.set('sections', sections);
}
});
Template.guide_create.helpers({
sections: function () {
return Session.get('sections'); // reactively watches the variable
}
});
I hope this is possible somehow, and I want to have these textarea's now included in my form, that when I submit the form, the content of those textarea's is also submitted. The newly created textarea is currently outside of the form and I want to change that. Any help or suggestions are highly appreciated!
I believe your sections are appearing outside of you form because they are being added in the template outside of the form group. Try moving them up into the form group, something like this?
.form-group
label.col-sm-2.control-label(for="cards") Cards
.col-sm-10
input.form-control(name="cards" id="cards")
each sections
+section
center
button.btn.btn-primary#add-section(style="margin-bottom: 15px;") New Section
Related
I am creating a form in elementor using the form, I have a radio button by clicking it, some of the fields should unhide. How do I achieve it?
Below is the screenshot
The first thing to do is to correctly name the IDs in your elementor form.
Please name radio button's ID with same_as_shipping_address.
And in CONTENT -> Options please write this:
Same as shipping address|same_as_shipping_address
Ohters options 1|other_option_1 /* You have to write your own option */
Elementor will then create an input that will have a selector:
input[name="form_fields[same_as_shipping_address]"]
Then for all the elements to hide when the radio button is selected, give them an ID with _show_if_same_as_shipping_address at the end.
For example for the phone (if it has to be hidden) the ID will be phone_number_show_if_same_as_shipping_address
Elementor will then create a div with it as a class:
.elementor-field-group-phone_number_show_if_same_as_shipping_address
Now the goal is to check each change of input[name="form_fields[same_as_shipping_address]"] and display the fields that have like an ID with _show_if_same_as_shipping_address at the end.
We are going to use a jQuery script to do this.
If you don't have child theme, create one and use this jQuery code:
jQuery(document).ready(function ($) {
var radio = $('input[name="form_fields[same_as_shipping_address');
var toToggle = $("div[class*=_show_if_same_as_shipping_address]");
/* By default */
onRadioChange();
/* Function triggered when the visitor changes the status of the sending address */
radio.on("change", function (e) {
onRadioChange();
});
/* Action to be carried out */
function onRadioChange() {
if (getRadioVal()=== "same_as_shipping_address") {
toToggle.css('display', 'flex');
}
else {
toToggle.css('display', 'none');
}
}
function getRadioVal() {
return $('input[name="form_fields[same_as_shipping_address:checked').val();
}
});
I have been trying to display value of a datepicker in a div and two texboxes. I was able to do it in a normal PHP file however when i try to do it in a wordpress website. It is not happening The jquery code i am using is as follows:
jQuery(function() {
jQuery('#ui-datepicker-div').datepicker({
altField: '#wc_order_field_2563', //setting alternate field
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
If you want to see this in action you an see it on twomoms.kitchen checkout page. However this does not seem to work no matter what I do.
Please let me know what is it that i am doing wrong :(
the issue got resolved by changing the code above with the following code below. This modification was done as the datepicker was added using a plugin that adds any fields as required. Code below changes div and textbox using the change in other textbox.
jQuery(function() {
jQuery('#wc_order_field_2563').datepicker({
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
I am new for MeteorJs. Some one could you please provide info for form area text tag.I tried to add text area and tried to implement using with event.
I got answer from refer few docs.. below is the correct one
html:
JS:
Template.body.events({
"submit .new-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
var message=event.target.newMessage.value;
I have a form in a Meteor application that contains a list of radio buttons that is made accessible by a Bootstrap accordion. I have implemented a validation routing in meteor that inserts classes into the input elements to mark them as valid/invalid.
Problem is: Everytime a validation state of one input element changes, the template is redrawn and the currently open accordion closes.
I solved this by doing this clumsy approach:
Meteor.startup(function() {
// track collapse state of accordion....
$('.collapse').on('shown', function() {
Session.set(addBookingCollapse, $(this).attr('id'));
});
});
Template.addrecord.helpers({
openAccordion: function(accordion) {
if (Session.get(addBookingCollapse) == accordion) {
return 'in'
};
}
});
<div id="collapseOne" class="accordion-body
collapse {{openAccordion 'collapseOne'}}">
...and so on for the other four collapsible elements
But for whoever's sake, there must be a more elegant solution? I do not want to waste a session variable for this....
It may help to put the input elements in {{#isolate}}{{\isolate}} blocks to avoid re-rendering the entire template. See: Meteor Isolates
I haven't really looked super close at your code/problem, but why do you use id's to target each of them on their own? Why not use a class for all of them like this:
$('.a-class-that-you-name').on('shown', function() {
var thisSpecificId = $(this).attr('id');
Session.set('addBookingCollapse', thisSpecificId);
});
Would that work?
The Portlets in Plone are quite handy but I'd like to be able to provide some method to users to be able to temporarily hide/show the portlets column. That is, by clicking a button, the portlets column should collapse and you see the content page in full width. Then clicking again and the portlets panel on the left expands and the main content page width shrinks to accommodate.
I've observed the HTML ID of the portlets column is "portal-column-one" and I tried adding a button to the page that runs javascript to set the visibility property of that element to "hidden" but this seemed to have no effect. I was able to go into Firebug and add style="visibility:hidden;" to the "portal-column-one" element and it had the effect of making the region invisible w/o resizing the page.
I am using Plone 4.1. I have the site configured with navigation portlet on all pages except the main page which has Navigation, Review List and Recent Changes.
So it seems it must be possible to embed some javascript in the page (I was thinking of adding this to the plone.logo page which I've already customized). But I guess its more complicated than the few stabs I've made at it.
Thanks in advance for any advice.
Solution (Thanks to input from Ulrich Schwarz and hvelarde):
The solution I arrived at uses JavaScript to set CSS attributes to show/hide the Portlets Column (Left side) and expand the content column to fill the space the porlets column filled.
I started by customizing the Plone header template to add a link for the user to toggle the view of the Porlets column. I also put the necessary javascript functions in this header.
To customize the header, go to the following page (need to be logged in as Admin of your Plone site):
http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo
Where:
SERVER is the address and port of your site (e.g. localhost:8080)
SITE is the short name of your Plone Site
To create this page:
Go to Site Setup (as Admin)
Go to Zope Management Interface
Click on "portal_view_customizations"
Click on "plone.logo" (or at least this is where I choose to put the button so it would be located just above the navigation Portlet)
Add the following to the page:
<script>
function getById(id) {
return document.getElementById(id);
}
function TogglePortletsPanel() {
var dispVal = getById('portal-column-one').style.display
if( dispVal == "none") { // Normal display
SetPortletsPanelState("inline");
} else { // Full Screen Content
SetPortletsPanelState("none");
}
}
function SetPortletsPanelState(dispVal) {
var nav = getById('portal-column-one');
var content = getById('portal-column-content');
if( dispVal == "none") { // Normal display
nav.style.display='none';
content.className='cell width-full position-0';
// Set cookie to updated value
setCookie("portletDisplayState","none",365);
} else { // Full Screen Content
nav.style.display='inline';
content.className='cell width-3:4 position-1:4';
// Set cookie to updated value
setCookie("portletDisplayState","inline",365);
}
}
function InitializePortletsPanelState() {
var portletDisplayState=getCookie("portletDisplayState");
//alert("portletDisplayState="+portletDisplayState)
if (portletDisplayState!=null) SetPortletsPanelState(portletDisplayState);
}
function setCookie(c_name,value,exdays) {
//alert(c_name+"="+value);
// cookie format: document.cookie = 'name=value; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var exp= ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + escape(value) + exp + "; path=/";
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) return unescape(y);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {oldonload(); }
func();
}
}
}
addLoadEvent(InitializePortletsPanelState);
</script>
<a style="font-size:50%;" href="javascript:TogglePortletsPanel();">Toggle Portlets Panel</a>
6. Save the page
Notes:
I got the names of the plone div elements using Firebug.
I also used Firebug to experiment with different settings to speed up prototyping. For example, editing the HTML inline to verify settings do as expected.
There is a slight but of delay until the Left Portlet panel is hidden. This is only obvious on Safari for me (which is probably due to how fast it is) but not on Firefox or IE.
Maybe it's just a matter of setting the right property: you want display:none, not visibility:hidden.
But even then, the content area will probably not reflow automatically, you'll need to (dynamically) change the class on it as well.
Specifically, you'll need to put classes width-full and position-0 on portal-column-content, instead of width-1:2 and position-1:4.
This must be achieved client side by javascript (jquery).
You must first read documentation about the css grid framework used by plone: deco.gs. The website is down so, git clone this repo: https://github.com/limi/deco.gs and open pages in a webbrowser
Note: you just have to change css classes on the containers.
Try adi.fullscreen, it respects Plone's css-structure as Ulrich Schwarz thoughtfully mentioned.