I have a kendo grid with the following command below. When I first click on the command button, it works fine and there is 1 <input>, 1 <textarea> and 1 <input>. When I close the popup window and reopen it, the <textarea> is duplicated every time.
command: [{
name: "Edit",
title: "Alert Email",
width: "180px",
click: onDataBound75
}],
Calling the following function:
function onDataBound75(e) {
e.preventDefault();
$("#txtAlert").kendoEditor({
resizable: {
content: true,
toolbar: true,
encoded: false
}
});
var window = $("#emailAlert_popup").kendoWindow({
width: "600px",
visible: false,
modal: true,
actions: [
"Maximize",
"Close"
],
});
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var viewModelAlert75 = kendo.observable({
Alert75EmailSubject: dataItem.Alert75EmailSubject,
Alert75EmailBody: dataItem.Alert75EmailBody,
Alert75FromAddress: dataItem.Alert75FromAddress,
});
kendo.bind($("#emailAlert_popup"), viewModelAlert75);
window.data("kendoWindow").center().open();
};
And the aspx file looks like this:
<div id="emailAlert_popup" class="TT_PopupWindow">
<div class="SearchParam">
<label class="control-label" for="txtAlert75EmailSubject" style="width:200px">Email Subject</label>
<input name="txtEmailSubject" id="txtAlert75EmailSubject" class="k-textbox" style="width:430px"
data-bind="value: Alert75EmailSubject" />
</div>
<div class="SearchParam">
<label class="control-label" for="txtAlert75EmailBody" style="width:200px">Email Body</label>
<textarea id="txtAlert" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: Alert75EmailBody"></textarea>
</div>
<div class="SearchParam">
<label class="control-label" for="txtAlert75FromAddress" style="width:200px">From Address</label>
<input name="txtFromAddress" id="txtAlert75FromAddress" class="k-textbox" style="width:430px"
data-bind="value: Alert75FromAddress"
/>
</div>
<div class="k-edit-buttons k-state-default">
<button type="button" id="btnAlert75EmailUpdate" data-role="button" class="k-button k-button-icontext k-primary k-grid-update" role="button" aria-disabled="false" tabindex="0" style="float:right"><span class="k-icon k-i-check"></span>Update</button>
<button type="button" id="btnAlert75Cancel" data-role="button" class="k-button k-button-icontext k-grid-cancel" role="button" aria-disabled="false" tabindex="1" style="float:right"><span class="k-icon k-i-cancel"></span>Cancel</button>
</div>
</div>
I think that when you open the window for the second time or more, it's contents are already created so your are creating another kendoEditor over and existing one. Try this:
if (!$("#txtAlert").data("kendoEditor")) {
$("#txtAlert").kendoEditor({
resizable: {
content: true,
toolbar: true,
encoded: false
}
});
}
The above condition checks whenever the window will open, if the textarea is already an editor.
Related
I have my form here that contains the fields that i want validated. Currently there is one Name of Recipient field but the user can click the addKit button which will dynamically generate new input fields for the user to fill out. The validation library i am using validates the fields by matching the input field name to the bootstrapValidator fields list. In this case for instance, it will look at <input type="text" style="margin:0px 0px 7.5px 0px;" class="form-control" name="kits[COZ1][1][name]" value=""> and match the name kits[COZ1][1][name] to the field name in the fields list in the javascript. Now as there are more inputs generated the name will change dynamically, the next input name will be kits[COZ1][2][name] and so on... I am using the addField method to add the field dynamically but run into an error. What am i doing wrong here?
<form class="well form-horizontal" action="" method="post" id="order">
<fieldset>
<legend><b>Requestor</b></legend>
<div class="form-group">
<label class="col-md-4 control-label">Requestor Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="requestorName" placeholder="Requestor Name" class="form-control" id="requestorName" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Requestor Email</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="requestorEmail" placeholder="Requestor Email" class="form-control" id="requestorEmail" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Requestor Broker Dealer</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="firm" placeholder="Firm Name" class="form-control" id="firm" type="text" required>
</div>
</div>
</div>
<legend><b>Kit Details</b></legend>
<?php foreach($kit_types as $type => $description): ?>
<div class="form-group">
<label class="col-md-4 control-label"><?php echo $description; ?></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-file"></i></span>
<input class="form-control" size="10" value="1" placeholder="Quantity" name="quantity_<?php echo $type; ?>" id="quantity_<?php echo $type; ?>" type="text" required />
</div>
<div class="invalid-feedback">
Please enter the Quantity of Kits Needed
</div>
<button style="margin:15px 15px 0px 0px;" class="kitQuantityUpdate btn btn-primary btn-sm" id="update_<?php echo $type; ?>" type="button" value="Show" />Show <span class="glyphicon glyphicon-refresh"></span></button>
<button style="margin:15px 15px 0px 0px;" class="kitAdd btn btn-warning btn-sm" id="add_<?php echo $type; ?>" type="button" value="Add Kit" />Add Kit <span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
<div class="kitDetail" id="kitDetail_<?php echo $type; ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name of Recipient</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<div id="kitList">
<div class="detailList" id="detail_<?php echo $type; ?>">
<input type="text" style="margin:0px 0px 7.5px 0px;" class="form-control" name="kits[COZ1][1][name]" value="">
</div>
</div>
</div></div>
</div>
<?php endforeach; ?>
<!--<legend><b>Kit Delivery</b></legend>-->
<div class="form-group" style="visibility: hidden">
<label class="col-md-4 control-label">Delivery Method</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select id="mailtype" name="mailtype" class="form-control selectpicker" >
<option value="Email" selected>Email</option>
<!-- <option value="Hard Copy">Hard Copy</option>
<option value="Hard Copy & Email">Hard Copy & Email</option>-->
</select>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for placing your Order, we will contact you shortly.</div>
<button id="submit" name="submit" type="submit" class="btn btn-success" >Submit Order <span class="glyphicon glyphicon-send"></span></button>
<!--<input id="submit" type="submit" name="submit" value="Submit Order" />-->
</fieldset>
</form>
I have a my validation rules set.
$('#order').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
var bv = form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function(result) {
$('#order').bootstrapValidator("resetForm",true);
console.log(result);
}, 'json');
},
excluded: [':disabled'],
fields: {
kits[COZ1][1][name]: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply recipient name'
}
}
},
requestorName: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your name'
}
}
},
requestorEmail: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
firm: {
validators: {
stringLength: {
min: 3,
},
notEmpty: {
message: 'Please supply your Broker Dealer'
}
}
},
/*
address1: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply recipient street address'
}
}
},
address2: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply recipient city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select recipient state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply recipient zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply recipient phone number'
},
phone: {
country: 'US',
message: 'Please supply a vaild phone number with area code'
}
}
},
ship_email: {
validators: {
notEmpty: {
message: 'Please supply recipient address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
*/
}
}).on('click', '.kitAdd',function() {
var data = kitAdd($(this).attr("id").split("_")[1]);
console.log(data);
var prefix = data[0];
var suffix = data[1];
var type = data[2];
var template = $("#detail_"+type);
var clone = template.clone();
clone.attr('id', "detail_"+type);
// clone.insertBefore(template);
var option = clone.find('input');
var name = prefix + "[name]";
option.attr('name', prefix + "[name]");
var obj = clone.find('[name="'+suffix+'[name]"]')
$("form#order").bootstrapValidator("addField", obj);
});
kitAdd function simply returns data needed for input name.
I am using the trumbowyg editor control in my vuejs spa. From the documentation I know that I can use the following code to set the contents of the editor.
$('#editor').trumbowyg('html','<p>Your content here</p>');
$('#editor').trigger('tbwchange');
However, it is not working for me in my VueJs App. I have an object that has a description key defined. I can console.log the description , but when I try to assign it to the editor control as mentioned above, it fails . I can see no error in the console but the text just won't show up in the editor.
Here is what I am going at the moment.
<template>
<div class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span v-if="anouncement">Edit Anouncement</span>
<span v-else>New Anouncement</span>
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" placeholder="enter anouncement summary here" class="form-control" v-model="anouncementObj.summary">
</div>
<div class="form-group">
<input type="text" placeholder="enter location here" class="form-control" v-model="anouncementObj.location">
</div>
<textarea class="note-view__body" id="anonDescription" v-model="description" placeholder="enter event description"></textarea>
</div>
<div class="modal-footer">
<button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" v-on:click="performSave()" class="btn btn-link">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props : {
anouncement : Object
},
data() {
return {
anouncementObj :{}
}
},
mounted () {
this.makeTextBoxReady();
this.anouncementObj = Object.assign({},this.anouncementObj, this.anouncement || {});
$('#anonDescription').trumbowyg('html',this.anouncement.description);
$('#anonDescription').trigger('tbwchange');
console.log(this.anouncement.description);
},
methods : {
makeTextBoxReady: function() {
$(document).ready(function() {
if (!$('html').is('.ie9')) {
if ($('.note-view__body')[0]) {
$('.note-view__body').trumbowyg({
autogrow: true,
btns: [
'btnGrp-semantic', ['formatting'],
'btnGrp-justify',
'btnGrp-lists', ['removeformat']
]
});
}
}
});
},
performSave : function() {
let description = $('#anonDescription').trumbowyg('html');
let formData = new FormData();
for (name in this.anouncementObj) {
formData.append(name, this.anouncementObj[name]);
}
if( !this.anouncementObj.id) {
this.anouncementObj.id = 0;
}
formData.append('description',description);
this.$http.post('/admin/anouncement/createOrUpdate', formData).then(response => {
// console.log(response);
if(response.data.status==200) {
alert(response.data.message);
this.$emit('getAnouncements');
}
})
},
clear: function() {
this.anouncementObj= {};
}
}
}
</script>
Can you please let me know what I am doing wrong here? I have also tried the nexttick approach but even that is not working.
I got it working. I was not using the correct bootstrap modal id. Please see this related question for more information.
This is the correct code.
if(this.anouncementObj && this.anouncementObj.description && this.anouncementObj.id) {
$('#'+this.anouncementObj.id+' #anonDescription').trumbowyg('html',this.anouncementObj.description);
$('#'+this.anouncementObj.id+' #anonDescription').trigger('tbwchange');
}
I'm looking for a CSS/JQuery method of keeping a DIV (which contains navigation buttons) visible when scrolling or content extends the viewable window size.
I have come across CSS code like this:
.element { position:fixed; Bottom:0px }
But my request is for use within a pop up window / dialog and this code doesn't seem to work for my scenario.
I have a pop up window which displays a 'next' and 'previous' button at the bottom and each "page" is a fieldset which is animated in or out of view.
There are a few fieldsets which go beyond the height of the pop up window and so the scroll activates. But I want to keep my button DIV in view at all times, along the bottom of the pop up window.
Trying to use the CSS above does not seem to set the element within the pop up window, rather it is positioning based on the parent window.
Is there a way to create a fixed DIV to remain visible when scrolling within a pop up window?
Any help would be greatly appreciated.
EDIT:
Code for the pop up window:
<div id="win1" class="FormDiv">
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li id="liDetails" class="active firstLi">User Details</li>
<li id="liLevel">Level Selection</li>
<li id="liAccess">Access Items</li>
<li id="liSummary">Summary</li>
</ul>
<!-- fieldsets -->
<fieldset id="fsDetails">
<h2 class="fs-title" id="FormStep1Title">Enter user details</h2>
#*<h3 class="fs-subtitle">This is step 1</h3>*#
<div class="fs-leftDiv">
<input type="text" name="RequestedFor" id="RequestedFor" placeholder="Requested For " readonly title="Requested For" tabindex="-1" />
<input type="text" name="DirectorateName" id="DirectorateName" placeholder="Directorate " title="Directorate" tabindex="1" style="border-color:red;" />
<input type="text" name="Dept" id="Dept" placeholder="Department " title="Department" tabindex="3" />
<input type="text" name="ForOtherStaff" id="ForOtherStaff" placeholder="Form For Other Staff? (Enter Username) " onblur="getUserForForm()" title="Form For Other Staff? (Enter Username)" tabindex="5" />
<select id="Title" name="Title" title="User Title" onchange="onTitleChange()" tabindex="7">
<option value="">Select Title...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>
<input type="hidden" name="UserName" id="UserName" /><input type="hidden" name="FormId" id="FormId" />
</div>
<div class="fs-rightDiv">
<input type="text" name="RequestDate" id="RequestDate" placeholder="Request Date " readonly title="Request Date" tabindex="-1" />
<select id="PhysicalSite" name="PhysicalSite" onchange="onSiteChange()" title="Site" tabindex="2" style="border-color:red;"></select>
<input type="text" name="PhoneNo" id="PhoneNo" placeholder="Phone Number " title="Phone Number" tabindex="4" />
<input type="text" name="Payroll" id="Payroll" placeholder="Payroll Number " title="Payroll Number" tabindex="6" />
<input type="text" name="ReplacedName" id="ReplacedName" placeholder="Replaced Name " title="Replaced Name" tabindex="8" />
<input type="hidden" name="UserEmail" id="UserEmail" /><input type="hidden" name="RequestId" id="RequestId" />
</div>
<input type="text" name="Comments" id="Comments" placeholder="Comments " title="Comments" tabindex="9" />
<div id="FixedScroll" class="fixedScroll">
<input type="button" name="save" class="save action-button" value="Save" tabindex="9" />
<input type="button" name="next" class="next action-button" value="Next" tabindex="10" />
</div>
</fieldset>
<fieldset id="fsLevel" title="hidden">
<h2 class="fs-title">Access Level / Item Selection</h2>
<h3 class="fs-subtitle">To add items using a role, please go to next section (Access Item)</h3>
<div id="AllAccessLevelDiv" style="margin-top:20px;">
<span class="GrpTitle" style="width:100%;text-align:left;">Access Level</span>
#(Html.Kendo().DropDownList()
.Name("AccessLevel")
.HtmlAttributes(new { style = "width:100%;text-align:left;margin-bottom:4px;float:left;" })
.DataTextField("Description")
.DataValueField("Code")
//.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAccessLevelList", "Home").Type(HttpVerbs.Post);
});//.ServerFiltering(false);
})
.Events(e => e.Change("AccessListRebind"))
//.Events(e => e.DataBound("DropDownDefaults"))
)
<div id="lstAccessLevelDiv" style="display:none;padding:0px;margin:0px;">
#(Html.Kendo().MultiSelect()
.Name("lstAccessLevel")
.Events(e => e.Change("onAccessLevelItemChange"))
.AutoBind(false)
.IgnoreCase(true)
.Placeholder("Click here to select item(s) ......")
.HtmlAttributes(new { style = "width:100%; float:left;display:block;" })
.DataTextField("AccessItemDesc")
.DataValueField("AccessItemCode")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetAccessLevelItems", "Home").Type(HttpVerbs.Post)
.Data("AccessItemFilter")
)))
</div>
</div>
<div id="fsLevelDiv" style="text-align:left;width:100%;clear:both;padding:0px;margin:0px;">
</div>
<table id="AccessItemSummary1">
<thead>
<tr><th colspan="2">Summary of default / selected access items</th></tr>
<tr>
<th>Name</th>
<th>Value</th>
<th style="display:none">Id</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="FixedScroll1" class="fixedScroll">
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="save" class="save action-button" value="Save" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</fieldset>
</fieldset>
</form>
</div>
The code for opening the pop up:
function OpenForm() {
var dialog, form;
dialog = $("#win1").dialog({
autoOpen: false,
height: 600,
width: 650,
modal: true,
center: true,
resizable: false,
});
dialog.center;
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addUser();
});
var formId, requestStatus, modeColor;
var statusLabel = '';
if (pFormId) {
formId = ' Form Id: ' + pFormId;
statusLabel = '<label id="lblfooter3" class="StatusBar" style="position:relative; margin-bottom:0px; margin-left:160px; float:left; z-index:2000"><a style="color:#747A90; z-index:2000;" onclick="OpenStatusHistoryForm()">View Status History</a></label>'
}
else
formId = 'New Form';
if ((pRequestStatus == 'APPROVED') || (pRequestStatus == 'PENDING') || (pRequestStatus == 'REJECTED')) {
requestStatus = ' Read Only Mode ';
modeColor = 'indianred';
}
else {
requestStatus = ' Edit Mode ';
modeColor = 'darkgray';
}
dialog.dialog({ title: pSystemName + ' - ' + pFormTypeName });
dialog.dialog("open");
//stop main window scrolling
$('body').css('overflow', 'hidden');
$("#lblfooter").remove();
$("#lblfooter2").remove();
$("#lblfooter3").remove();
$("#win1").parent().append('<label id="lblfooter" class="StatusBar" style="position:relative;margin-bottom:0px; float:left; color:darkgray;z-index:2000">' + formId + '</label>' + statusLabel +
'<label id="lblfooter2" class="StatusBar" style="position:relative; margin-bottom:0px; float:right; color:' + modeColor + ';z-index:2000">' + requestStatus + '</label>');
}
In an MVC 5 project, with the default bootstrap layout, I am using the following code to set all inputs of a certain class to jQuery UI Datepicker widgets:
$(".jqueryui-marker-datepicker").datepicker({
dateFormat: "yy-mm-dd",
changeYear: true,
showOn: "button"
}).next("button").button({
icons: { primary: "ui-icon-calendar" },
label: "Select a date",
text: false
});
Here is the HTML that is rendered by Razor and jQuery UI after the above call executes, minus some aria and validation data attributes:
<div class="form-group">
<label class="control-label col-md-2" for="Time">Date</label>
<div class="col-md-10">
<input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
<button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
<span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
</button>
<span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
</div>
</div>
The problem with this is that datepicker button appears below the date input. This is because the bootstrap .form-control class makes gives the input a display: block. If I edit this in Chrome's console to inline-block the button appears immediately to the right of the input, exactly where I want it.
Now I could add a new css rule as follows:
.form-control.jqueryui-marker-datepicker {
display: inline-block;
}
but I'm just not sure if this is the neatest way to do this, with the least impact on all the layout magic that bootstrap is doing.
The bootstrap metaphor for displaying buttons next to inputs is to use an input-group like this:
<div class="input-group">
<input type="date" class="form-control" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
You can tweak your script to format the output to add these classes and html structure by wrapping the contents like this:
$(".jqueryui-marker-datepicker")
.wrap('<div class="input-group">')
.datepicker({
dateFormat: "yy-mm-dd",
changeYear: true,
showOn: "button"
})
.next("button").button({
icons: { primary: "ui-icon-calendar" },
label: "Select a date",
text: false
})
.addClass("btn btn-default")
.wrap('<span class="input-group-btn">')
.find('.ui-button-text')
.css({
'visibility': 'hidden',
'display': 'inline'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input type="text" class="jqueryui-marker-datepicker form-control">
Alternative w/ Bootstrap
That being said, this is a pretty convoluted way to do this. I'd add a native bootstrap glyphicon instead of trying to force the button to display correctly. It's also pretty uncommon to mix jQuery-UI and Bootstrap as there is a lot of overlap in functionality and they don't always play nice together. I would recommend looking into just extending bootstrap with a datepicker plugin.
Here's an example using bootstrap-datepicker
$('.datepicker').datepicker({});
//
$('.datepicer-icon').on('click', '.btn', function(e) {
$(e.delegateTarget).find('.datepicker').focus();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<div class="container" >
<h3>With Input Group</h3>
<div class="input-group datepicer-icon">
<input type="text" class="form-control datepicker" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
<h3>With Feedback</h3>
<div class="form-group has-feedback">
<input type="text" class="form-control datepicker" placeholder="Date" />
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
Try this way :
<form class="form-inline">
<div class="form-group">
<label class="control-label col-md-2" for="Time">Date</label>
<div class="col-md-10">
<input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
<button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
<span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
</button>
<span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
</div>
</div>
</form>
Add this:
class="form-control"
lets say I have the following markup:
<div class="fild-group">
<label for="form-users">User</label>
<button type="button" class="inactive btn btn-default" data-id="form-users"><span>Select an User</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-projects">Projects</label>
<button type="button" class="inactive" data-id="form-projects"><span>Select a Project</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-parallel-env">Parallel Environment</label>
<button type="button" class="inactive" data-id="form-parallel-env"><span>Select a PE</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-start-date">Start Date</label>
<button type="button" class="inactive" data-id="date1"><span>Select a Date</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-end-date">End Date</label>
<button type="button" class="inactive" data-id="date2"><span>Select a Date</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-no-slots">Number of slots</label>
<button type="button" class="inactive btn" data-id="form-slots"><span>Slots</span></button>
<input type="number" class="form-control" id="form-no-slots" min="1" max="9999">
</div>
depending on where the user is I would like to show some, all or none of these div.fild-group so I was thinking to create ONLY one template like this
<template name="first-line-button">
<div class="fild-group">
<label for="{{ id }}">{{ label }}</label>
<button type="button" class="inactive btn btn-default " data-id="{{ data }}"><span>{{ message }}</span></button>
</div>
</template>
but so far I know how to use that template for one thing at the time, so the question is how can I use this single template for multiple things at the same time???
thanks in advance!
You need to provide a data context for the template to render. You can do that individually, or pass an array of button data.
Template.parent.formUsers = function () {
return {
id: "for-users",
label: "User",
message: "Select a User"
}
};
or
Template.parent.formButtons = function () {
return [{
id: "form-users",
label: "User",
message: "Select a User"
}, {
id: "form-projects",
label: "Projects",
message: "Select a Project"
}, {
...
}]
};
And the parent template would have this in it somewhere.
{{> first-line-button formUsers}}
or
{{#each formButtons}}
{{> first-line-button}}
{{/each}}