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.
Related
I want to add datetimepicker into my in my laravel 8 app with jquery 3.4/bootstrap 4.6 , but adding m
#section('headerscripts')
<link rel="stylesheet" href="{{admin_assets}}/css/jquery.fancybox.min.css"/>
<link rel="stylesheet" href="{{admin_assets}}/css/selectize.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
#stop
...
#section('footerscripts')
<script src="{{admin_assets}}/js/jquery.fancybox.min.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/widgets/select2.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/summernote.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/AutoNumeric/AutoNumeric.js"></script>
<script src="{{admin_assets}}/js/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
...
$(document).ready(function () {
$('#dob').datetimepicker();
...
<div class="form-group">
<label for="user_id">
User <span class="text-danger">*</span>
</label>
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-addon">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
But having datetimepicker on form(without any errors in browser's console)
it looks like icons are not supported : https://prnt.sc/1r10yxn
If to uncomment line in
#section('headerscripts')
section
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
all icons of datetimepicker are shown ok, but I have some design breaks on my page.
I think that is a not goodidea to add 3.3.7/css/bootstrap.min.css into my bootstrap 4.6 for icons support.
If there is a way to fix it correctly?
Maybe are some some bettre datetimepicker libraries for my app?
Thanks!
It's not wise to use both version of Bootstrap. Some css elements may be changed or deprecated that cause your design broken.
I suggest using daterangepicker at here
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input id="my-calendar" type="text" name="date">
<i class="fa fa-calendar" aria-hidden="true"></i> <!-- Using Font Awesome -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$('#my-calendar').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
locale: { format: 'DD/MM/YYYY' },
});
</script>
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;
I'm trying to use the package bootstrap-datetimepicker. I had already followed the installation tutorial. But I couldn't accomplish to get it to work. I imported the files required into app\publicfolder as well.
My Folder Structure
public folder structure
My blade file
<html>
<head>
<title>Laravel Bootstrap Datepicker</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JS AND CSS -->
<script type="text/javascript" src="{{ URL::asset('js/jquery-3.3.1.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="{{ asset('css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
</head>
<body>
<!-- DATATIME PICKER CODE -->
<img src="{{asset('goku.jpg')}}" alt="Mountain View">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
</body>
</html>
My Result
The result I'm getting is this, an import with a fail icon. And nothing showing up while clicking.
I am using phonegap and jquery mobile to build a web app, django on the server side. First, i start out from index.html page,and inject a login form from server into index.html and change page to the jquery mobile page containing the sign in form. But the problem is that the form is getting submitted but not in ajax, but if i test it in web browser,it works. I have already white listed the domain name in config.xml file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div class="app" style="display:none;">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div data-role="header">
<h1>DOCTORSLOG</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
$(function(){
$.ajax({
url: 'http://doctorslog.net/mobile/login-test/',
success: function(data){
//append the response(sign-in.html) to the body
$('body').append(data);
}
});
});
</script>
</body>
</html>
sign-in.html
<div data-role="page" data-fullscreen="true" id="login">
<div data-role="header" data-theme="b">
<h1 id="title">DOCTORSLOG</h1>
</div>
<div data-role="content">
<form id="sign_in_form" method="post" action="http://doctorslog.net/mobile/login/">{% csrf_token %}
<div data-role="fieldcontain">
<label for="id_username" style="font-size: 1.3em;line-height: 350%;">Username</label>
<input id="id_username" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="text" maxlength="30" name="username" autocomplete="off">
</div>
<div data-role="fieldcontain">
<label for="id_password" style="font-size: 1.3em;line-height: 350%;">Password</label>
<input id="id_password" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="password" name="password">
</div>
<div style="width: 100%;text-align: center;font-size: 1.6em;">
<input id="sign-in-btn" type="submit" data-inline="true" value="Sign me in" />
</div>
<input type="hidden" name="next" value="{% firstof next '/home/' %}"/>
<input id="hiddenID" type="hidden" name="regID" value=""/>
</form>
</div>
<script>
$(function(){
//change active page to this page and since it is a jquery mobile page with data-role=page,i expect automatic ajax submission on clicking submit button
$(':mobile-pagecontainer').pagecontainer('change','#login');
$('#sign_in_form').trigger('create');
});
</script>
</div>
The question is, if i can make Ajax GET request,why can not i make POST request. Any help is appreciated. Thanks.
Ok, i have solved this issue by disabling jquery mobile default form hijacking by setting data-ajax="false" on the form tag and submitting the form by $.ajax . Nothing like $.mobile.allowCrossDomainPages worked. And i also have set Access-Control-Allow-Origin response headers on the server side , really did not know if this is required.
Here is the script to submitform -
$(function(){
$('#sign_in_form').submit(function(e){
e.preventDefault();
$.mobile.loading('show');
var url = $(this).attr('action');
var data = $(this).serializeArray();
$.ajax({
beforeSend:function(jqXHR,settings){
jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
url:url,
type:'POST',
data:data,
crossDomain:false,
success: function(data){
$.mobile.loading('hide');
$('body').append(data);
}
});
});
});
I have the following form:
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% session.invalidate(); %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Hi</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css">
<script type="text/javascript" src="/js/custom.modernizr.js"></script>
</head>
<body>
<div class="row" style="height: 150px;"> </div>
<div class="row">
<div class="radius panel large-6 small-6 columns small-centered large-centered">
<div><h2>Hi</h2></div>
<div id="loginMessage" class="loginError">${loginMessage}</div>
<form:form commandName="loginForm" id="loginForm" name="loginForm" method="post" action="/do/authenticate" class="custom">
<form:label path="email">Email:</form:label>
<form:input path="email"/>
<form:label path="password">Password:</form:label>
<form:input path="password" type="password"/>
</form:form>
<div class="row">
<div class="large-offset-6 small-offset-6 large-6 small-6 columns" style="text-align: right;">
<button class="tiny button">Register</button>
<button class="tiny button">Reset</button>
<button class="small success button" style="margin-left: 5px;" onclick="document.forms[0].submit();">Login</button>
</div>
</div>
</div>
</div>
<div id="IE8Modal" class="reveal-modal">
<h2>We're Sorry</h2>
<p class="lead">This site does not support older versions of Internet Explorer</p>
<p>We recommend you upgrade to a modern browser, such as Firefox</p>
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/foundation.min.js"></script>
<script type="text/javascript" src="/js/login.js"></script>
<script>
var isIE8 = false;
if (document.all && document.querySelector && !document.addEventListener) {
isIE8 = true;
}
if (isIE8) {
$('#IE8Modal').foundation('reveal', 'open');
}
</script>
Note that when this jsp is compiled, those
<form id="loginForm" name="loginForm" class="custom" action="/do/authenticate" method="post">
<label for="email">Email:</label>
<input id="email" name="email" type="text" value=""/>
<label for="password">Password:</label>
<input id="password" name="password" type="password" value=""/>
</form>
And the following /js/login.js :
$(document).ready(function () {
$(document).foundation();
$("#loginForm").validate({
rules: {
email: { required: true, minlength: 6, maxlength: 40 },
password: { required: true, minlength: 8, maxlength: 40 }
},
messages: {
email: { required: "Please enter an email address", minlength: "Email address must be at least 6 characters long" },
password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long" }
}
});
});
And it's not validating. It submits, with no messages in the console.
There is no such thing as jQuery .exists(), unless you have a plugin or a function that defines it. There is no need to test for an element's existence with jQuery since it does it automatically.
$(document).ready(function() {
// if ($("#loginForm").exists()) { // <-- remove this invalid method
$("#loginForm").validate({
// ...
Since your button is outside of your form, use a click handler to trigger the submit.
$('#login').click(function() {
$("#loginForm").submit();
});
HTML:
<button id="login" class="small success button" style="margin-left: 5px;">Login</button>
DEMO: http://jsfiddle.net/fJnpX/1/