On my HTML5 page I have this code excerpt.
<body>
<script type="text/javascript" >
$(document).ready(function () {
$('#timepicker4').timepicker({
format: 'HH:mm'
});
</script>
// start of page
<div class="header">
<label th:for="timepicker4" th:value="${hourIntervalStart}">Hour Interval Start: </label>
</div>
<div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input name="hourIntervalStart" th:field="*{hourIntervalStart}" id="timepicker4" class="form-control tp_interval1"></input>
</div>
</div>
// rest of page
</body>
The problem is that, though the javascript is correctly displaying the time, the controller prints out (for testing purposes) a null value to the hourIntervalStart attribute.
The appropriate javascript library is correctly loaded and accessible from the browser.
How to correctly pass the the selected value to the controller?
Related
I need to make reactive a class inside a const (exported from a module).
export const messageControls = '
<div id="controls"">
<i id="idcont" class="{{starred}}"></i>
</div>
'
This class belongs to an HTML block who's inserted as innerHTML of a createElement.
var newElement = document.createElement('div');
newElement.id = i._id;
newElement.className = "single_message";
newElement.innerHTML = messageControls;
document.getElementById('conversation_details').appendChild(newElement);
The {{helper}} below is not rendering anything :
starred: function () {
return 'bob';
},
<i id="idcont" class="{{starred}}"></i> gives {{starred}} in plain text
<i id="idcont" class=" ' + {{starred}} + ' "></i> breaks all
Any idea?
Update - full Blaze template as requested
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
<div class="item-content">
<div class="task_inlist">
<div class="task_from">
{{{from}}}
</div>
<div class="task_date">
{{initialdate}}
</div>
<div class="task_subject">
{{{subject}}}
</div>
<div class="task_content">
{{{htmlbody}}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
</div>
<div id="conversation_details" class="col-xs-8" media="print">
<!--
here are each selected message details
-->
</div>
</div>
</template>
You're trying to inject spacebars template markup directly into the DOM but meteor-blaze wants to use spacebars to build the DOM. It doesn't watch the DOM for arbitrary changes and then make template substitutions inside of it!
You can instead use Meteor's reactivity to automatically insert new items into the DOM for you based on changes to the underlying data. In your case it looks like you're trying to show the details of a message that's been clicked on. You probably have a template event handler already to catch the click. In that template handler you can set a Session variable which indicates which message is currently selected and then use that Session variable inside the helper that renders the message details.
For example:
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
// render summary of each message
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
{{#with selectedMessage}}
<div id="conversation_details" class="col-xs-8" media="print">
// render selected message details
</div>
{{/with}}
</div>
</template>
Your js:
Template.inbox.events({
'click .item'(ev) {
Session.set('selectedMessageId',this._id);
}
});
Template.inbox.helpers({
selectedMessage() {
return Messages.findOne(Session.get('selectedMessageId'));
}
});
Now to your follow-up question about how to reactively style an element. Let's say your message* object has aisStarredboolean key. In the message detail section we've set the data context using{{#with currentMessage}}` so any key of the current message can be used directly in our spacebars template. Where you are displaying the message details you can do:
<div id="controls"">
<i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i>
</div>
Depending on whether or not the message is starred this will render as class="" or class="starred".
I am using angular JS for asp.net server side controls
<div class="gridpage mb40" name="myForm" ng-model="myForm" ng-form
<div class="form-group">
<label class="">Name of the Supplier:</label>
<asp:TextBox ID="txtSupName" CssClass="form-control" runat="server" ng-model="txtSupName" name="txtName" required></asp:TextBox>
<p ng-show="myForm.txtName.$invalid && !myForm.txtName.$pristine" class="help-block">Your Name is Required.</p>
</div>
</div>
problem is at run time when i deploy my code , name property changes for server side control so i am not able to render paragraph of error messages
is there any other way through which i can access control instead of myform.txtName.$invalid??
tried with clientIDmode= Static , it keeps id static but name still changes,
Try this solution jsfiddle.
Create a directive alias, which stores a reference to ngModelController, which is independent of the name of input (asp:TextBox).
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $log) {
})
.directive('alias', function() {
return {
restrict: "A",
require: "ngModel",
scope: {
alias: "="
},
link: function(scope, elem, attr, ngModel) {
scope.alias = ngModel;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="myForm">
<input name="txtName" ng-model="txtName" required alias="aliasName" ng-pattern="/^[0-9]+$/">
<div ng-if="myForm.txtName.$error.required">Name is reauired by name</div>
<div ng-if="aliasName.$error.required">Name is reauired by alias</div>
<div ng-if="myForm.txtName.$error.pattern">Invalid pattern by name</div>
<div ng-if="aliasName.$error.pattern">Invalid pattern by alias</div>
<br>
<pre>myForm.txtName.$error = {{myForm.txtName.$error|json}}</pre>
<pre>aliasName.$error = {{aliasName.$error|json}}</pre>
</form>
</div>
</div>
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.
I'm really struggling with this one. If you want to view what I have bludgeoned together, it is all in a repo on GitHub called instructor-oracle. What I would like to do is have the landing page be the layout at ./wbs. Then I would like the search to route to ./wbs/:_wbsCode and populate the sidebar with the appropriate record. I am thinking the router needs to be structured something like...
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function () {
this.route('wbs', {
path: '/wbs'
}, function () {
this.render('wbs-detail', {
path: '/wbs/:_wbsAbbrev',
to: 'wbs-detail',
data: function () {
theOne = Wbs.findOne({abbrev: this.params._wbsAbbrev});
console.log(theOne.abbrev);
return theOne;
}
});
});
...and this would be paried with templates like...
<template name="layout">
<header class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="{{pathFor 'wbs'}}">Instructor Oracle</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<form class="navbar-form navbar-left" role="search" id="wbsSearchForm">
<div class="form-group">
<input
class="form-control typeahead"
name="wbsSearch"
id="wbsSearch"
type="text"
placeholder="Search"
autocomplete="on"
spellcheck="off"
autofocus="true"
/>
</div>
<button type="submit" class="btn btn-default">Find</button>
</form>
</div>
</nav>
</header>
<main class="container-fluid">
{{> yield}}
</main>
</template>
<template name="wbs">
<div class="col-sm-3" id="wbsCol">
{{> yield 'wbs-detail'}}
</div>
<div class="col-sm-9" id="timesheetCol">
<iframe src="http://iframeurl.html" id="timesheetFrame"></iframe>
</div>
{{#contentFor 'wbs-detail'}}
<h1>{{abbrev}} <small>{{code}}</small></h1>
{{/contentFor}}
</template>
...and an event handler for the form like this...
Template.layout.events({
// catch submit event for wbs form
'submit': function (event, template) {
// prevent default behavior and stop bubbling
event.preventDefault();
event.stopPropagation();
// store dom element in variable
var inputElement = template.find('input#wbsSearch');
// access value in form and extract abbreviation if found
var abbrev = Wbs.findOne({abbrev: (inputElement.value).toUpperCase()}).abbrev;
// clear input
inputElement.value = "";
// go to the page
Router.go('wbs-edit', {_wbsAbbrev: abbrev});
}
});
I have been trying to sort through this on the iron:router documentation, but right now I am all kinds of lost (obviously). Still, I need this to work to avoid reloads on the main layout template so the iframe does not reload while the sidebar can change along with the matching url so links to specific sidebar content can be bookmarked and shared.
Thank you in advance for your assistance. If I eventually sort all of this out, I am more than happy to contribute to the iron:router documentation so it makes sense for the next pea-brained idiot like myself who happens to need to sort this out.
I have a form that I'm putting on a webpage, and most of my users will be using IE. There's a series of radio buttons at the top, and when any of them are selected, the form below should change. Here's the code:
<html>
<head>
<script language="javascript">
function prepareForm() {
var t = document.getElementById('top');
document.getElementById('search1').style.top = t.style.top + t.style.height;
document.getElementById('search2').style.top = t.style.top + t.style.height;
document.getElementById('search3').style.top = t.style.top + t.style.height;
}
function displayForm() {
var a = document.getElementsByName('search');
var b = document.getElementsByName('searchBy');
for (i=0;i<a.length;i++) {
if (!b[i].checked) {
a[i].style.display="none";
} else {
a[i].style.display="block";
}
}
}
</script>
</head>
<body style="font-family:calibri;text-align:center;" onLoad="displayForm();">
<div id="top">
<center><h3>My webpage</h3></center>
<br>
<form method="post" action="results.html" name='myForm'>
<center><font face='calibri'>Search By:</center><br>
<center>
<input type="radio" name="searchBy" value="search1" checked onClick="displayForm();">Form one
<input type="radio" name="searchBy" value="search2" onClick="displayForm();">Form two
<input type="radio" name="searchBy" value="search3" onClick="displayForm();">Form three
</div>
<!-- search area 1 -->
<div name="search" id="search1" style="margin-left:auto;margin-right:auto;display:block;">
<p>Form 1</p>
<input type="Submit" value="Submit">
</div>
<!-- search area 2-->
<div name="search" id="search2" style="margin-left:auto;margin-right:auto;display:none;">
<p>Form 2</p>
<input type="Submit" value="Submit"></b>
</div>
<!-- search area 3 -->
<div name="search" id="geoSearch" style="margin-left:auto;margin-right:auto;display:none;">
<p>Form 3</p>
</div>
</body>
</html>
This code appears to work in Chrome, but in IE9, the displayed doesn't change when the javascript function displayForm() is called. Is there something about a div's style.display attribute that's different between IE9 and Chrome?
If you truely need help, start by searching about why IE bugs with document.getElementByID
From : http://msdn.microsoft.com/en-us/library/ie/ms536437%28v=vs.85%29.aspx :
this method performs a case-insensitive match on both the ID and NAME
attributes, which might produce unexpected results.
After reading some about it, validating over a <!doctype>, try replacing your 'name' and 'id' so they match then test it and come back here with details and more infos so WE can try to help you further more.
PostScriptum : when i read this : "I didn't know that language attribute is obsolete from HTML 4" it felt like dang! Am i waisting my time trying to help someone who will never grow in a web UI development career, didn't do his homework with all his heart, and is most likely to become a 'copy-paster' coming on Stackoverflow to ask for 'do this because i can't'.