rails date_select failing when flash tries to display in rails - ruby
I ran into a snag that I cannot figure out what the problem is, I am sure its something incredibly easy to figure out but being new to rails I am stumped.
I have a nice little new.html.erb in one of my controllers that says enter some information:
<h1>Verify your Credentials</h1>
<%= form_tag(:action => 'create') do %>
<br>
<p>Enter your ID -OR- SSN:<%= text_field_tag "theID" %></p>
<p><%= date_select("dob", start_year: 1900, order:[:month,:day, :year]) %></p>
<p><%= submit_tag %></p>
<% end %>
Fair enough, this submits to create as per the action in the controller where i do some validation (make sure they selected a proper birthday and filled out the SSN/ID).
So this is what I have
def create
#userid = params[:theID]
#dob = params[:dob]
if #userid.empty?
flash[:error] = "You need to enter yoru valid ID or your SSN"
render :new
end
#yes I knwo this check is bogus, I really need to make sure its not a date from like today at least...
if #dob.empty?
logger.debug "Made it to userid empty"
flash[:error] = "You must include your date of birth"
render :new
end
end
Mostly easy peasy, I know the DOB check is bogus but what happens is if I put in no ID, and click submit or what not then I get the error :
NoMethodError at /create_my_aaccount
undefined method '{:start_year=>1900, :order=>[:month, :day, :year]}' for #<ActiveSupport::HashWithIndifferentAccess:0x4afec50>
On the line:
5 <%= date_select("dob", start_year: 1900, order:[:month,:day, :year]) %>
So not sure why it breaks the second time through after the render :new
If i really looked at the error it almost seems that the code to generate the flash might be malformed and making the error the second time through when the flash is trying to display (but I never touched the flash code from application being built originally by generator). So yah totally stuck, and I know this is probably stupid easy to fix...just lack of experience.
new.html.erb :
<h1>Verify your Credentials</h1>
<%= form_tag(:action => 'create') do %>
<br>
<p>Enter your ID -OR- SSN:<%= text_field_tag "theID" %></p>
<p><%= date_select("dob", start_year: 1900, order:[:month,:day, :year]) %></p>
<p><%= submit_tag %></p>
<% end %>
HTML Output of the view that breaks
(Caveat HTML output BEFORE the second render :new of the view cause that goes right to error)
So also should be noted, I can take out the date field ion the above erb and it all works fine... so maybe its NOT the flash message I dunno.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Myaccount</title>
<meta name="description" content="Myaccount">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/dataTables/src/demo_table_jui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/create_my_aaccount.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/details.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/emergency_notification.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/recovery.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/create_my_aaccount.js?body=1" type="text/javascript"></script>
<script src="/assets/details.js?body=1" type="text/javascript"></script>
<script src="/assets/emergency_notification.js?body=1" type="text/javascript"></script>
<script src="/assets/helpdesk_home.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/recovery.js?body=1" type="text/javascript"></script>
<script src="/assets/dataTables/jquery.dataTables.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="w4HKsIXFvZU85/8Lfo2Sw1jdotohbNTaikD6y8lZ+fI=" name="csrf-token" />
</head>
<body class="create_my_aaccount new">
<div class="navbar navbar-fixed-top">
<nav class="navbar-inner">
<div class="container">
Myaccount
<ul class="nav">
<li>
Help Desk Login
</li>
</ul>
</div>
</nav>
</div>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<h1>Verify your Credentials</h1>
<form accept-charset="UTF-8" action="/create_my_aaccount" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="w4HKsIXFvZU85/8Lfo2Sw1jdotohbNTaikD6y8lZ+fI=" /></div>
<br>
<p>Enter your ID -OR- SSN:<input id="theID" name="theID" type="text" /></p>
<p><select id="dob_{:start_year=>1900, :order=>_:month, :day, :year}_1i" name="dob[{:start_year=>1900, :order=>[:month, :day, :year]}(1i)]">
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option selected="selected" value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<select id="dob_{:start_year=>1900, :order=>_:month, :day, :year}_2i" name="dob[{:start_year=>1900, :order=>[:month, :day, :year]}(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option selected="selected" value="11">November</option>
<option value="12">December</option>
</select>
<select id="dob_{:start_year=>1900, :order=>_:month, :day, :year}_3i" name="dob[{:start_year=>1900, :order=>[:month, :day, :year]}(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option selected="selected" value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</p>
<p><input name="commit" type="submit" value="Save changes" /></p>
</form>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
It turns out that the issue was two (maybe three fold):
First:
#dob = params[:dob]
Is not a valid date, I had to do the following:
dob = params[:dob];
#bdate = Date.new dob["bday(1i)"].to_i, dob["bday(2i)"].to_i, dob["bday(3i)"].to_i
assuming my view had bday defined as:
<p><%= date_select("dob", "bday", start_year: 1900, order: [:day, :month, :year]) %></p>
Then after that, it turns out the rails error message was quite nice telling me I had multiple directions..so I consolidated to this:
if #userid.empty? or #bdate.today?
logger.debug "Made it to userid empty"
flash[:error] = "Please enter a valid ID and select a valid birthdate"
redirect_to action: 'new'
end
And I used a redirect not a render because it also stated execution does not stop and in the case of my create method the above code is in, I need it to on error.
Related
AMP: How to submit form on change event with condition
I have couple linked dropdowns and want to prevent form submit on change event if linked dropdown is empty.
<form id="foo">
<select name="first" on="change:AMP.setState({settings: {first: event.value}}),foo.submit" >
...
</select>
<select name="second" on="change:AMP.setState({settings: {second: event.value}}),foo.submit" >
<option value=0> Please select </option>
...
</select>
</form>
Can i check state and then submit form if the value is appropriate? Something like:
<select name="first" on="change:AMP.setState({settings: {first: event.value}}),settings.second ? foo.submit : nothing to do" >
for the first dropdown to avoid form submit when I select new value, because second not welected yet.
Tried make it with validation, but it not work with dropdown, input works fine.
<input type="text"
id="show-first-on-submit-name"
name="name"
placeholder="Digit..."
required
on="change:AMP.setState({settings: {testing: event.value}}),requirements-form.submit"
pattern="^([1-9][0-9]*)$">
<span visible-when-invalid="valueMissing"
validation-for="show-first-on-submit-name"></span>
<span visible-when-invalid="patternMismatch"
validation-for="show-first-on-submit-name">
Please enter not '0'
</span>
<select name="purpose"
id="purpose"
pattern="^([1-9][0-9]*)$"
required
on="change:AMP.setState({settings: {purpose: event.value}}),requirements-form.submit">
<option value="0">Please select</option>
<option value="1">One</option>
</select>
<span visible-when-invalid="valueMissing"
validation-for="purpose">missing</span>
<span visible-when-invalid="patternMismatch"
validation-for="purpose">wrong</span>
Validating form by converting input status into an amp-state object and checking them when change event occurs is a little circuitous.
In my opinion it would be more easier to use HTML5 Form validation API (AMP use it as well) to handle input validation works. All you need to do is add required attribute to your <select> element and remove onChange validation logic.
Here is a simple example:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<form target="_blank" action="/">
<select name="tier1" required>
<option value="">Please select</option>
<option value="opt1">tier1 - opt1</option>
<option value="opt2">tier1 - opt2</option>
</select>
<select name="tier2" required>
<option value="">Please select</option>
<option value="opt1">tier2 - opt1</option>
<option value="opt2">tier2 - opt2</option>
</select>
<input type="submit" value="submit" />
</form>
</body>
</html>
Example screenshot:
Autologin VBScript not working for PeopleSoft
In Peoplesoft ERP, there are many Processes which need to be run manually, once you login into PeopleSoft. We intend to automate this process, using VBS, since it justs involves a few clicks. However, we stuck at the very first step, Login into the Peoplesoft. Below is the code as of now which we have tried. This opens the login page, but nothing further happens. Can someone help to log us in?
EDIT : We are in IE11
WScript.Quit Main
Function Main
Set IE = WScript.CreateObject("InternetExplorer.Application", "IE_")
IE.Visible = True
IE.Navigate "our URl"
Wait IE
Set Helem = IE.document.getElementByID("userid")
Helem.Value = "username"
Set Helem = IE.document.getElementByID("pwd")
Helem.Value = "password"
Set Helem = IE.document.Forms(0)
Helem.Submit
End Function
Sub Wait(IE)
Do
WScript.Sleep 500
Loop While IE.ReadyState < 4 And IE.Busy
Do
WScript.Sleep 500
Loop While IE.ReadyState < 4 And IE.Busy
End Sub
Sub IE_OnQuit
On Error Resume Next
WScript.StdErr.WriteLine "IE closed before script finished."
WScript.Quit
End Sub
Please find below the HTML code:
<html dir=ltr lang=en>
<head>
<title>Oracle PeopleSoft Sign-in</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script language="JavaScript">
var sDomain = ";
try {
document.domain = ";
}
catch (err) {; }
</script>
<style id="ptfb" type="text/css">body{display:none;}</style>
<script type="text/javascript">
if (self === top) {
var fb = document.getElementById("ptfb");
fb.parentNode.removeChild(fb);
} else {
try {
top.location = self.location;
} catch(ex) {}
}
</script>
<link type="text/css" href="/PMXFGL01/signin.css" rel="stylesheet">
<script type="text/javascript" src="/PMXFGL01/signin.js"></script>
</head>
<body onload="ptSignon().login();">
<div id="pswrapper">
<form id="login" name="login" method="post" action="?&cmd=login&languageCd=ENG" autocomplete="off">
<input type="hidden" id="timezoneOffset" name="timezoneOffset" value="0">
<input type="hidden" id="ptmode" name="ptmode" value="f">
<input type="hidden" id="ptlangcd" name="ptlangcd" value="ENG">
<input type="hidden" id="ptinstalledlang" name="ptinstalledlang" value="GER,UKE,DAN,HUN,CFR,SLK,ENG,CZE,FRA,NOR,CRO,POR,ARA,ZHT,JPN,ZHS,RUS,POL,T HA,ITA,GRK,ROM,KOR,TUR,SER,SVE,ESP,DUT,MAY,BUL,HEB,FIN,VIE,SLV">
<div class="signonMain">
<img src="/PMXFGL01/images/Header.png" class="ps-staticimg" alt="Oracle PeopleSoft Sign-in" title="Oracle PeopleSoft Sign-in" >
<div class="ps_signinentry" >
<div id="ptloginerrorcont" class="ps_login_error" >
<div class="ps_login_error_inner" role="heading" aria-level="2">
<a id="error_link" name="error_link" tabindex="1"><img src="/PMXFGL01/images/PT_LOGIN_ERROR.gif" alt="Error"></a>
<div class="psloginerror" id="discovery_error" name="discovery_error" role="alert" aria-live="assertive" ></div>
<span class="psloginerror" id="login_error" name="login_error" role="alert" aria-live="assertive">User ID and Password are required.</span>
</div>
<div class="ps_box-control psloginerror" id="browsercheck_error" name="browsercheck_error" aria-live="assertive" role="alert"></div>
</div>
<div>
<span class="ps_label-show" id="ptLabelUserid"><label for="userid">User ID</label></span>
</div>
<div class="ps_box-control">
<input type="text" id="userid" name="userid" value="xxx" title="User ID">
</div>
<div>
<span class="ps_label-show" id="ptLabelPassword"><label for="pwd">Password</label></span>
</div>
<div class="ps_box-control">
<input type="password" id="pwd" name="pwd" title="Password" >
</div>
<div>
<span class="ps_label-show" id="ptLabelSelect"><label for="ps_select_box">Select a Language</label></span>
</div>
<div id="ps_select_parent" >
<div id= "ps_select_box" class="ps_box-control">
<select id="ptlangsel" name="ptlangsel" title="Select a Language" class="ps_select" onChange="ptSignon().changeLangFunc(this, event)">
<option value="ENG" title="English">English</option>
<option value="UKE" title="UK English">UK English</option>
<option value="ESP" title="Spanish">Español</option>
<option value="DAN" title="Danish">Dansk</option>
<option value="GER" title="German">Deutsch</option>
<option value="FRA" title="French">Français</option>
<option value="CFR" title="Canadian French">Français du Canada</option>
<option value="ITA" title="Italian">Italiano</option>
<option value="HUN" title="Hungarian">Magyar</option>
<option value="DUT" title="Dutch">Nederlands</option>
<option value="NOR" title="Norwegian">Norsk</option>
<option value="POL" title="Polish">Polski</option>
<option value="POR" title="Portuguese">Português</option>
<option value="ROM" title="Romanian">Română</option>
<option value="FIN" title="Finnish">Suomi</option>
<option value="SVE" title="Swedish">Svenska</option>
<option value="TUR" title="Turkish">Türkçe</option>
<option value="CZE" title="Czech">Čeština</option>
<option value="JPN" title="Japanese">日本語</option>
<option value="KOR" title="Korean">한국어</option>
<option value="RUS" title="Russian">Русский</option >
<option value="THA" title="Thai">ภาษาไทย</option>
<option value="ZHS" title="Simplified Chinese">简体中文</option>
<option value="ZHT" title="Traditional Chinese">繁體中文</option>
<option value="ARA" title="Arabic">العربية</option>
<option value="VIE" title="Vietnamese">Tiẽng Việt</option>
<option value="BUL" title="Bulgarian">български</option>
<option value="CRO" title="Croatian">hrvatski</option>
<option value="GRK" title="Greek">Ελληνικά</option>
<option value="HEB" title="Hebrew">עברית</option>
<option value="MAY" title="Bahasa Malay">Bahasa Melayu</option>
<option value="SER" title="Serbian">српски</option>
<option value="SLK" title="Slovak">slovenčina</option>
<option value="SLV" title="Slovenian">slovenščina</option>
</select>
</div>
</div>
<div class="ps_box-button">
<input name="Submit" type="submit" class="ps-button" value="Sign In" aria-label='To enable Accessibility mode, please check the checkbox "Enable Accessibility Mode" before you sign in. Sign In'>
</div>
<div class="ps_box-button">
<input type="checkbox" name="accessible" id="accessible">
<label for="accessible">Enable Accessibility Mode</label>
</div>
</div>
<div class="ps_box-link">
<span class="ps-link"></span>
</div>
<img src="/PMXFGL01/images/Footer.png" width="100%" alt="">
<footer id="ptfooter" class="ps_footer_text ">Copyright © 2000, 2015, Oracle and/or its affiliates. All rights reserved. </footer>
</div>
</form>
</div>
</body>
</html>
the following is working for me on IE11:
Function Main
Set IE = WScript.CreateObject("InternetExplorer.Application", "IE_")
IE.Visible = True
IE.Navigate "http://mysite/psp/myenvironment/?cmd=login"
Wait IE
With IE.Document
.getElementByID("userid").value = "myUsername"
.getElementByID("pwd").value ="myPassword"
.getElementsByName("Submit")(0).click
End With
End Function
The select2 plugin don't work in laravel 5
I want t o use Multiple select boxes for tags and head section i put:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
My view:
<div>
{!! Form::label('tags','Select Tags:') !!}
<select class="form-control select2-multi" multiple="multiple" name="tags">
#foreach ($tags as $tag)
<option value='{{ $tag->id }}'>{{ $tag->name }}</option>
#endforeach
</select>
<script type="text/javascript">
$(.select2-multi).select2();
And in the browser i get this:
enter image description here
$(document).ready(function() {
$(".js-example-basic-single").select2();
$(".js-example-basic-multiple").select2();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<br>
<strong>Single Select</strong>
<select class="js-example-basic-single form-control">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<br><br>
<strong>Multi Select</strong>
<select class="js-example-basic-multiple form-control" multiple>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
It's working perfectly fine.
make sure you've included all the required css and js plugins
NOTE:
Add this class for single select js-example-basic-single option
js-example-basic-multiple for multi-select option
Codeigniter form_open not submitting
I've got the following simple search page. 3 fields (one with fixed value) and submit button. When I click submit nothing happens at all. not even reload or anything. the button does nothing. Ignore the arabic in there, I have a feeling it got to do with arrangements of divs or placement of form_open.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>منزلي</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>support/css/main.css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
منزلي
</div>
<ul id="list-nav">
<li>للإتصال بنا </li>
<li>عن الموقع</li>
<li>منازل للبيع</li>
<li>منازل للإيجار</li>
<li>الرئيسية</li>
</ul>
</div>
<?
$this->load->helper('form');
form_open('search/search_properties'); ?>
<div id="center">
المدينة:
<select name="city">
<option>الخبر</option>
<option>الدمام</option>
<option>الظهران</option>
</select>
<br><br>
Type: <input type="text" value="flat" name="propertyType"/> <br><br>
حدود السعر:
<select name="range">
<option> <20000 </option>
<option>20000-30000</option>
<option>30000-40000</option>
<option>40000-50000</option>
<option> >500000 </option>
</select>
<br><br>
<input type="submit" value="بحث"/>
</form>
</div>
<div id="footer">
<p>2012 منزلي ©</p>
</div>
</body>
</html>
Any idea why this is happening?
thanks all for support
<?
$this->load->helper('form');
form_open('search/search_properties'); ?>
should be
<?
$this->load->helper('form');
echo form_open('search/search_properties'); ?>
Windows Phone not load local JSON file with $getJSON
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.