Comments (3)
ZaBAOW
commented on July 22, 2024
config file used to load js files (config.js)
// config.js
requirejs.config({
baseUrl: 'js',
paths: {
jquery: ['jquery-3.2.1.min'],
materialize: ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize', 'materialize.min'],
methods: 'Custom-scripts/methods',
}
});
BATTUTA! function code (js/methods.js)
define(['jquery', 'materialize'], function($){
var currentCities=[];
// This is a demo API key that can only be used for a short period of time, and will be unavailable soon. You should rather request your API key (free) from http://battuta.medunes.net/
var BATTUTA_KEY= "bb03b960b7d675d47e5d78b1795da95c";
// Populate country select box from battuta API
url="https://battuta.medunes.net/api/country/all/?key="+ BATTUTA_KEY +"&callback=?";
$.getJSON(url,function(countries)
{
console.log(countries);
$('#country').material_select();
//loop through countries..
$.each(countries,function(key,country)
{
$("<option></option>")
.attr("value",country.code)
.append(country.name)
.appendTo($("#country"));
});
// trigger "change" to fire the #state section update process
$("#country").material_select('update');
$("#country").trigger("change");
});
$("#country").on("change",function()
{
countryCode=$("#country").val();
// Populate country select box from battuta API
url="https://battuta.medunes.net/api/region/"
+countryCode
+"/all/?key="+BATTUTA_KEY+"&callback=?";
$.getJSON(url,function(regions)
{
$("#region option").remove();
//loop through regions..
$.each(regions,function(key,region)
{
$("<option></option>")
.attr("value",region.region)
.append(region.region)
.appendTo($("#region"));
});
// trigger "change" to fire the #state section update process
$("#region").material_select('update');
$("#region").trigger("change");
});
});
$("#region").on("change",function()
{
// Populate country select box from battuta API
countryCode=$("#country").val();
region=$("#region").val();
url="https://battuta.medunes.net/api/city/"
+countryCode
+"/search/?region="
+region
+"&key="
+BATTUTA_KEY
+"&callback=?";
$.getJSON(url,function(cities)
{
currentCities=cities;
var i=0;
$("#city option").remove();
//loop through regions..
$.each(cities,function(key,city)
{
$("<option></option>")
.attr("value",i++)
.append(city.city)
.appendTo($("#city"));
});
// trigger "change" to fire the #state section update process
$("#city").material_select('update');
$("#city").trigger("change");
});
});
$("#city").on("change",function()
{
currentIndex=$("#city").val();
currentCity=currentCities[currentIndex];
city=currentCity.city;
region=currentCity.region;
country=currentCity.country;
lat=currentCity.latitude;
lng=currentCity.longitude;
// $("#location").html('<i class="fa fa-map-marker"></i> <strong> '+city+"/"+region+"</strong>("+lat+","+lng+")");
$("#location").html('<span class="random-sentence">This is were the results will show up</span>');
});
//-------------------------------END OF SELECT CASCADING-------------------------//
});
HTML (index-good.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>practice</title>
</head>
<body>
<div class="section no-pad-bot yellow lighten-3">
<div id="show-case" class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m12">
<div class="icon-block">
<h2 class="center black-text light header subtitle"><i class="fa fa-file-code-o"></i> Brew Informer</h2>
<div class="col s4">
<label class="left-align" for="country">Country</label>
<select class="brwoser-default" id="country"></select>
</div>
<div class="col s4">
<label class="left-align" for="region">Region</label>
<select class="brwoser-default" id="region"></select>
</div>
<div class="col s4">
<label class="left-align" for="city">City</label>
<select class="autocomplete" id="city"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s2 m2"></div>
<div class="col s6 m6">
<div id="location"></div>
</div>
</div>
<div class="brewery-list"></div>
</div>
</div>
</div>
</body>
<script data-main="config" src="require.js"></script>
<script>
require(['config'], function(){
require(['Custom-scripts/jqueryFile'])
})
</script>
</html>
from brewformer.
trystant
commented on July 22, 2024
I think that this is ready to be closed, as well.
from brewformer.
ZaBAOW
commented on July 22, 2024
I added Velocity as an argument in the require method in method.js where materialize and jquery are both working, and now everything is hunky dory with the two libraries. No errors.
from brewformer.
Related Issues (13)
- request rate limits? HOT 1
- Tooltips don't like commas HOT 1
- jQuery not recognized on page ready HOT 2
- possible deprecation
- Callback(); error HOT 2
- Type to Search HOT 1
- Request Limit HOT 3
- Sending requests as JSON HOT 3
- Add aria accessibility attributes to brewformer HOT 4
- Interpreter error messages from catch method HOT 1
- beer review search HOT 1
- Brewformer ver 1.0.0 checklist HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from brewformer.