I'm very new to Meteor, enjoying it and am making some test apps to build my skills.
I want to add a form that allows dynamic addition of a phone number field. The idea being that I'm adding a company into the collection/database and one company may have 0 phone numbers, another might have 3 and another might have 20. So I want to be able to press say, a PLUS button or similar and have the input fields appear in the HTML.
I've played around with sessions a little and think they may be the key to the puzzle.
I have the following so far (for this part of the app):
My HTML template:
<template name="organisationAddForm">
<h3>Add a new organisation</h3>
<form name="addForm">
<div class="row">
<div class="col-sm-4 col-lg-1">
<p>Name</p>
</div>
<div class="col-sm-4 col-lg-1">
<input type="input" name="newOrgName" placeholder="Organisation Name">
</div>
</div>
{{> addPhoneNumber}}
<div class = "row">
<div class="col-sm-4 col-lg-1">
<input type="submit" value="Add Organisation">
</div>
</div>
</form>
</template>
and
<template name="addPhoneNumber">
<h4>Phone Numbers</h4>
<ul>
{{#each phoneNumber}}
<li>Number: {{number}} </li>
{{/each}}
</ul>
[ Add Phone Number ]
</template>
So far my Javascript is incomplete as I'm a bit stuck:
Template.addPhoneNumber.events({
// when user clicks the Add Phone link
'click .add-phone': function(event){
event.preventDefault();
}
});
The idea with the above is:
1- User clicks the add-phone link which will add a value to the session.
2- The each loop will be looping through the session data and re-drawing the form with however many inputs the session data tells it to draw.
I hope that makes sense and it's focused enough.
I'm not asking for anyone to write code for me, more help me with direction (is this the right direction?) and suggestions on how to go about it. I want to learn programming and be better at this and am happy to do the hard yards. This has just got me stuck, so here I am. :-)
Any advice greatly appreciated.
Rob
Related
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
i am building a website using HTML and PHP.
just trying sample code below:
<span align="justify"
class="lead"
style="color:red;">Our ability to address urgency makes us special</span></span>
<p align="justify"
class="mb-20">Being the most renowned <b>event organizers in Hyderabad</b>, we understand it well that mood to make
some party doesn’t come with prior notices. It is the enthusiasm that transforms into happiness through the party at
that moment. And, once that moment passes, the enthusiasm level doesn’t remain the same.
We at booktheparty.in thoroughly understand the sudden exuberance to party hard well. </p>
</div>
</div>
</div>
</div>
<div class="col-md-6 wow fadeInLeft"
data-wow-duration="1s"
data-wow-delay="0.6s">
<div class="pr-40">
<h3 class="text-uppercase title"> <br /> </h3>
<div class="row"
style="margin-top:-7px;">
<div class="col-sm-12 col-md-12 mb-sm-20 wow fadeInUp"
data-wow-duration="1s"
data-wow-delay="0.5s">
<br>
the original color when we type codes in the editor is like in the below image,
in one page its showing differently, i dnt know what went wrong
can anyone tell me what could be wrong or is it fine?
To me it looks like you're missing a closing quote somewhere. This is because everything between quotes is orange, where as with the correct code, the orange part is before the quotes.
Try scrolling back up and seeing where it starts going green, that's where you're missing a quote.
Basically, in my template I have the following code:
<div class="normal-padding">
Quicksearch: <input type="text" id="searchBox"/>
</div>
<div class="ui divider"></div>
{{#each getChildren}}
<div class="normal-padding">
<div class="ui two column grid">
<div class="column" style="width:60px;">
<div class="squaredOne">
<input type="checkbox" value="{{_id.toHexString}}" class="selectedChild" id="{{_id.toHexString}}" >
<label for="{{_id.toHexString}}"></label>
</div>
</div>
<div class="column">
<label for="{{_id.toHexString}}">{{firstname}} {{lastname}}</label>
</div>
</div>
</div>
{{/each}}
Where getChildren is the data coming from mongo.
My question is this:
How can I use what's being typed in input#searchBox to add/remove members from the getChildren helper?
Example:
Typing "ar", will list only the records that start with "ar".
I can figure out the regex required, I'm just not sure how to do this in meteor the correct way. I especially want to stay away from manually manipulating the DOM.
I've tried some filtering packages, but they all query the database again, where I just want the data that's already in the client/browser to be changed.
In other words, not send a query down the wire again.
Thanks!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I am wondering what the best practice would be to manipulate certain elements in an html page using jquery. As it stands now, I have a panel, with an embedded form which includes an input box, checkbox, submit/reset/test buttons. Right now I have each of these elements assigned an id so I can take the appropriate actions as each element is changed/selected. However, I feel as if my code is becoming quite messy and unreadable by assigning and managing each element by id. I know that it is efficient for the browsers to select by id, but is it better to simply give the panel/form an ID, and then call different selectors inside of the panel/form? Are there any suggestions for selecting some of the elements I have assigned IDs below? (The ones I am modifying..etc). Thanks!
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default" id="sample_panel">
<div class="panel-heading">
Heading
</div>
<div class="panel-body">
<form role="form" id="form1">
<div class="form-group">
<h4>Subheading</h4>
<div class="form-group input-group">
<span class="input-group-addon" id="input_addon">some_text</span>
<input type="text" id="input1" class="form-control" placeholder="Enter text">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<span class="help-block">
<input type="checkbox" id="cb1" >some_text
</span>
</label>
</div>
</div>
<button type="submit" class="btn">Submit</button>
<button type="reset" class="btn id="reset_btn">Reset</button>
<button type="button" class="btn" id="test_btn">Test</button>
<i id="some_image"></i>
</form>
</div>
<div class="panel-footer" id="footer"></div>
</div>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
Remember that IDs are unique identifiers, and for that reason should have more specific names. I would use them only when they are actually necessary, and when a class wouldn't be a better way to identify them.
Pile on the classes, but use IDs a bit more sparingly. I struggled with this as well when writing my first MVC app. Good luck!
Don't forget there is a code review site on StackOverflow as well.
I give id's to major elements in the page that contain subsets of the page, and also important and unique elements that I would want direct access to. I don't give an id to each and every list item, link or div because it clutters the code and it's a potential maintenance nightmare. You won't select most elements of the page, and you'll often access multiple elements at the same time - classes are vastly more useful for this.
So while you are correct that accessing elements by id is very quick and efficient, the selector system is powerful and useful because you can select elements in a variety of ways. Take advantage of those other selection methods too, you'll get a lot more done with jQuery.
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)