Search


Tag filter edge cases

On this page:

Example 1 - Events list

Filter options

Language
Event location

No item match this combination of filters.

Source code
<section id="filteredEventsList" class="wb-tagfilter wb-paginate provisional" data-wb-paginate='{
	"itemsPerPage": 5,
	"section": ".events-list",
	"selector": "li",
	"uiTarget": "#filteredEventsListPagination"
}'>
	<h2>Example 1 - Events list</h2>
	<div class="row">
		<div class="col-xs-12 col-sm-4 col-lg-3">
			<details open>
				<summary>
					<h3>Filter options</h3>
				</summary>
				<div class="form-group mrgn-bttm-0">
					<fieldset>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Language</span></legend>
						<ul class="list-unstyled">
							<li class="radio">
								<label>
									<input type="radio" name="language" class="wb-tagfilter-ctrl" value="" checked> All
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__french"> French
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__english"> English
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
				<div class="form-group mrgn-bttm-0">
					<fieldset>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Event location</span></legend>
						<ul class="list-unstyled">
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__montreal"> Montreal
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__online"> Online
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__vancouver"> Vancouver
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
				<div class="form-group mrgn-bttm-0">
					<label for="dayList">Day of the week</label>
					<select id="dayList" name="dayOTW" class="form-control full-width wb-tagfilter-ctrl">
						<option value="">All</option>
						<option value="dayOTW_monday">Monday</option>
						<option value="dayOTW_tuesday">Tuesday</option>
						<option value="dayOTW_wednesday">Wednedsday</option>
						<option value="dayOTW_thursday">Thursday</option>
						<option value="dayOTW_friday">Friday</option>
						<option value="dayOTW_saturday">Saturday</option>
						<option value="dayOTW_sunday">Sunday</option>
					</select>
				</div>
			</details>
		</div>
		<div class="col-xs-12 col-sm-8 col-lg-9">
			<ul class="list-unstyled events-list wb-tagfilter-items" data-wb-json='{
				"url": "data_en.json#/events",
				"mapping": [
					{ "selector": "li", "attr": "data-wb-tags", "value": "/tags" },
					{ "selector": "h3", "value": "/title" },
					{ "selector": ".event-date", "value": "/date" },
					{ "selector": ".event-time", "value": "/time" },
					{ "selector": ".event-location", "value": "/location" },
					{ "selector": ".event-language", "value": "/language" }
				]
			}'>
				<template>
					<li data-wb-tags="">
						<h3></h3>
						<p><span class="event-date"></span> | <span class="event-time"></span></p>
						<p><strong>Location:</strong> <span class="event-location"></span>, <strong>Language</strong>: <span class="event-language"></span></p>
					</li>
				</template>
			</ul>
			<div class="wb-tagfilter-noresult">
				<p>No item match this combination of filters.</p>
			</div>
			<div id="filteredEventsListPagination"></div>
		</div>
	</div>
</section>

Page details

Date modified: