New to ionic I am having a play and have come across this issue. I have created an app that runs an XMLHttpRequest to get some data from a secure site. If I load the app's index.html file directly the data loads fine but not if I run ionic serve. The error is, I think, because the request is coming from localhost as on inspection I see the error.
Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.
I am interested to know if I am going to run into ionic specific issues if I continue testing the app directly from the index file, and/or is there a way of allowing the ionic serve method access the data?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-calm">
<button class="button icon ion-navicon button button-clear"></button>
<h1 class="title">Log</h1>
<button class="button icon ion-gear-b button button-clear"></button>
</ion-header-bar>
<ion-content>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
var url = "https://xxxxx/getLog.php";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('listLog').innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
<p id="listLog"></p>
</ion-content>
</ion-pane>
</body>
</html>
I solved the same issue by installing Allow-Control-Allow-Origin: * plugin in my Google Chrome.
Related
I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
I did "ionic start myApp sidemenu" to start a sidemenu app. It starts with the "Playlists" page with 6 items. I click on one of those, say "Raggae" and it takes me to the "Playlist" page. At this point, the sidemenu does not open when I sweep from left to right.
In the following plnkr example from another StackOverflow question, the sidemenu does open after I nagivate to the "Playlist" page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
http://plnkr.co/edit/0RXSDB?p=preview
Is this my local environment problem or something wrong with the sidemenu template code?
With a brute force method, I found out the ionic.bundle.js come with the "ionic start myApp sidemenu" is causing the problem. If I inlcude the ionic 1.0.0-beta.1 version as in the plnkr example, the problem is gone. But the beta version is causing other different behavior in navigation. Hopefully ionic gets better.
Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});
I am attempting to use a document ready function I found on your site to force a fancybox lightbox to appear when a page loads. Here is the code I am using, (I found it here on your site). It does force the fancybox to appear on page load, but it forces it to open in a new page and it loses it's modal properties when I add in the $document ready function.
I'm not terribly technical, but after hours of researching and trying several methods, I'm giving and seeking help. Any support would be greatly appreciated.
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<link media="all" rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.sameheight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
</head>
<body>
<div id="wrapper">
<a name="hidden_link" id="hidden_link" a class="lightbox" href="#popup01"></a>
</div>
<div class="popup-holder">
<div id="popup01" class="lb">
Your code is correct but you may missed to include css or js files for fancybox.
I'm trying to fix a display issue on my jQuery mobile site. It looks great in other browsers but when viewed on the iPhone in Safari, everything is super large and you cannot shrink the page with pinch.
For example a simple h2 element takes up most of the screen.
<meta name="viewport" content="width=device-width;
height=device-height; user-scalable=no" />
<title>Start</title>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=yes" />
<link rel="stylesheet" href="/static/css/android.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="https://www.google.com/jsapi?key=ABQIAAAApPeof0WyN6ORT7NeNop5OxQhS8mdepxW5-6qUjpskYmhafYcLRQjyW8D0bRdsydbD1maEkV9aSDKrw" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
// Check for iPhone4 Retina Display
if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
}
}
</script>
</head>
<body>
<div data-role="page" id="start">
<div data-role="header" data-theme="a">
<h1>Start</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<h2>Adventure with:</h2>
<div id="buttons">
Spam Master
CREATE NEW FOO
</div><!-- /buttons -->
</div><!-- /content -->
</div><!-- /page -->
</body>
You're almost there.
Try setting the initial-scale, that should do the trick.
<meta name="viewport" content="width=default-width, initial-scale=1" />
Related:
jQueryMobile viewport not working in Windows Phone
changing viewport based on device resolution
Hide Safari address bar and footer
jquerymobile and screen resizing
Is it possible to use jQuery to read meta tags
Having trouble using jQuery to set meta tag values
Yeah I know there is some reading to do ;)
To enable pinch: user-scalable=yes