If you press "Upload your file" in the test code below, the button text should change to "Uploading...", although in Safari it doesn't. Selecting a sufficiently large file should just give you time to observe the button. Comment out map div and it all works fine.
Here's the isolated test code, it took half a day to find that the map could be the cause, but I need to dig deeper. Interestingly, when copying the same code to JSfiddle it will not reproduce the bug, so you'll need to create your own html file.
<!DOCTYPE html>
<html>
<head>
<title>Google Map interfering with button event in Safari</title>
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
function init() {
var options = {
zoom: 8,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<form action="http://localhost" method="POST" enctype="multipart/form-data">
<!--comment map to see correct button behaviour in Safari-->
<div id="map" style="width:300px;height:300px"></div>
<p><small>Very large file please:</small> <input type="file" name="big"></p>
<button onclick="this.innerHTML='Uploading...'">Upload your file</button>
</form>
</body>
</html>
There were similar questions on SO before, but no solutions.
Related
Hi have some trouble getting started with the following code:
<html>
<head>
<script src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1574102238076"></script>
<script src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1574102238076"></script>
</head>
<body>
<div id="eChartVersionIt_33_0" style="height: 535px; width: 935px;" ></div>
<script>
function distrLocaEu(container, commandName) {
var myChart = echarts.init(document.getElementById(container));
option = {
backgroundColor: '#111',
geo: {
map: 'world',
},
}
myChart.setOption(option);
};
distrLocaEu('eChartVersionIt_33_0','ChartDistrLocaEu');
</script>
</body>
</html>
This should render an empty map of the world.
Indeed, copy/pasting it in JsFiddle works correctly.
If I put in a normal HTML file, both Firefox and Chrome show up a VERY corrupted world
Am I missing something very stupid?
figured it out. I was referring the libs using https while in dev mode (http)
Goal:
Update the visual position in bing map.
Problem:
If I add new latitude and logitude coordinate in the textbox, the bing should be displayed but it doesn't work.
Info:
*You need to use your own api key code.
*---http://jsbin.com/zegimofege/edit?html,console,output
Thank you!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- Reference to the Bing Maps SDK -->
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[your kep]'
async defer></script>
<script type='text/javascript'>
function GetMap()
{
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key',
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new Microsoft.Maps.Location(parseInt(document.getElementById("log")), parseInt(document.getElementById("lat"))),
zoom: 10
});
}
</script>
</head>
<body onload="GetMap();">
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
Log: <input type="text" id="log" value="51.50632"><br>
Lat: <input type="text" id="lat" value="-0.12714"><br>
</body>
</html>
You've added no code to do anything when the text box values are updated. Add events to them. Which event you use is up to you, some to consider, keyup, unfocus, or add an update button. In the event handler, get these values and convert to floats using parseFloat, then set the map view like this map.setView({ center: new Microsoft.Maps.Location(lat, lon) })
I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.
The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.
This is the simple xforms example:
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/>
<link type="text/css" rel="stylesheet" href="res/style.css"/>
<script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>
<script type="text/javascript">
function showOutdoorMap(id){
var map = L.map(id);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-i875mjb7'
}).addTo(map);
map.locate({setView: true});
}
</script>
</head>
<body onload="showOutdoorMap('map')">
<fieldset>
<label class="header">Demo:</label>
<div id="map" style='width:100%; height:250px;'/>
</fieldset>
</body>
</html>
The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:
if (animated) {
clearTimeout(this._sizeTimer);
/*return this;*/
}
I also had to comment this line in order to drag and drop with no problems:
/*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
I am using the jQuery Mobile date picker control but I cannot change any of the properties. For example, the following code will attempt to set the first day of the week to Wednesday, in the document ready function but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script>
$(document).ready(function()
{
$("#date").datepicker({ firstDay: 3 });
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
<div data-role="fieldcontain">
<input type="date" name="date" id="date" value="" />
</div>
</div>
</div>
</body>
</html>
Any ideas what I'm doing wrong? Is this failing to work because the date picker is already displayed?
I have managed to change to change the properties by changing the "jquery.ui.datepicker.mobile.js" file
To change the date format to : "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});
What happens if you try a different setter?
$('.selector').datepicker('option', 'firstDay', 1);
Your missing the bind()
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
Docs (At the bottom of the page): http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Also I like the DateBox a littler better IMO: http://dev.jtsage.com/jQM-DateBox/
I had a similar problem and had to change two lines in jquery.ui.datepicker.mobile.js
First, I needed to store the return value of the call to prevDp (line 18).
var value = prevDp.call( this, options );
Then I had to return this value instead of this (line 46)
return value;
Now you should be able to call the datepicker with options like Matt Ball suggested.