For every item in items I want to have a timer. I made a timer using javascript and I can show the timer for every single item. But when I want to show all the items in home page the timer is shown just for the last item. Is there any way to show the timer for all the items?
<div class="row m0 p0 justify-content-center">
{% for item in items %}
<div class="col-12 col-xs-6 col-md-4 card-item p0">
<div class="img-container">
<img class="rounded img-fluid img-thumbnail" src="{{MEDIA_URL}}{{ item.image }}" />
<div class="sold-img-item"></div>
{% if item.sold == 1 %}
<div class="sold">Sold
<div class="sold-price"><span>{{item.highest_bid_offer}} €</span></div>
</div>
{% endif%}
</div>
<h5 class="no-flow capital "><b>{{item.title}}</b></h5>
<div class="no-flow"><strong>Seller :</strong> {{item.seller}}</div>
<div class="no-flow">
<strong>Initial Price :</strong> <span>{{item.price}} €</span>
</div>
<input type="hidden" id="auction_status" name="auction_status" value="{{ item.auction_status }}"/>
<input type="hidden" id="end-time-fix" name="end-time-fix" value="{{item.auction_end_time}}"/>
<div class="timer-small" id="timer-small">
<div class="timer-small" id="days-small"></div>
<div class="timer-small" id="hours-small"></div>
<div class="timer-small" id="minutes-small"></div>
<div class="timer-small" id="seconds-small"></div>
</div>
<a class="divLinkkk" href="{% url 'item_detail' item.id %}"></a>
</div>
{% endfor %}
</div>
Elorbratiing what #Mithlesh has pointed out
You need to change your time code like this
<div class="timer-small">
<div class="timer-small days-small"></div>
<div class="timer-small hours-small"></div>
<div class="timer-small minutes-small"></div>
<div class="timer-small seconds-small"></div>
</div>
Then fix your javascript to work with class instead of id.
Related
so I'm building this online learning website, and I have a catalog of all courses where you can search for courses which titles or description contain the input in the search bar. I used bootstrap cards to make the catalog. It's working well, but on desktop I get empty spaces in place of the cards which are hidden, and the results show with big empty spaces between them is there were courses in between etc. No issue on mobile, all results show up vertically one after another. Is there a way to go around that? thanks!
Picture to see the "empty spaces"
JS code:
$('#live_search').on('keyup', function() {
let input = $(this).val();
$('.card').hide();
$('.card').filter(function() {
return new RegExp(input, 'i').test($(this).text())
}).show();
});
Cards:
<div class="search">
<form>
<label for="live_search">Rechercher une formation :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
</form>
</div>
<br>
<div class="container px-5 mb-3">
<div class="row">
{% for formation in formations %}
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
<div class="card-body">
<h5 class="card-title">{{ formation.title }}</h5>
<p class="card-text">{{ formation.description }}</p>
<a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
<span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
You're hiding the card but keeping the col-md-4 div. You can merge the col-md-4 and card divs.
Just hide the col-md-4 div by introducing a "wrapper" class (or whatever you want to call it)
JS Code
$('#live_search').on('keyup', function() {
let input = $(this).val();
$('.wrapper').hide();
$('.wrapper').filter(function() {
return new RegExp(input, 'i').test($(this).text())
}).show();
});
Cards
<div class="search">
<form>
<label for="live_search">Rechercher une formation :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
</form>
</div>
<br>
<div class="container px-5 mb-3">
<div class="row">
{% for formation in formations %}
<div class="col-md-4 wrapper">
<div class="card">
<img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
<div class="card-body">
<h5 class="card-title">{{ formation.title }}</h5>
<p class="card-text">{{ formation.description }}</p>
<a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
<span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
I tried posting before but I was not able to get a clear answer so I thought I would reframe it simply.
My template currently uses a for loop to print the posts of a "blog" and another for loop inside that to print comments belonging to the post.
Before I continue, just want to make it clear that my models and database is functioning. I even currently have a working comment section, it just keeps refreshing the page and so I would like to incorporate JS and AJAX instead.
Because I have multiple posts with their own comment sections, I tried creating individual id's for each form in the loop by saying . However, I am slightly confused as to how I am supposed to create an EventListener to make sure that no matter which of these forms are pressed, it takes the correct data and sends it to the backend.
Any help would be appreciated. Thank you! Code upon request is available. However, I would like to stress that it is unnecessary to ask for my model code as it works just fine.
{% for post in posts %}
<div class="mt-3 px-5 pt-4 pb-2 bg-white shadow-sm" style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
<div class="row">
<div class="col-xs-1 pl-4">
<img class="rounded-circle post-image" src="{{ post.author.profile.image.url }}" />
</div>
<div class="col-xs-4 pt-1">
<a class="mr-2 post-author-name" href="#">{{ post.author.first_name }} {{ post.author.last_name }}</a>
<small class="text-muted post-time"><br>{{ post.date_posted|date:"F d, Y" }}</small>
</div>
<div class="col-xs-7 ml-3 pt-2">
Click for more options
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="post-content">{{ post.content }}</p>
</div>
</div>
</div>
<div class="mb-3 pr-5 pt-4 pb-2 bg-light shadow-sm border-light" style="border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;">
<div class="col-sm-12 pl-5 pb-5">
<form class="form-inline" method="POST" style="display:flex" id="{{forloop.counter}}"> {% csrf_token %}
<input type="search" name="comment" placeholder="New comment" class="form-control mr-sm-2 p-4" style="flex-grow:1;">
<button name="post_id" class="btn btn-info my-2 my-sm-0 " value="{{post.id}}" onclick='update_comments("{{forloop.counter}}")'> Post </button>
</form>
</div>
{% for comment in post.comments.all %}
<div class="row">
<div class="col-xs-1 offset-1 pl-4">
<img class="rounded-circle comment-image" src="{{ comment.author.profile.image.url }}" />
</div>
<div class="col-xs-4">
<a class="mr-2 comment-author-name" href="#">{{ comment.author.first_name }} {{ comment.author.last_name }}</a>
<small class="text-muted comment-time"><br>{{ comment.date_posted|date:"F d, Y" }}</small>
</div>
</div>
<div class="row">
<div class="col-sm-12 offset-1">
<p class="comment-content">{{ comment.content }}</p>
</div>
</div>
{% empty %}
<div class="px-5">
<p>No comments for this post.</p>
</div>
{% endfor %}
</div>
{% endfor %}
I have 6 buttons which are options to buy something. You cannot make multiple choices but choose one and it automatically selects that item and reroutes you to checkout section. My question is, using Django, how do I embed the values of those buttons (ie. price, credits etc) into each button so they the ones used in the checkout. My initial method was that I created the items dynamically in Django.admin and instead of having a page in which you individually selected an item you had instead a checkboxes to select from whichever items I had created in the admin through a model (bono) I had created. However, I need the items to be hard coded into individual buttons rather than relying on Django.admin and the server.
I've attached a sample html and pic showing the buttons and will add any other items upon request. I simply had no clue which items I should include:
EDIT:
I am currently using a link tag to reroute to a different page but that does not post anything to the model.
The model for the packages is as follows:
class CreditPackage(models.Model):
name = models.CharField(max_length = 400, null=True, blank = True, verbose_name = 'Credit Package Name')
description = models.TextField(max_length = 10000, null=True, blank = True, verbose_name = 'Description')
price = models.IntegerField(null=True, blank = True, verbose_name = 'Price')
nr_credits = models.IntegerField(null=True, blank = True, verbose_name = 'Number of Credits:')
on_sale = models.BooleanField(null=False, blank = False, verbose_name = 'On Sale:')
I need to make the circles, upon clicking, pass the relevant info to that model and the reroute to a checkout.
The html of one of the buttons only:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint">
<a href="{% url 'student-packages' %}">
<div class="circle" style="background: #0045ab" ><span style="font-weight:bold; font-size:60px;" >3</span><br> Credits</div>
<div id="price">25€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">5€</span><br><br>
{% blocktrans %} Ideal if you want to<br>
try out Milingual {% endblocktrans %}</br>.
</div></a>
</div>
the full html of the page:
{% load static %}
{% load staticfiles %}
{% load i18n %}
{% block bonos %}
<div class="container" >
<div id='titleb' class="container">
<h2 style= "color:black; align=center">MILINGUAL BONO</h2>
</div>
<div id='titleb' class="container">
<h1 style= "color:black; align=center">MILINGUAL BONO</h1>
</div>
<div>
<p>{% trans 'The Milingual Bono offers you more classes for much lesser. It saves you the hasslse of pasying each time you book a class, at the same time offering you the flexibilty of attending any Milingual class or event, anytime you want. Pick the 3 class bono if you would like to give it a try firt or book the <b>season bono</b> for unlimited access for 3 months.' %}
</p>
</div>
<div>
<div class="row">
<!-- New set of columns, centered -->
<div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal">
<a href="{% url 'student-packages' %}">
<div class="circle" style="background: #0045ab" ><span style="font-weight:bold; font-size:60px;" >3</span><br> Credits</div>
<div id="price">25€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">5€</span><br><br>
{% blocktrans %} Ideal if you want to<br>
try out Milingual {% endblocktrans %}</br>.
</div></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-target="#login-modal">
<div class="circle" style="background: #58aeb4" ><span style="font-weight:bold; font-size:60px;">6</span><br> Credits</div>
<div id="price">39€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">21€</span><br><br>
{% blocktrans %} Ideal if you want to<br>
try Milingual or have attended <br>
a couple of classes. {% endblocktrans %}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
<div class="circle" style="background: #e8bf16"><span style="font-weight:bold; font-size:60px;">8</span><br> Credits
</div>
<div class="ribbon-wrapper-blue">
<div class="ribbon-blue">{% trans 'Most Popular' %}
</div>
</div>
<div id="price">50€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">30€</span><br><br>
{% blocktrans %} Ideal if you want to practice <br>
twice a week for a month {% endblocktrans %}
</div>
</div>
</div>
</div>
</div>
<span><br></span>
<div>
<div>
<div class="row">
<!-- New set of columns, centered -->
<div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal" >
<div class="circle" style="background: #a7a5a7"><span style="font-weight:bold; font-size:60px;">10</span><br>Credits
</div>
<div id="price">64€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">36€</span><br><br>
{% blocktrans %} Ideal if you want to make<br>
Milingual part of your routine {% endblocktrans %}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
<div class="circle" style="background: #c6595b"><span style="font-weight:bold; font-size:60px;">12</span><br> Credits</div>
<div id="price">79€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">41€</span><br><br>
{% blocktrans %} Ideal for multiple classes per<br>
week. {% endblocktrans %}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
<div class="circle2" style="background: #b18358"><span style="font-weight:bold; font-size:50px;">SEASON</div>
<div id="price">89€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">200€*</span><br><br>
{% blocktrans %} Get unlimited accee to <br>
classes as well as paid events<br>
for no extra cost. {% endblocktrans %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock bonos %}
Create a model (DataStorageModel in my example) that stores all of the info in your database and reference it by some name field.
put this name to your submit buttons with the name tag, e.g.:
<input id="create" type="submit" name="create" value="Create"/>
Then in your views.py check for the name in request.POST:
if request.POST.get('create'):
obj = DataStorageModel.objects.get(name='create')
...
Update:
I just saw that you intend to store prices within a html tag. NEVER DO THAT! People can just change these values... Give as little as possible to the client. Therefore you need a model to store your prices etc.
DataStorageModel(model.Model):
price = models.DecimalField(max_digits=8, decimal_places=2)
credits = models.PositiveIntegerField()
name = models.CharField()
I want to add if and foreach statement inside a class whenever the user select an item from the dropdown box.
The tags that should be added inside is:
#if($article->tags)
#foreach($article->tags as $articletag)
#if($articletag->tag == $(this).text())
$(this).text() is the text that the user clicks on the dropdownbox. The purpose of these if and foreach is to filter the table based on the filtername($this.text()) whenever the user choose an item from the dropdownbox. How do I do it?
HTML content before the JavaScript runs:
<div class="content">
#if($articles)
#foreach($articles as $article)
<div class="row article art-content">
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6 hidden-md hidden-lg">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
<img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6">
<h3 class="article-title">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
{{ $article->title }}
</a>
</h3>
<span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
<div class="spacer20"></div>
Read Article <i class="fa fa-chevron-right fa-fw"></i>
</div>
</div>
<hr/>
#endforeach
<div class="text-center">
{!! $articles->render() !!}
</div>
#else
<div class="row spacer50 text-center">
<div class="col-xs-12 spacer50">
<h4>The key you entered does not match any articles. <br/>Please click here to see a list of all available articles.</h4>
</div>
</div>
#endif
HTML content when the JavaScript executes:
<div class="content">
#if($articles)
#foreach($articles as $article)
#if($article->tags) //added line
#foreach($article->tags as $articletag) //added line
#if($articletag->tag == 'whatever text the dropdown clicks') //added line
<div class="row article art-content">
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6 hidden-md hidden-lg">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
<img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6">
<h3 class="article-title">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
{{ $article->title }}
</a>
</h3>
<span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
<div class="spacer20"></div>
Read Article <i class="fa fa-chevron-right fa-fw"></i>
</div>
</div>
<hr/>
#endif
#endforeach
#endif
#endforeach
<div class="text-center">
{!! $articles->render() !!}
</div>
#else
<div class="row spacer50 text-center">
<div class="col-xs-12 spacer50">
<h4>The key you entered does not match any articles. <br/>Please click here to see a list of all available articles.</h4>
</div>
</div>
#endif
JavaScript:
$('#tags li').on('click', function(){
$('.content').hide();
if($(this).text() == 'All')
$('.content').fadeIn('slow');
else {
//add the #foreach and #ifs
}
});
Looks like you are using Laravel Blade template engine, it is compiled in server. So it could not be changed by JavaScript. And Them could not be used together.
The code like this is wrong
#if($articletag->tag == $(this).text())
So Your need can not be achieved. Maybe you should change your thinking to find another way.
I have a client that wants to offer 4 different membership types and allow people to pay for each with either a credit card or PayPal. I created donation pages for each type of membership and payment method. I have to do that to tag each new member with their membership type and assign a tracking code.
I have created a radio button for each membership type and when a user clicks on a particular button, the appropriate donation form displays.
The html is:
<div class="row">
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="weekly"> <h3>Weekly</h3></label>
<h4>$1.00 per week</h4>
</div>
</div>
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="monthly"> <h3>Monthly</h3></label>
<h4>$19.95 per month</h4>
</div>
</div>
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="annual"> <h3>Annual</h3></label>
<h4>$25.00 per year</h4>
</div>
</div>
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="lifetime"> <h3>Lifetime</h3></label>
<h4>$999.00 for life</h4>
</div>
</div>
</div>
<div class="row">
<div class="weekly box">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "weekly" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "weekly_paypal" with "donation_partial" %}
</div>
</div>
</div>
<div class="monthly box">
<div class="row">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "monthly" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "monthly_paypal" with "donation_partial" %}
</div>
</div>
</div>
<div class="annual box">
<div class="row">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "one_time" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "one_time_paypal" with "donation_partial" %}
</div>
</div>
</div>
<div class="row">
<div id="lifetime box">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "one_time_999" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "lifetime_paypal" with "donation_partial" %}
</div>
</div>
</div>
</div>
The javascript is:
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="weekly"){
$(".box").not(".weekly").hide();
$(".weekly").show();
}
if($(this).attr("value")=="monthly"){
$(".box").not(".monthly").hide();
$(".monthly").show();
}
if($(this).attr("value")=="annual"){
$(".box").not(".annual").hide();
$(".annual").show();
}
if($(this).attr("value")=="lifetime"){
$(".box").not(".lifetime").hide();
$(".lifetime").show();
}
});
});
</script>
The script basically works but I am having 2 issues. First, even though on page load none of the radio buttons are checked all the donate forms are visible. Second, when I click on weekly, monthly or annual, the lifetime donation forms remain visible.
Ideally I would like the Weekly radio button to be checked by default and only that form display and obviously I'd like to find out how to hide the lifetime forms unless that radio button is clicked.
I believe you have some errors in the HTML code itself, is everything there nested correctly, like you intend it to...? Here's my approach :
function setDonation(radio){
var donations = ['weeklybox','monthlybox','annualbox','lifetimebox'];
for(var i=0;i<donations.length;i++)
document.getElementById(donations[i]).style.display = 'none';
document.getElementById(radio.value+'box').style.display = 'block';
}
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="weekly" checked onclick="setDonation(this);"> <h3>Weekly</h3></label>
<h4>$1.00 per week</h4>
</div>
</div>
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="monthly" onclick="setDonation(this);"> <h3>Monthly</h3></label>
<h4>$19.95 per month</h4>
</div>
</div>
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="annual" onclick="setDonation(this);"> <h3>Annual</h3></label>
<h4>$25.00 per year</h4>
</div>
</div>
<div class="col-md-3">
<div class="member-button">
<label><input type="radio" name="member" value="lifetime" onclick="setDonation(this);"> <h3>Lifetime</h3></label>
<h4>$999.00 for life</h4>
</div>
</div>
</div>
<div class="row">
<div class="weekly box" id="weeklybox">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "weekly" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "weekly_paypal" with "donation_partial" %}
</div>
</div>
</div>
<div class="monthly box" id="monthlybox" style="display:none;">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "monthly" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "monthly_paypal" with "donation_partial" %}
</div>
</div>
</div>
<div class="annual box" id="annualbox" style="display:none;">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "one_time" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "one_time_paypal" with "donation_partial" %}
</div>
</div>
</div>
<div class="lifetime box" id="lifetimebox" style="display:none;">
<div class="col-md-6">
<div class="donate-wrap-left">
{% subpage "one_time_999" with "donation_partial" %}
</div>
</div>
<div class="col-md-6">
<div class="donate-wrap-right">
{% subpage "lifetime_paypal" with "donation_partial" %}
</div>
</div>
</div>
</div>
</body>
</html>
Main points here :
Add IDs to all donation sections and hide all but the first section with display:none. The rest is done by the setDonation() function - I also assigned that function to those radios directly in HTML instead of by code, probably a matter of personal taste - but I would still recommend this, keeps everything cleaner and easier to read if you return to the code after some time.
First put a checked attribute in the default input
<input type="radio" value="weekly" name="member" checked="checked" />
Then follow the DRY principle, Don't repeat your self..
Create function, which handles hiding and showing based on the type
function showOnlyForType(type) {
var className = "." + type;
$(".box").not(className).hide();
$(className).show();
}
Do you already see, how your life gets easier?
If no, here an example:
$(document).ready(function(){
// call it to show only weekly type when ready
showOnlyForType('weekly');
// handle event..
$('input[type="radio"]').click(function(){
showOnlyForType(this.val())
});
});