I've built an Ember.JS app using the latest Bootstrap.css/js for styling. In one of my templates, I have a button that triggers an action that disables the button and sets it's text to "loading" via the Bootstrap function described here. I access the button using jQuery from within my action as follows:
$('.find').button('loading'); //Starts "Please Wait" message
This worked great when running the ember app a server on my desktop. However, I'm presently trying to package the app into a Phonegapp app, initially in iOS. Whenever the action fires in the simulator, I get the following error:
I'm beginning to suspect this may be due to my action-firing button not being accessible through the class with jQuery like on desktop? But I'm not terribly sure as this is my first Phonegap app. Many thanks if someone can clear this up.
Got it! It was solved by an answer on this question.
I don't think that JQuery is being loaded into the page.
You have referenced it as:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
which says use whatever protocol the current page is being server
from. On a mobile device you are being served from file:// so the
actual request the browser makes to fetch the script is:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
You need to specify the scheme you want to use or else include it in
the PG project itself.
With me, it wasn't my jQuery not being loaded, but rather my Bootstrap.js! When you follow the CDN instructions on the bootstrap website, the URLs are similarly formatted starting with "//" (known as a "protocol-relative URL" or also "network-path reference") instead of the explicit "http://". Making the changed fixed the issue!
Related
If you take a look at this page http://manvanstage.com.s3-website.eu-west-2.amazonaws.com/ and right click on it and choose "View page source" you will find for example the text "100s Man With Van Providers" inside <script type="text/javascript"> instead of inside inside an HTML tag.
These tags are sent by the back-end API to the front-end (Nuxt.js/vue.js)
I tried to use Vue.js lifecycle created and mounted.
What I'm doing wrong?
I know this is bad for SEO.
Update:
Part of this web page I used no-ssr. Do you think this maybe the cause of the issue?
I used npm run build and deploy the application on Node.js severer.
maybe you should check mode property is correctly set 'universal' in nuxt.config.js
https://nuxtjs.org/api/configuration-mode/
Update:
I think it is because you fetch data in created or mounted so they are still not server-side rednder
if you want show something content in source to imporve SEO then fetch your data in asyncData()
example:
before
created(){
this.getSomethingFromAPI()
}
after
asyncData(){
this.getSomethingFromAPI()
}
FileRun has a beautiful File-Explorer Google-Drive styled. You can testdrive it here FileRunDemoSite
When I download a File I get to choose if I want to open the file directly in a Office Application.
When I click on Office, google prompts me with a Chrome Open File Dialog. The File opens directly from the location instead of being savend in /downloads/ folder.
How can I achieve this behavior? All existing answers on SA state that this is not possible, so this might be interesting to others as well. Not even google has implemented this. Is there a cross-browser solution?
Onedrive does it as well:
Credit to Thomas2D to get me on the right track. How it basically works is:
If you develop an application you can register a new protocol with the operation-system. http:// will be handled by your default browser. applicationX:// will be handled by applicationX, ms-word:// will be handled by word. If you click on a link the browser/operating-system looks up which application should handle the protocol an pass the request on to this application.
For Office documents the URI is a bit more complex ms-excel:ofv|u|http://contoso/Q4/budget.xls. You can open it readonly/ for edit / as a template. Check out this document for a detailed description of all the options: Office URI Schemes
For other applications check the URI Schemes with that application.
How to use it on a website:
It is not advisable to set a link to an application in a Dom element href attribute. You have no way of checking if the application is installed or not.
If you use Javascript you can check if the request times out / fails and use http:// instead.
. Set the protocol in a href: window.location.href = encodeURI('ms-excel:ofe|u|http://example.com/excel.xlsx') or by setting the the location.protocol, https://www.w3schools.com/jsref/prop_loc_protocol.asp
There is a jQuery Plugin to do that :jquery.applink.js
I personally think that this is accomplished by starting application via specific url.
I know that this works on iOS for launching application. In iOS it was done by something (simillar to mailto:example#example.com)
<script type="text/javascript" charset="utf-8">
window.location = "myapplication://myparams";
</script>
EDIT: I finally get it, you have to use application url scheme. For example, if you want to open your Excel file via browser, you have to use this JS code.
window.location.href = encodeURI('ms-excel:ofe|u|http://example.com/excel.xlsx');
So, we have a mobile download site that we want to bypass if the user already has our app installed, and open our app. We are using the branch javascript code to try to accomplish this task. We have our branch key where I have 'my_branch_key', and we copied the rest of the code below directly out of the branch instructions. And, of course, it is failing to redirect our mobile users. I imagine the problem is the lack of some sort of app identifier in the code, but we could not find any instructions on where to add that. Anyone know what we're missing and where we need to add it. Any advice would be greatly appreciated.
// load the Branch SDK file
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('my_branch_key');
// define the deepview structure
branch.deepview(
{
'channel': 'mobile_web',
'feature': 'deepview',
data : {
'source': 'website'
}
},
{
'open_app': true
}
);
Additional info: We noticed an oddity when trying to test this, for a couple of our iPhone users, it seems to work perfectly, but for the rest of the iPhone users and all the android users it still fails to redirect.
Alex with Branch.io here: the automatic open_app: true setting actually doesn't work in iOS 9 with Safari, due to some changes Apple made to Universal Links in iOS 9.3. This is a fairly recent change, so our docs haven't been updated quite yet. It's annoying, I agree...
The best workaround is to put a button on the page with deepviewCta(). Visitors will have to click it to open the app. We realise this is not ideal, but it's the best option for Apple's current system.
The other option you can try is enabling your own domain for Universal Link. That way whenever a URL at your domain is clicked, your app will launch immediately and the site will never even be loaded.
Just spent about 5 hours sorting out this issue, so I thought sharing how I overcame it would be helpful to someone and save them some time (it seems to be a pretty recent fix - 9 hours ago at the time of posting this question - which I found here).
I am using jQuery version 1.10.1.
Overview
I am building a Facebook tab application. It is a competition entry form where the visitor will enter some information and upload a photo that they took on a recent holiday. I have the form working in all browsers before being embedded into Facebook.
The form is submitted using $.post(). The PHP script that jQuery points to in this process is on the same domain as the form itself.
Before you can submit the form, you must upload a file. The file upload process is built like so:
There is a <div> which acts as a button. Within this div, there is an <input type="file" /> field with its opacity set to 0.
When the invisible file input is clicked, the user selects a file.
When the file is selected, a .change() event is triggered and the <div> will display the text 'Click again to upload'. I did this rather than having the file upload immediately because during my research, I learned that Internet Explorer doesn't like you submitting a form within a .change() handler attached to a file input.
When you click the div again, the form is submitted via .submit(). The form targets a hidden iframe. The file beings uploading, and on completion the iframe triggers a .load() event.
The handler for the load event uses .contents().find("div").html() to get some stringified JSON that I have sent back in the PHP script that manages the file upload. The JSON contains the status of the file upload, and the URL to the processed image if it was successful.
Problem
The application works fine in all browsers except for Internet Explorer when it is embedded into Facebook. Internet Explorer gave the following in the console:
SCRIPT5: Access is denied.
SCRIPT5009: '$' is undefined.
I've researched the second error first and came across all the stuff that I expected to come across and already checked, such as:
The path to the script is wrong.
There may be a htaccess file blocking access to the file.
The script hasn't loaded correctly, clear cache etc and try again.
The possibility that I was trying to use a script that required jQuery before it was loaded.
I have double checked all of these and confirmed they are not the case.
I then moved onto the 'Access is denied' error and all the material I am coming across points to an issue regarding cross-domain requests using AJAX. There are also some articles that mention file uploading specifically, but nothing that was 100% relevant to me in this case.
Question
Why am I getting these errors in Internet Explorer when I try to use jQuery in an page that is embedded into Facebook? I got them even when I removed every other script on the page (except for jQuery), so I assume it is triggered by the presence of the hidden iframe that I have on the page to deal with image uploads.
First, I removed every other script on the page, at which point I only received the following error (obviously because I wasn't trying to make use of $ anymore):
SCRIPT5: Access is denied.
After trying about a dozen things (and combinations of those) that I found around the internet, I decided to use the non-minified version of jQuery so that I could more accurately determine the line that was causing my issue. After uploading that and taking another look in the console, I was pointed to line 1513, which looked like this:
if ( parent && parent.frameElement ) {
Above this line was a comment which made note of the issue that I was experiencing:
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
I Googled jQuery #13936 and came across this page, which suggested that I swap out the above line with:
if ( parent && parent.attachEvent && parent !== parent.top ) {
After making this change, I was glad to find the issue resolved and my form working as expected. I double checked the other browsers again and can confirm that they still work as expected as well.
Solved
This is a legit jQuery 1.10.1 bug: http://bugs.jquery.com/ticket/13980 .
Using jQuery 1.10.0, or 1.10.2 the error no longer occurs.
Background
I'm attempting to upgrade an iOS app built on Cordova 2.0 to version 2.7.
It's basically a welcome screen that points to a remote search engine (please withhold comments about app validity and likely approval, as we're past that), and we were using the ChildBrowser plugin to enable opening links in a sub browser so as not to trap the user in the Cordova webview.
Cordova 2.7 has a feature called InAppBrowser I am hoping to use instead of ChildBrowser. InAppBrowser does essentially the same thing, aside from missing a button to open in Safari.
Problem
The existing app's remote webpages include the Cordova JS (as well as that for the ChildBrowser plugin) and it works fine for opening links in the sub browser.
My test Cordova 2.7 app doesn't seem to load the Cordova JS correctly when it's being loaded from a remote web page.
I tried using this exact same HTML on the embedded start page and a remote start page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://mydomain.com/mobile/cordova-2.7.0.js"></script>
</head>
<body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Ready!!");
}
</script>
</body>
</html>
To test this as the embedded start page, I put this line in config.xml:
<content src="index.html" />
When I run the app, I promptly get the "Ready!" alert.
To test this as the remote start page (I'm aiming to link to the remote page in the final app, I am just using it as the start page for testing. The result is the same if I link from the embedded page.), I put this line in config.xml:
<content src="http://mydomain.com/mobile/index.php" />
When I run the app, I just get the blank screen and no alert.
Further, in cordova-2.7.0.js L. 6255, I changed
console.log('deviceready has not fired after 5 seconds.');
to
alert('deviceready has not fired after 5 seconds.');
With that change, running the app using the remote start page causes the blank page, and then after five seconds, I get the alert "deviceready has not fired after 5 seconds.". So this tells me Cordova JS is not starting correctly. Needless to say, I can't get InAppBrowser to launch links in the sub browser on the remote site, but I can get it working just fine on the embedded start page.
Anyone have any ideas of where to go from here? This is a pretty simplistic example, so I'm assuming this is a Cordova settings problem or a change in the functionality. I appreciate any thoughts, thanks!
Yes, something broke in 2.7 - related to our cordova-cli work. See: https://issues.apache.org/jira/browse/CB-3029
The fix is to add an empty file called "cordova_plugins.json" in your root folder.
I had a similar problem relating to upgrading to Cordova 2.7. However my problem was all my console.logs stopped firing when running the app. I couldn't figure out why for the life of me this was happening. I thought it was because I upgraded jquery.mobile. That wasn't it. I then thought it was an .htaccess issue, that wasn't it either. It turns out, it was Cordova 2.7 that was causing this problem.
I did try adding the .json file on my server, that did not fix the issue.
The fix was going into the 2.7 source and commenting out the following code:
/*comment out this as it is breaking console.logs
var xhr = new context.XMLHttpRequest();
xhr.onload = function() {
// If the response is a JSON string which composes an array, call handlePluginsObject.
// If the request fails, or the response is not a JSON array, just call finishPluginLoading.
var obj = this.responseText && JSON.parse(this.responseText);
if (obj && obj instanceof Array && obj.length > 0) {
handlePluginsObject(obj);
} else {
finishPluginLoading();
}
};
xhr.onerror = function() {
finishPluginLoading();
};
xhr.open('GET', 'cordova_plugins.json', true); // Async
xhr.send();
*/
Replace entire block with a call to the following function:
finishPluginLoading();
My logs are now working again. Only took me 3 days scratching my head.
Hope this helps someone with a similar problem.
If you embed Cordova in the external web page, there will be no way to open the InAppBrowser from within your hybrid app, so Cordova will not be able to load. This is because the InAppBrowser requires Cordova to be fully loaded and initialized before it can be used to fetch a remote page. You need to use your HTML page that you have, with the <script type="text/javascript" src="http://mydomain.com/mobile/cordova-2.7.0.js"></script> as the main entry point for your app. Then you can use the InAppBrowser to open up your remote page. (You could probably do this in the onDeviceReady(), not sure if it would "flash" the page first though.) I don't think the remote page should have any Cordova code in it at all. I'm not sure if it would be possible to even interact with Cordova from the remote page due to the Same Origin Policy (probably you could use features of the InAppBrowser to inject "bridge" code though to get around this.)
As Shazron mentioned the problem is the issue with the file"cordova_plugins.json".
To solve the problem not changing the code you can create the "cordova_plugins.json" file in the root folder and insert a content between quotation marks inside this file.
Mine for example has the following content:
"Just a dummy file required since Cordova 2.6.0"
create a file cordova_plugins.json that contains {}. then go to cordova-2.7.0.js and comment this line require('cordova/channel').onNativeReady.fire(); then when development done, add it back
Like me if you are using Cordova 5.1.1 and want to access native functionality after redirect then copy cordova.js, cordova_plugins.js and plugins folder which is at \platforms\platform_name\assets\www\ and put them on server, finally reference cordova.js inside your html. After every plugin add make sure to update these files and folder.