Hello last few days I am trying to learn call API from different site. Now I try to build a website like this. My task is call API from The MealDB and implement a site and also show API data in card view and when I click any card it's show another view where contain all ingredients
but I can't call the API from The mealDB I wanted to implement this website by calling the mealBD API. But whenever I tried it's not work as I want. I don't know how to call that API.
My project is given below :I can't call the API
this is my js code
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> displayFoods(data))
const displayFoods = foods =>{
const foodsDiv = document.createElement('food-items');
foods.forEach(meals=>{
const foodDiv = document.createElement('div');
foodDiv.className = 'meals';
const foodInfo = `
<h3>${meals.strMeal}</h3>
`;
foodDiv.innerHTML = foodInfo;
foodsDiv.appendChild(foodDiv);
});
}
I used bootstrap in html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cooking master</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="container">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Cooking master</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-end"
id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="#recipes">Recipes</a>
<a class="nav-link" href="#blog" tabindex="-1">Blog</a>
</div>
</div>
</div>
</nav>
</header>
</section>
<section class="container input-style">
<main class="d-flex justify-content-center">
<div class="input-group mb-3 input-filed ">
<input type="text" class="form-control" placeholder="Search for Meal...." aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text bg-color text-light" id="basic-addon2">Search</span>
</div>
</main>
</section>
<div id="food-items">
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
The result json is an object with property meals. So you cannot execute forEach on that. You need to run on foods.meals
Below is your working code.
(function(){
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> displayFoods(data))
const displayFoods = foods =>{
const foodItemsDiv = document.getElementById('food-items');
foods.meals.forEach(meal=>{
const foodDiv = document.createElement('div');
foodDiv.className = 'meal';
const foodInfo = `
<h3>${meal.strMeal}</h3>
`;
foodDiv.innerHTML = foodInfo;
foodItemsDiv.appendChild(foodDiv);
});
}
})();
<div id="food-items">
</div>
Try this in your browser console:
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> console.log(data))
You'll see an end result like this:
{
meals: [
{ // meal 1 },
{ // meal 2 },
{ // meal 3 },
{ // meal 4 }
]
}
Inside your displayFoods function, you're trying to call forEach on this data, but forEach can only operate on arrays, not objects.
Instead, you need to pass the meals array inside the returned data to your function:
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> displayFoods(data.meals)) // data.meals instead of data
Related
I have the following demo page to test Shaka Player for my use case. I'd like to play live content given in an mpd file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.2/shaka-player.compiled.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/4.3.2/controls.css">
<script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script src="main.js"></script>
<title>Salt TV Client</title>
</head>
<body>
<header id="header">
<h1 class="display-6 text-center">Salt TV Client</h1>
<hr />
</header>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<main class="container">
<h1>Guarda RSI La1 HD</h1>
<br />
<div class="ratio ratio-16x9" id="video-container">
<video controls id="video" playsinline></video>
</div>
</main>
<footer>
<hr />
<div class="container">
<span id="digital-clock"></span>
</div>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script>
const manifestUri = /* My URL */
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
async function initPlayer() {
// Create a Player instance.
const video = document.getElementById('video');
const player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
await video.play();
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
} catch (e) {
// onError is executed if the asynchronous load fails.
onError(e);
}
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
</html>
When I want to get acces to the ui to configure it, I get video.ui is undefined.
What could the problem be?
Thanks.
I'm expecting the video.ui Object to be defined, so that I can use it to configure the UI of Shaka Player.
I am trying to learn about javascript so this might be quite a noob question. I would appreciate if someone with more experience could see what I am attempting and correct any problems I have with the approach, so if this looks weird please let me know!
I have a side navigation bar that divides into different groups. Within each group there is an ul that contains some li, which themselves contain an a with two p tags nested. The reason for this nesting is that I want to have each side nav "button" look like it has a label (the first p) on the left and a number (the second p) on the right (like a number of notifications or something).
I want to add an event listener to each li.nav-task-list so that if that li or any of its descendants is clicked then it selects that li and gives access to the "group" that it belongs to (defined by the id in the div that is the grandparent to the selected li). I had problems with this because the e.target in the click event would return any of the li, a, or p elements.
I have pasted my solution and it seems to do what I want. But the problem is that this took a lot of effort and testing compared to the examples of event listeners that I was reading from, and this makes me think I have either misunderstood something or overcomplicated it somehow. This also seems like such a common thing to do, so I want to know if I have overlooked something.
Here is my code:
const sideBar = document.getElementById('sidebar');
const navTaskLists = document.getElementsByClassName('nav-task-list');
Array.from(navTaskLists).forEach(function(e) {
e.addEventListener('click', function() {
console.log(e.querySelector('p.label').innerText);
if (e.classList.contains('active')) {
return;
}
removeAllActive(navTaskLists);
let parentLi = e.closest('li.nav-task-list')
parentLi.classList.toggle('active');
let parentGroup = e.closest('div.nav-task-list-group')
if (parentGroup.id != '') {
console.log(`clicked in the ${parentGroup.id} group.`)
}
});
})
function removeAllActive(elements) {
// Loops over all elements and removes active class
Array.from(elements).forEach(function(e) {
e.classList.remove('active');
})
}
#sidebar {
min-width: 300px;
max-width: 300px;
}
.nav-group-header {
cursor: pointer;
}
.nav-task-list:hover {
background-color: #eee;
}
.nav-task-list.active {
background-color: #bed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col border" id="sidebar">
<div class="nav-task-list-group" id="group-one">
<ul class="nav flex-column">
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="today-task-list">
<p class="flex-grow-1 mb-0 label">G1 Item 1</p>
<p class="num-tasks mb-0 fs-6">3</p>
</a>
</li>
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="upcoming-task-list">
<p class="flex-grow-1 mb-0 label">G1 Item 2</p>
<p class="num-tasks mb-0 fs-6">21</p>
</a>
</li>
</ul>
</div>
<hr>
<div class="nav-task-list-group" id="group-two">
<ul class="nav flex-column">
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="today-task-list">
<p class="flex-grow-1 mb-0 label">G2 Item 1</p>
<p class="num-tasks mb-0 fs-6">3</p>
</a>
</li>
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="upcoming-task-list">
<p class="flex-grow-1 mb-0 label">G2 Item 2</p>
<p class="num-tasks mb-0 fs-6">21</p>
</a>
</li>
</ul>
</div>
</div>
<div class="col border">
Stuff
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
I'm currently working with news API and trying to populate different category (i.e sports, science, business etc) under different heading on the same page of the website, but failed to do so. Here I tried to use template literal, as first created a template literal in the api named category and initiated it using let. So there are two sections "Trending Blogs" and "You May Like" so here I wanna show two different category in the two different section respectively. Here I'm attaching the code in the following.
Here is the code in html
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/styles/utils.css" />
<link rel="stylesheet" href="/styles/navbar.css" />
<link rel="stylesheet" href="/styles/body.css" />
<script
src="https://kit.fontawesome.com/e582ecfb98.js"
crossorigin="anonymous"
></script>
<title>Document</title>
</head>
<body>
<!-- <h1>This is a blog site</h1> -->
<!-- Navbar starts from here -->
<nav class="navigation max-width-0 m-auto">
<div class="middle">
<b> Blogsite</b>
</div>
<div class="left">
<ul>
<li><a class="header-elements" href="./index.html">Home</a></li>
<li><a class="header-elements" href="./about.html">About</a></li>
<li><a class="header-elements" href="./contact.html">Contact</a></li>
</ul>
</div>
<div class="right">
<input type="text" placeholder="Article Search" />
<button class="btn"><i class="fa fa-magnifying-glass"></i></button>
</div>
</nav>
<!-- Navbar ends -->
<!-- body starts -->
<div class="content max-width-1 m-auto">
<h1 class="land-heading">Welcome to Blogsite</h1>
<p class="intro">
Atameo allows travellers to capture their trips in a completely new way.
It records your route, adds your photos, videos and music and turns your
adventures into your personal travel profile. Have all your travel
experiences in one place and find out more about your travel style by
diving into your personal travel statistics: How far did you travel last
year? What’s the highest point you have been to? How much of the world
have you seen? Inspire others to go out and explore, while getting
inspired by some of the most daring journeys of our time. Explore.
Capture. Inspire.
</p>
<hr />
<h1 class="land-heading">Trending Blogs</h1>
<div class="blog-section" id="blog-section">
</div>
<h1 class="land-heading">You may like</h1>
<div class="blog-section" id="blog-section2">
</div>
<h1 class="land-heading">Categories</h1>
<div class="blog-section" id="category">
<div class="r1c1 block">
<a href=""
><img
class="img"
src="https://www.nomadicmatt.com/wp-content/uploads/2022/07/parisnm3.jpeg"
alt="img"
/>
<p class="blog-title">NM+ Weekly Update: Europe Edition</p></a
>
</div>
</div>
</div>
<!-- Body ends -->
<!-- Footer starts -->
<div class="footer m-auto">
<label for="">Feedback</label>
<input type="text" class="" placeholder="First Name" />
<input type="text" placeholder="e-mail" />
<button type="submit" class="btn btn-foot">Send Feedback</button>
</div>
<div class="m-auto copyright">
<p>copyright 2022 #md_arif</p>
</div>
<!-- Footer ends -->
<script src="./scripts/app.js"></script>
</body>
</html>
`
Here is the code of vanilla-js
console.log("Here we go");
let blogSection = document.getElementById("blog-section");
let blogSection2 = document.getElementById("blog-section2");
function generateCards(e) {
const newXHRRequest = new XMLHttpRequest();
// let source = 'the-times-of-india';
let apikey = '75da3b7678de41fcb76359935aabdc3d'
let category = '';
newXHRRequest.open(
"GET",
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&pagesize=3&apiKey=${apikey}`,
true
);
newXHRRequest.getResponseHeader("content-type", "application/json");
newXHRRequest.onload = function () {
if (this.status === 200) {
let myCards = JSON.parse(this.responseText);
console.log(myCards);
let articles = myCards.articles;
// console.log(articles);
let itemsHtml = "";
articles.forEach((element) => {
// console.log(articles);
// category="sports";
console.log(element);
let items = `<div class="r1c1 block">
<a href="${element["url"]}" target="_blank"><img class="img" src=${element["urlToImage"]} alt="img">
<p class="blog-title">${element["title"]}</p></a>
</div>`;
itemsHtml += items;
});
blogSection.innerHTML = itemsHtml;
blogSection2.innerHTML = itemsHtml;
} else {
console.log("Some error occured");
}
};
newXHRRequest.send();
}
generateCards();
$(function(){ $.get("header.html", function(data){
$("#header").html(data); }); });
So I am eventually going to have to do this in java but for now I just want to do this in the javascript extension known as jquery but any format that makes this work will please me.
I have 2 files:
header.html
<!-- Header -->
<div class="row navigationBar">
<!-- Company Logo -->
<div class="col-2">
<img src="images/GCB.png" alt="GCB-logo" class="gcb-logo">
</div>
<!-- Top Bar -->
<div class="col-md-10">
<div class="top-navigationBar">
<nav class="navbar navbar-expand-md quick-help">
<!-- Collapse Button -->
<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Quick Help -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link black-font blue-line" href="">CONSULTATION</a>
</li>
<li class="nav-item">
<a class="nav-link black-font blue-line" href="">CUSTOMER SUPPORT</a>
</li>
<li class="nav-item">
<a class="nav-link black-font blue-line" href="">TIẾNG VIỆT</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Bottom Bar -->
<div>
<nav class="navbar navbar-expand-md bottom-navigationBar">
<div class="row bottom-navigationBar">
<!-- Quick Navigation -->
<div class="col-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<button type="button" class="btn btn-primary btn-sm thick-font button-flat-bottom">Checking</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Savings</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Loans</button>
</li>
</ul>
</div>
<!-- Bank Name -->
<div class="col-md-4">
<h1 class="bank-name">Go<span class="orange-text">Com</span>Bank</h1>
</div>
<!-- Login Form -->
<div class="login-container">
<form action="/action_page.php">
<input type="text" placeholder="Username" name="username">
<input type="text" placeholder="Password" name="psw">
<button type="button" class="btn btn-primary btn-sm">Login</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Header End -->
and the webpage
webpage.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="header"></div>
</body>
</html>
I am trying to load header.html and set it into the id=("header") of webpage.html
Currently the only code that works is $("#header").html("")
Using this format I can set things like
<p>Hello World</p>
but it doesn't work when I want to add the loaded header.html items.
--NEW CONTENT WITH ANSWER IN PROGRESS--
So none of the answers have even come close to being correct but I have came up with my own solution that should in theory work but I have been unable to implement it myself.
Before the res.send(/*HTML Code Here*/);
I propose this solution::
A: load the HTML file into a var
B: load the insertion code into another var
C: A.replace("ReplaceKeyword", B);
D: res.send(A);
This method has worked for me when I use java and it sometimes works with jQuery but I can't seem to find the appropriate syntax to do this inside of javascript.
If you can provide the code to implement this then I can mark your response as the answer.
Note
A is something like
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--InsertionPoint-->
</body>
</html>
B is something like
<p>Hello World</p>
Replace keyword in this instance would be ""
The End result that is sent in the res.send() is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
=====================================
try this
<script>
document.getElementById("header").innerHTML='<object type="text/html" data="header.html"></object>';
</script>
Edited for new method
i found this on w3school. I already try it and i think this can solve your problem
https://www.w3schools.com/howto/howto_html_include.asp
<script>
includeHTML();
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
elmnt.innerHTML = this.responseText;
}
if (this.status == 404) {
elmnt.innerHTML = "Page not found.";
}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
on your body tag add something like this
<div w3-include-html="header.html"></div>
as long as you add w3-include-html attribute it will work, and you can add your stylesheet at the top of webpage.html
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079