I have downloaded a JQuery-plugin for a searchable drop down list. Here is the source
I fill the list using D3.js. It works well for few elements, but when I want to load all elements (around 1200) the design is crashed and the list is displayed in the top so that I can't see the items and there is no scroll-bar.
Here how it looks like when I load the whole elements:
Here we can see from the developer tool in the browser that the data is loaded correctly:
The console shows these violations:
Here is my D3.js code:
d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
if (error) throw error;
d3.select("#my-select").selectAll(".option")
.data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
.enter().append("option")
.text(function (d) { return d; })
.attr("value", function (d) { return d; });
});
Html script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Crypto Trading Project</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sol.css">
</head>
<body>
<header>
<div class="collapse bg-light" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-6 py-4">
<select id="my-select" name="Cryptos" multiple="multiple"></select>
</div>
<div class="col-sm-6 py-4">
From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
</div>
<div class="col-sm-3 py-4">
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Cryptos VA
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/date-time-picker.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sol.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/loadsol.js"></script>
<script type="text/javascript">
$(function() {
// initialize sol
$('#my-select').searchableOptionList({
showSelectAll: true
});
//dateTimePicker
$('#J-demo-04').dateTimePicker({
limitMax: $('#J-demo-05')
});
$('#J-demo-05').dateTimePicker({
limitMin: $('#J-demo-04')
});
});
</script>
</body>
</html>
How can I have it work?
I could finally figure it out. The idea is simply to fix the height of the active container and add a scroll bar. So I add in the sol.css file to the .sol-container.sol-active .sol-selection-container class these two css attributes:
height: 300px;
overflow-y: auto;
Related
I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>
Hey can someone please help this is driving me nuts. I need to make a url from the 3 filters 'ecvnd', 'ecdiv', and 'ecclas' and I have values for all 3 plus the base url. I'm stuck and I think this wouldn't be that difficult if my colleague didn't leave me guessing. This is for ecom site so I need the filters to display the proper products in the link.
the values are as such: ECVND=59375, ECDIV=53 and ECCLAS=59
the closest I got was, but not returning the right products.
https://shop.michells.com/orders/catalog/filter_ECVND=59375&filter_ECDIV=53&ECCLAS=59
As you can see from the snippet below, the filters are hidden in the url on click but when you arrive I need the proper filters to display as there are thousands of other products in the system.
ss snippet hint
<!DOCTYPE html>
<!-- saved from url=(0050)http://getbootstrap.com/examples/starter-template/ -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Henry F. Michell's</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/css/michells.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="/js/respond.js"></script>
<script src="/js/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<link href="/css/michells.ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>
<link href="/css/michells.notie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!-- Bootstrap core CSS -->
<link href="//fonts.googleapis.com/css?family=Bree+Serif" media="screen" rel="stylesheet" type="text/css">
<link href="/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/select2.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/css/select2-bootstrap.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>
<body>
<div class="subpage hidden-print">
<img src="/img/bg-subpage-banner.jpg">
</div>
<div class="container-fluid">
<!-- HEADER -->
<div class="header">
<!-- green bar across the top -->
<div class="row hidden-print">
<div class="col-xs-12 col-lg-11 lg-right navigationBar">
<!-- contents of the green nav bar -->
<!-- expanded links -->
<ul class="hidden-xs hidden-sm">
<li>Michells.com|</li>
<li>Contact Us|</li>
<li class="hoverMenu">My Account
<ul class="dropdown-menu myaccountMenu left" role="menu">
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Plant Report</li>
</ul>
|</li>
<li>Saved Carts|</li>
<li>Account 1 <a class="small" href="/orders/login/logout">Logout</a></li>
</ul>
<!-- mobile menu -->
<div class="hidden-md hidden-lg right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Michells.com</li>
<li>Contact Us</li>
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Saved Carts</li>
<li>Plant Report</li>
</ul>
</div>
</div>
<!--/mobile menu -->
<!-- /nav bar contents -->
</div>
</div><!-- /green nav bar -->
<img class="logo" src="/img/michells-logo.png">
<div class="mobilelogoutIcon visible-xs hidden-print"><a class="small" href="/orders/login/logout"><i class='fa fa-sign-out'></i></div>
<div class="tabletWelcome hidden-xs hidden-print">
<div>1 <a class="small" href="/orders/login/logout">Logout</a></div>
</div>
<div class="minicart hidden-print">
<a href="/orders/cart/reviewcart">
<i class="fa fa-shopping-cart"></i>
<span class="shoppingCartQty">0</span>
<span class="items"> Items</span>
</a>
</div>
</div>
<!-- / HEADER -->
<!-- Vendors -->
<div class="contents vendorselect">
<h1><span class="hidden-xs"> Online Ordering: </span>Vendors</h1>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 loginform">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<form id="run" action="/orders/catalog/filter" method="post">
<p>Please select a vendor to view their products</p>
<select name="filter_ECVND" id="filter_ECVND" class="form-control">
<option>Select Vendor</option>
<option value='940' >Agri Starts (940)</option><option value='1004' >Aldershot (1004)</option><option value='72761' >Aris (72761)</option><option value='26600' >Aris Horticulture Inc (26600)</option><option value='3650' >Athena Brazil (3650)</option><option value='6795' >Blue Heron (6795)</option><option value='9735' >Botany (9735)</option><option value='07600' >Bountiful Farm (07600)</option><option value='9225' >Burchell Nursery (9225)</option><option value='10500' >Cal Seedling (10500)</option><option value='11740' >Casa Flora (11740)</option><option value='921' >Cohen Nurseries (921)</option><option value='14085' >Colony (14085)</option><option value='13688' >CLI (13688)</option><option value='18997' >Dummen (18997)</option><option value='18997' >Dummen Group (18997)</option><option value='18997' >Dummen USA (18997)</option><option value='22470' >Dummen/Fides (22470)</option><option value='19300' >Duwaynes (19300)</option><option value='47200' >Ecke (47200)</option><option value='47200' >Ecke Geraniums, LLC (47200)</option><option value='20100' >Eckert's Greenhouse (20100)</option><option value='20415' >Ekstrom (20415)</option><option value='20710' >Emerald Coast Growers (20710)</option><option value='21320' >Euro American (21320)</option><option value='14085' >F Henny (14085)</option><option value='21901' >Fairy Gardening (21901)</option><option value='22844' >Floral Plant Growers (22844)</option><option value='23720' >Four Star (23720)</option><option value='22702' >Geraniums (22702)</option><option value='26572' >Green Fuse (26572)</option><option value='26473' >Greenheart (26473)</option><option value='26760' >Gro 'N Sell (26760)</option><option value='26750' >Gro Link (26750)</option><option value='26920' >Gulley (26920)</option><option value='26920' >Gulley Greenhouse (26920)</option><option value='35290' >Knox Nursery (35290)</option><option value='35499' >Koba (35499)</option><option value='35500' >Kogut (35500)</option><option value='35700' >Kube Pak (35700)</option><option value='36091' >Lancaster Farms (36091)</option><option value='38030' >Lucas Greenhouses (38030)</option><option value='28480' >Marjama (28480)</option><option value='39345' >Mast Young Plants (39345)</option><option value='40185' >Meadowview (40185)</option><option value='43322' >Morris (43322)</option><option value='43370' >Mountain Creek (43370)</option><option value='46928' >Obersinner (46928)</option><option value='49150' >Pell Greenhouse (49150)</option><option value='51480' >Plainview Growers (51480)</option><option value='51480' >Plainview Growers Inc (51480)</option><option value='51500' >Pleasant View (51500)</option><option value='51555' >Plug Connection (51555)</option><option value='53625' >Reardon (53625)</option><option value='56105' >Russell (56105)</option><option value='57600' >Scott Farms (57600)</option><option value='59375' selected>Silverleaf Greenhouses (59375)</option><option value='59680' >Skagit Gardens (59680)</option><option value='61100' >Spada Nursery (61100)</option><option value='61166' >Speedling Blairsville (61166)</option><option value='61160' >Speedling Inc (61160)</option><option value='61160' >Speedling Inc. (61160)</option><option value='62850' >Sun Gro (62850)</option><option value='32690' >Sunfire (32690)</option><option value='63290' >Swift Greenhouse (63290)</option><option value='22701' >Syngenta (22701)</option><option value='22701' >Syngenta Flowers (22701)</option><option value='22700' >Syngenta Flowers, Inc (22700)</option><option value='51555' >The Plug Connection (51555)</option><option value='66546' >Twin Srpings (66546)</option><option value='68065' >Van Essen (68065)</option><option value='69605' >Wagner Greenhouses Inc (69605)</option><option value='69899' >Walters Gardens (69899)</option><option value='70250' >Welby (70250)</option><option value='72050' >Woodburn Nursery (72050)</option><option value='72055' >Woodburn Nursery (72055)</option> </select>
<div class="btncontainer right">
<button type="submit" class="btn btn-default right">Select</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- / Vendors -->
</div><!-- /.container -->
<div class="footerouter hidden-print">
<div class="footerinner">
<footer class="row">
<div class="col-xs-12 col-lg-4 row center">
<div class="col-xs-12 col-lg-10 col-lg-offset-1 row">
<img src="/img/michells-logo.png" class="footerlogo">
<p class="stayconnected"><em>Stay Connected</em></p>
<div class="col-xs-3"><img src="/img/icon-fb.png"></div>
<div class="col-xs-3"><img src="/img/icon-tw.png"></div>
<div class="col-xs-3"><img src="/img/icon-in.png"></div>
<div class="col-xs-3"><img src="/img/icon-gp.png"></div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Main</strong></li>
<li>Home</li>
<li>About Us</li>
<li>Sales & Service</li>
<li>Michell's Product Catalog</li>
<li>Availability</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Products</strong></li>
<li>Seeds</li>
<li>Nursery</li>
<li>Plugs </li>
</ul>
</div>
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Exclusive Partners</strong></li>
<li>Green Fuse</li>
<li>CLI</li>
<li>Fairy Flowers</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Online Ordering</strong></li>
<li>Shop Now</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
<div class="col-xs-12 footerDisc">Pricing subject to change depending upon volume</div>
</footer>
<div class="pagebottom">
<span class="getupdates"><em>Get Updates!</em></span>
<a target="_blank" class="signup" href="http://visitor.r20.constantcontact.com/d.jsp?llr=gpmby6oab&p=oi&m=1115542303206&sit=6diisxiib&f=2dbee31f-253a-4d91-a0f8-4a2206e36974">Sign Up for Email Updates</a><span class="small">Michell's <span class="Labels">2017</span>. All rights Reserved. <span class="bar">|</span> Sitemap<span class="bar">|</span>Terms & Conditions<span class="bar">|</span>Privacy Policy</span>
</div>
</div>
</div>
<div class="device-xs visible-xs hidden-print"></div>
<div class="device-sm visible-sm hidden-print"></div>
<div class="device-md visible-md hidden-print"></div>
<div class="device-lg visible-lg hidden-print"></div>
<div class="device-landscape visible-landscape hidden-print"></div>
<div class="device-portrait visible-portrait hidden-print"></div>
<!-- Bootstrap core JavaScript
================================================== -->
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/hfm.js"></script>
<script type="text/javascript" src="/js/hfm.vendors.js"></script>
<script type="text/javascript">
//<!--
hfm.vendors.init();
//-->
</script>
<script type="text/javascript">
jQuery('.hoverMenu').hover(
function() {
jQuery(this).addClass('open');
}, function() {
jQuery(this).removeClass('open');
}
);
</script>
</body>
</html>
Thank you so much in advance.
I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!
I have followed different solution here in stacj overflow with regards to coinslider not moving. So here's mine. It seems that I dont know how to make it move.
here's my code.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="LeavemanagementFinal.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CrossXTrain - Home</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/coin-slider-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<%--<style type="text/css">
.frame
{
font:12px arial;
width:200px;
height:200px;
border:none;
overflow:hidden;
border:1px solid black;
padding:5;
}
</style>
<script language="javascript">
i = 0
var speed = 1
function scroll() {
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) { i = 0 }
t1 = setTimeout("scroll()", 10)
}
</script>--%>
</head>
<body onload="scroll()">
<div class="divpage">
<img src="images/header2.png">
<div class="divmenu">
<a class="FontStaticMenuItemStyle" href="index.aspx"> Home</a>
<a class="FontStaticMenuItemStyle" href="leavemanagementlogin.aspx"> Leave Management</a>
<a class="FontStaticMenuItemStyle" href="news.aspx"> News</a>
<a class="FontStaticMenuItemStyle" href=""> Articles</a>
<a class="FontStaticMenuItemStyle" href="aboutus.aspx"> About Us</a>
<a class="FontStaticMenuItemStyle" href="contactus.aspx"> Contact Us</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#news').news();
});
</script>
<div class="mainbanner" id="news" >
<img src="images/BUBLES.jpg" />
<img src="images/CrossXtrain.jpg"/>
<img src="images/CrossXtrain3.jpg"/>
<img src="images/CrossXtrain4.jpg"/>
<img src="images/CrossXtrain5.jpg"/>
<img src="images/CrossXtrain6.jpg"/>
<img src="images/CrossXtrain7.jpg"/>
<img src="images/CrossXtrain8.jpg"/>
<img src="images/CrossXtrain9.jpg"/>
</div>
<div class="clear"> </div>
<div class="mainadfooter">
<input type="image" class="secondinput" src="images/BUBLES.jpg"/>
<input type="image" class="thirdinput" src="images/HCS.jpg" onclick="javascript: window.location.href = 'http://www.healthcaresynergy.com/'"/>
<input type="image" class="thirdinput" src="images/fusionplus.png" onclick="javascript: window.location.href = 'http://sync.fusionpl.us//'"/>
<input type="image" class="thirdinput" src="images/DoubleRule_Logo#2x.png" onclick="javascript: window.location.href = 'http://www.doublerule.com/'"/>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
<div class="footer"><p>Copyright © 2014. CrossXTrain Company Inc. All rights reserved. | Leave Management System - ISD (Php)</p></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#news').news();
});
</script>
Thank you so much all.
Your script needs to be inside the html tags.
I'm now implement Windows Phone with Phonegap Cordova 2.0.0 and Jquery Mobile 1.1.1 final
and I'm be stuck with using local JSON file due to Window Phone Emulator not load JSON data
to <select> element while both iOS and Android emulators run smoothly. And this is my snippet code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/jqm-icon-pack-2.1.2-fa.css" />
<script type="text/javascript" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">
function changeBaseAmount() {
alert($('#baseAmount').val());
}
$.getJSON('json/currencies.json',
function (data) {
alert("get json");
$.each(data, function (key, value) {
$('#currency1').append("<option value='" + key + "'>" + value + "</option>");
$('#currency2').append("<option value='" + key + "'>" + value + "</option>");
});
});
</script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Convert Currency</h1>
</div>
<div data-role="content" data-theme="b">
<div id="baseAmountDiv" data-role="fieldcontain">
<label for="baseAmount">Amount:</label>
<input id="baseAmount" type="text" value="" onchange="changeBaseAmount()"></input>
</div>
<div id="currency1Div" data-role="fieldcontain">
<label for="currency1">Currency From:</label>
<select id="currency1" onchange="changeCurrency1()">
<option value="ZZ">Please Select Currency From</option>
</select>
</div>
<div id="currency2Div" data-role="fieldcontain">
<label for="currency2">Currency To:</label>
<select id="currency2" onchange="changeCurrency2()">
<option value="ZZ">Please Select Currency To</option>
</select>
</div>
<div id="resultAmountDiv" data-role="fieldcontain">
<label for="resultAmount">Result:</label>
<input id="resultAmount" type="text" value="" readonly="readonly" style="background-color: silver"></input>
</div>
</div>
<div data-role="footer" data-theme="b"></i></div>
</div>
</body>
</html>
Cordova for WP7 has its own implementation of XHR requests in order to support fetching local data. See the following:
https://issues.apache.org/jira/browse/CB-208
You might have to use $.ajax in order for this to work properly.