Is it possible to have pass a parameter from my template to a .helpers function parameter? I am trying the code below but I am always getting the error shown below. Thanks
Template.documentUpdate.helpers({
getDocID: function(dCode){
return docsIDArray[dCode];
}
});
in template:
<input type="hidden" id="docID" name="docID" value="{{getDocID(1) }}">
Error:
Exception from Tracker recompute function: Error: No such function: getDocID
Your syntax is incorrect, try this :
<input type="hidden" id="docID" name="docID" value="{{getDocID 1}}">
Related
I'm trying to access a value inside an {{#each in}}-iteration:
{{#each room in channels}}
<form class="enterRoom">
<button type="submit" class="roomJoin">
<b>{{room.name}}</b>
<img src="{{room.roomBanner}}" alt=".">
<input type="hidden" value="{{room.name}}" name="name">
</button>
<div class="inRoom">
{{#each name in room.inRoom}}
{{name}}
{{/each}}
</div>
</form>
{{/each}}
Normally I would use this.name, for example, to get the name of it inside an event to use it further, like so
'submit .enterRoom'(event) {
event.preventDefault();
const isClosed = this.name; // room.name example here
}
But this doesn't work in this scenario. What I tried before was:
room.name
this.room.name
But those give the same error
chat.js:86 Uncaught ReferenceError: room is not defined
at Object.submit .enterRoom (chat.js:86)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3818
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3817)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2617
at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
at Blaze._DOMRange.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2616)
at HTMLFormElement.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:863)
at HTMLDivElement.dispatch (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9685)
at HTMLDivElement.elemData.handle (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9492)
Could someone explain to me how I could do it in this {{each in}}-setting properly?
The error has nothing to do with the each iterations of your template. What you try is to get the form data within the submit event handle. However, there is no context bound to this or room.
In order to get the room value, you need to access the input value.
Blaze offers a fast way of doing so, by using the Template's builtin jQuery (using templateInstance.$), which automatically scopes to the Template root instead of the whole document:
'submit .enterRoom'(event, templateInstance) {
event.preventDefault();
const roomName = templateInstance.$(event.currentTarget).find('input[name="name"]').val();
// ...
}
I am trying to create an array of references with Vue.js + Firebase. In the SELECT INPUT using multiple, when I try to store, it (obsviously) create an array, so my reference doens't work. I understood why, but I don't know how to solve this. When the OPTIONS from SELECT enters un the field to go to Firebase, it grabs and Array, so my reference link looks like 'todos / Item1 , Item2 , Item3' ... Sorry if it is a newbie question, but I just started with vue.js and firebase. Thanks.
HTML:
<form class="new-todo-form">
<label class="new-todo-label">
Day and Hour
<input v-model="date" type="date" class="new-todo-input"/>
</label>
<label class="new-todo-label">
Participantes:
<select v-model="participants" class="select-input" multiple>
<option v-for="todo in todos" v-bind:value="todo.institution">{{todo.institution}}</option>
</select>
</label>
<button type="submit" #click.prevent="addTest()" class="new-todo-button">Add</button>
</form>
addTest() {
testsCollection.doc(this.date).set({
id: this.tests.length,
date: this.date,
participants: todosCollection.doc('todos/' + this.participants),
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
},
Error in Console:
[Vue warn]: Error in v-on handler: "FirebaseError: [code=invalid-argument]: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: an array"
found in
---> <App> at src/App.vue
<Root> vue.esm.js:628
FirebaseError: "Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: an array"
FirestoreError index.cjs.js:352
validateType index.cjs.js:673
validateArgType index.cjs.js:574
doc index.cjs.js:21267
addTeste App.vue:481
click App.vue:386
VueJS 3
I want to include a Blaze template with an argument and then use the argument value in an event. The problem is that when I include the template a second time with a different argument I get the argument value from the first instance of the template in events.
Template:
<template name="UploadFormLayoutImage">
<form class="uploadPanel">
<input type="file" name="fileupload" id="input-field">
<label for="input-field">Upload file</label>
</form>
</template>
Include:
{> UploadFormLayoutImage layoutArea="area1"}}
{> UploadFormLayoutImage layoutArea="area2"}}
js:
Template.UploadFormLayoutImage.onCreated(function(){
this.currentArea = new ReactiveVar;
this.currentArea.set(this.data.layoutArea);
});
Template.UploadFormLayoutImage.helpers({
layoutArea: function() {
return Template.instance().currentArea.get(); //Returns the correct argument value for each instance of the template.
}
});
Template.UploadFormLayoutImage.events({
'change input[type="file"]': function(e, instance) {
e.preventDefault();
console.log(instance.data.layoutArea); //Allways returns 'area1'
}
});
What am I missing here? (This is my first Stackoverflow question. Please be gentle :))
What if you change the instance.data.layoutArea in your events method to this.layoutArea?
In my effort to make the code example easy to read i stripped away the part that caused the problem. I'm using a label for the input field and therefore the input field has an id and thats of course not ok when repeating the template.
I now use the layoutArea-helper as an id value and every thing works just fine.
<template name="UploadFormLayoutImage">
<form class="uploadPanel">
<input type="file" name="fileupload" id="{{layoutArea}}">
<label for="{{layoutArea}}">Upload file</label>
</form>
</template>
I am a newbie in AdobeCQ5. I am facing some trouble in posting form. Here is my Structure -
/apps/<myproject>/components/mytestcomponent
mytestcomopnent.jsp has following code -
<form id="myForm" action="<%=resource.getPath()+".html" %>">
<input type="text" id="t1" class="input-small" placeholder="Temprature F" />
<input type="text" id="t2" class="input-small" placeholder="Temprature C" readonly/>
<button type="button" id="cbtn" class="btn">Convert</button>
</form>
<script>
$(document).ready(function() {
$('#cbtn').click(function () {
var URL = $("#myForm").attr("action");
alert(URL);
var t1=$("#t1").val();
var t2=$("#t2").val();
$.ajax({
url: URL,
data:{'t1':t1},
type:"post",
success: function(data, status) {
$("#t2").val(data);
},
error: function( xhr, txtStat, errThrown ) {
alert("ajax error! " + txtStat + ":::" + errThrown);
}
});
});
});
</script>
This is giving my response code 200 (Success) but the output is not desired. My mycomponent.POST.jsp has following code -
<%
// TODO add you code here
String t1=request.getParameter("t1");
%>
<%= t1 %>
It gives the following output
Content modified /content/imobile/en/jcr:content/social.html
Status
200
Message
OK
Location /content/imobile/en/_jcr_content/social.html
Parent Location /content/imobile/en/_jcr_content
Path
/content/imobile/en/jcr:content/social.html
Referer http://example.comt:4502/content/imobile/en.html
ChangeLog
<pre></pre>
Go Back
Modified Resource
Parent of Modified Resource
Please help to resolve this.
The JSP file handling the POST method for your component should be named POST.jsp rather than mycomponent.POST.jsp.
Please notice that if you intercept all POST requests to your component, you won't be able to edit it on the author instance using a dialog (as the dialog simply POSTs data to the component URL). To avoid it, consider using a custom selector (like form). Your form should look be declared like this:
<form id="myForm" action="${resource.path}.form.html">
and the script handling POST request should be called form.POST.jsp.
The second important thing is that you should use Java classes rather than JSP files to store business logic. In this case it means that the form.POST.jsp script can be replaced with a Sling servlet declared as follows:
#SlingServlet(
resourceTypes="myproject/components/mytestcomponent",
methods="POST",
selectors="form")
I have a page which is rendering fine and whenever i refresh the page it is showing exception
like below
Exception from Deps recompute function: TypeError: Cannot read property 'option1' of undefined
at Object.Template.display_poll.helpers.product_title1 (http://localhost:3000/client/xxx.js?9b4f281e748352d5500dbda34a33f155fc8cc293:838:49)
at apply (http://localhost:3000/packages/handlebars.js?c2b75d49875b4cfcc7544447aad117fd81fccf3b:276:24)
at invoke (http://localhost:3000/packages/handlebars.js?c2b75d49875b4cfcc7544447aad117fd81fccf3b:301:12)
at http://localhost:3000/packages/handlebars.js?c2b75d49875b4cfcc7544447aad117fd81fccf3b:365:30
at Object.Spark.labelBranch (http://localhost:3000/packages/spark.js?742c715b73fac26c16ad433118b87045bc5658ff:1170:14)
at branch (http://localhost:3000/packages/handlebars.js?c2b75d49875b4cfcc7544447aad117fd81fccf3b:355:20)
at http://localhost:3000/packages/handlebars.js?c2b75d49875b4cfcc7544447aad117fd81fccf3b:364:18
at Array.forEach (native)
at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:156:11)
at template (http://localhost:3000/packages/handlebars.js?c2b75d49875b4cfcc7544447aad117fd81fccf3b:358:7)
the exception causing line is
product_title1:function() {
var title1=Polls_Coll.findOne({_id:this._id}).option1[0].pd;
return title1;
}
Here is my template
<template name="display_poll">
<!-- displaying poll question -->
{{uniqueid}}
<p class="label-design table-pop-more" name="{{unique_id}}">
<img src="/images/polls.jpg">{{question}}</p>
<div class="table-pop-more">
<div class="poll-options" id="menuitems">
<ul>
<!-- product thumbnails -->
<li><input type="text" class="pad-top" id="{{id_op1}}"
value="{{product_title1}}" readonly/><br></li>
<li><input type="text" class="pad-top" id="{{id_op2}}"
value="{{product_title2}}" readonly/><br></li>
<li><input type="text" class="pad-top" id="{{id_op3}}"
value="{{product_title3}}" readonly/><br></li>
<li><input type="text" class="pad-top" id="{{id_op4}}"
value="{{product_title4}}" readonly/><br></li>
</ul>
</div>
</div>
</template>
Help me with this.
If you want any other information i will provide.
The problem is with Polls_Coll.findOne(). When you load the page, the data from database is not yet fetched, so all find queries are empty – therefore, Polls_Coll.findOne(...) returns undefined. Only later the helper is rerun and findOne returns the actual data.
The simplest solution is to check whether the data is in place:
Template.displayPoll.productTitle = function() {
var poll = Polls_Coll.findOne(this._id);
if(!poll) return '';
return poll.option1[0].pd;
}