Dynamic List
How do I make an dynamic list?
This uses Ajax and templates to create a navigation list. It uses the Android theme of ChocolateChip-UI. Best viewed in Chrome or on an Android device.. What is a dynamic list? How do you make a dynamic list? This script and codes were developed by Robert Biggs on 24 August 2022, Wednesday.
Dynamic List - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic List</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.android-3.0.4.min.css'>
</head>
<body> <nav class="current"> <h1>Recipes</h1>
</nav>
<article id="recipes" class="current"> <section> <ul class="list" id='recipesList'></ul> </section>
</article>
<nav class="next"> <a href="#" class="button back">Recipes</a> <h1 id='recipeTitle'>Recipe</h1>
</nav>
<article id="detail" class="next"> <section> <h2>Ingredients</h2> <ul class="list"><li><ul id='ingredients'></ul></li></ul> <h2>Directions</h2> <ul class="list"><li><ol id='directions'></ol></li></ul> </section>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.0.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Dynamic List - Script Codes JS Codes
var list = '<li data-goto="detail" id="[[= data.id ]]" class="nav"><h3>[[= data.title ]]</h3></li>';
var tempList = $.template(list);
var templ8 = '<li>[[=data]]</li>';
var tmpTempl8 = $.template(templ8);
var recipesList = $('#recipesList');
var recipes;
$.ajax({ url : 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/recipes.js', type: 'GET', success: function(data) { recipes = JSON.parse(data); recipes.forEach(function(ctx, idx) { //console.dir(ctx) recipesList.append(tempList(ctx)); }); }
});
recipesList.on('singletap', 'li', function() { var recipeID = $(this).attr('id'); var recipe = recipes.filter(function(ctx) { return ctx.id === recipeID; }); $('#ingredients').empty(); recipe[0].ingredients.forEach(function(ctx) { $('#ingredients').append(tmpTempl8(ctx)) }) $("#directions").empty(); recipe[0].directions.forEach(function(ctx) { $('#directions').append(tmpTempl8(ctx)) }); $('#recipeTitle').html(recipe[0].title);
});
Developer | Robert Biggs |
Username | rbiggs |
Uploaded | August 24, 2022 |
Rating | 3 |
Size | 2,257 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
IOS 7 Segmented Control | 2,577 Kb |
A Pen by Robert Biggs | 2,103 Kb |
IOS 7 Transparent Sheet | 2,719 Kb |
Navigation List | 1,903 Kb |
Stepper for Android | 1,649 Kb |
Navigation List | 2,703 Kb |
IOS 7 Horizontal Paging | 2,133 Kb |
Simple List | 1,675 Kb |
Simple Navigation List | 2,261 Kb |
Busy Indicator V5 | 2,055 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Kudos Please | TimPietrusky | 6,624 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
Loading animation | Codeams | 2,408 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Template | Indra_z85 | 2,323 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!