I got a problem in Meteor.
I want to show and hide a part of a template when I click a button (Like revealing a answer to a question e.g).
The problem is that this part of the template is created dynamically and I just want to reveal the answer that is correlated to the button. so you cant just have a template helper, that needs to return "true" to show the answer, because then on a button click every answer is revealed.
<template name="cardList">
{{#each card}}
<div class="card">
<h3>{{frontsideText}}</h3>
<p class="answer">{{backsideText}}</p>
<button class="btn btn-danger deleteButton">delete</button>
<button class="btn btn-default showButton">show Answer</button>
</div>
{{/each}}
</template>
I tried it with jQuery, which worked kind of. something like:
Meteor.startup(function () {
$(".answer").hide();
}
Template.cardList.events({
"click .showButton": function(event) {
$(event.target).prevAll(".answer").first().show();
}
But this doesnt work, because then every new added Question or whatever has the answer revealed, because they are just hidden on startup. I guess I need to put the hide() function somewhere else, but I dont know where.
And is there a way to solve this problem with just Meteor and no jQuery?
There are numerous ways to do this, here are two:
1. Using meteor
You could make a new template called card, put it in the {{#each card}} and use the following event. This will hide the answer whenever a new card is rendered.
Template.card.rendered = function(){
this.$("p.answer").hide();
};
2. Changing your snippet to work with JQuery
The problem is you're hiding your element the wrong way. You shouldn't hide it with js, but with css. That way it's hidden by default.
.card p.answer{
display: none;
}
Either way would make your click event code work. Personally I'd combine the options I suggested: Make a template for the cards (it's cleaner/easier to work on nicely contained templates) and adjust the css so it is hidden by default.
Let me know if you have any other questions
Related
We have an assignment in school to improve project, without actually knowing the programming languages. We got the skeleton of the project and we must add some functionality to it.
The skeleton is a blog, that has a login/register/ and you can create, edit and delete articles.
My first idea is to add two buttons - like and dislike, linked to a variable. Clicking the like button will increase the rating with 1, and dislike will decrease it. I added the buttons but I'm struggling with the javascript code. It should look something like this:
<script>
var rating = 0;
function IncreaseRating() {
document.getElementById('like').value = ++rating;
};
function DecreaseRating() {
document.getElementById('dislike').value = --rating;
};
</script>
<button id="like" type="button" onclick="IncreaseRating()">Like</button>
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button>
<script>document.write(rating)</script>
but it is not working. Somehow I managed to display the rating value, but it does not increase nor decrease. How can I solve my problem?
The order of your code is the problem, you run your script tag BEFORE the elements are included in the DOM.
To fix it, just change the order, put the script tag at the very bottom of the document, right before the closing tag.
<button id="like" type="button" onclick="IncreaseRating()">Like</button>
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button>
<script>
var rating = 0;
function IncreaseRating() {
document.getElementById('like').value = ++rating;
};
function DecreaseRating() {
document.getElementById('dislike').value = --rating;
};
</script>
<script>document.write(rating)</script>
The problem is that you're calling your scripts in the body after you create your elements. The issue with that is, you've told your element to call function X but it cant find it as its not yet been declared (you declare it right after you create the element).
There are two solutions:
Use jQuery's event handling to handle the DOM element events like so:$('#like').click(function() { //actions here });
Or put your native Javascript code in your header with your meta data thus it is loaded and your functions are declared on page load (before your elements are created).
https://jsfiddle.net/h6sveuju/7/
Notice how if you click the Javascript settings you see that the
Load Type
is set to
No wrap - in
Also you're trying to increment the text of the buttons which are currently strings (Like and Dislike) which obviously is wrong as it would update the text of the buttons to be just the value of the rating thus leaving the button text something like 12.
Going through a steep learning curve, i am currently experimenting various UX 'toys' that i will require to implement an app. One of these is to disable a button and enable it on the fly. Following the instructions of the good book , I wrote a little snippet of code to test it out. Clicking on "Soap" runs a series of chained promises, and toggles the "Soap1" button disabled prop.
My HTML/JS
<div data-role="content">
<a href="#" id="btn_soap1" class="ui-input-btn ui-btn ui-mini ui-btn-inline ui-icon-back "
onclick="getInitialNotifications();">Soap1</a>
<button id="btn_soap" class="ui-btn ui-btn-inline ui-mini ui-icon-bullets "
onclick="getInitialNotifications();">
Soap
</button>
<script>
$("#btn_soap1").button({ // required initialization
disabled:false
});
$("#btn_soap").on("click", function () {
// bubbled from the onClick thingie in the markup
var isDis = $("#btn_soap1").button("option","disabled");
$("#btn_soap1").button("option","disabled",!isDis);
// var but = $("#btn_soap1");
// var className = "ui-state-disabled";
// if(but.hasClass(className)) {
// but.removeClass(className);
// } else {
// but.addClass(className);
// }
});
</script>
</div>
Intended rendering
Broken rendering (all browsers and device sims and devices)
Question : can you see any noob error in the JS that would cause this side-effect. I added (in comments) my work-around, which works as specified, but is seems counter-intuitive.
EDIT: (from Mr. Duc Nguyen's answer). What breaks the rendering is adding the initialization. If it is not there, i get an exception whining that i am calling a function prior to initialization when changing the disabled state.
EDIT AGAIN : discovered JSfiddle, ... a fiddle that reproduces this
Edited: new answer basing on jsFiddle
You have gotten yourself in a very interesting situation, some points below:
jQM has an auto-initaliasation merchanism, if you want to leverage that, you have to follow the rules, or totally disable it and do the initialisation yourself. jQM global config
You have 2 "buttons", but they are actually 1 <a> and 1 <button>, disabling the <a> was never an easy one, have a look here disabling html link
jQM might confuse you that the <a> tag is a button widget, but it is not! It just has the same styling as a button, not a button widget. Button widget is only applying to <button> and appropriate <input> type (it was clearly mentioned in the documents back in 1.2.0's days, I couldn't find it in the 1.4.5 docs)
So, here is how I would do to leverage the jQM auto-initialisation:
Soap1
<button id="btn_soap" data-inline="true">Soap</button>
Notice on the <a>:
The attribute data-role="button" was to tell jQM to mark it up as a button
This classclass="ui-disabled" was to disable it initially.
And how to disable the link <a> on-the-fly. Notice that by just adding a class, it won't work on some specific infamous browsers, referring to the above stackoverflow answer for more information.
var isDis = $("#btn_soap1").hasClass("ui-disabled");
if (!isDis) {
$("#btn_soap1").addClass("ui-disabled");
} else {
$("#btn_soap1").removeClass("ui-disabled");
}
Again, you can only call .button([method]) on a real button!
Have a look on this updated jsFiddle, I have cleaned things up a bit.
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}
I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.
I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)
I have the next code to replace content using Backbone.js
jsfiddle
I don't know why the checkbox button grows when the content is replaced.
Simply, I use the next code to checkbox
$('.checkWeek').button();
I think the reason is because you keep calling the $('.checkWeek').button(); on every click so JQuery does something funny and adds a span within a span which causes the size to grow.
A simple fix is to not call the $('.checkWeek').button(); if the button already exists (or shown)
// if button already exists then dont add it again.
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
$('.checkWeek').button();
Look here: http://jsfiddle.net/Thxtr/3/
At the moment code stores the templates in div tags - every time you call button the template is modified. You can avoid that by using a script tag with type text/template so that it won't be executed as Javascript.
Rigth now:
<div data-template-name="central-home">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
</div>
</div>
Change to:
<script data-template-name="central-home">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" /><label for="checkWeekM">L</label>
</div>
</script>
With the Javascript unchanged the template will not be found. So you also have to update this line:
content.view = ...$.trim($("[data-template-name='"+ template_name +"'] div").html()...
With the requirement for the template to be inside a div removed:
content.view = ...$.trim($("[data-template-name='"+ template_name +"']").html() ...
Working fiddle
I'm guessing that $('.checkWeek').button() only needs to be called once per .checkweek element, or maybe just once in total.
If so then possible workarounds would be :
to execute $('.checkWeek').button() conditionally (though I'm not sure what the test might be).
to make the $('.checkWeek') selector more selective, ie select only the freshly added element.
if a destroy option exists, to call $('.checkWeek').button('destroy').button() (or similar - you will have to search through the plugin's API documentation).
Without a more complete understanding of the app (and the plugins), I can't tell which of these possibilities is most appropriate.