After hours of troubleshooting it appears the jqueryui autocomplete is not working on the server I'm deploying my application to, but it's working on my local machine.
I have tested Ajax calls and they are working fine. I'm able to get content, etc...
I'm able to use the datepicker from the ui controls, but not autocomplete.
To be sure, I used the code at the bottom of my question. This code works on my local but not on the server. I'm assuming the autocomplete is not loading properly.
If you are familiar with this issue, PLEASE help and let me know what's a good alternative.
The actual page I'm testing is http://StagKingAdmin.com
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("input#searchterm").autocomplete({
source: availableTags
});
It sounds like the page on the server is taking longer to load than locally, so perhaps the DOM isn't fully loaded when .autocomplete() is called.
Is your autocomplete call wrapped in a $(document).ready() function? If not, it should be.
$(document).ready(function() {
$("input#searchterm").autocomplete({
source: availableTags
});
});
This will ensure the input#searchterm element is available when .autocomplete() is called.
From what i saw in the given url, your problem is relevant to this qustion,
Add the following script before the autocomplete setup
jQuery.fn.extend({
propAttr: $.fn.prop || $.fn.attr
});
also add a / before relative urls like,
var autoCompleteUrl_Events = '/Events/Find/';
hope this helps.
Had same problem, was working locally and not working on remote server.
When i stopped including autocomplete script at the bottom of the page and included it along with jquery inside the <head> then it started working.
Related
I have a WebApp and it works alright in both Android and iOS environments. The problem is, in one of the screens, the WebApp generates (and displays) a PDF file, which should be shareable through Email, WhatsApp, Telegram, etc.
Android does allow the share option in the standalone display mode, but iOS just doesn't. I need to know if there's any way I can actually exit the WebApp mode into plain good-old-browser mode when opening the pdf file, so that the user can actually share it with his/her contacts through the browser's native share dialog.
These are the contents of the manifest.json file
{
"name": "Test App",
"short_name": "TestApp",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "https://example.com?a2hs=1",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}
So far, I've tried:
using Display PDF in the pdf link.
using javascript to force-open a new window:
test
<script>
$(function(){
$('#pdf').click(function(e){
e.preventDefault();
window.open($(this).attr('href'), '_blank');
return false;
});
});
</script>
None of those solutions worked out.
Also, I tried changing the display: property in the manifest.json file to minimal-ui - that does allow to share the file/url but that removes the WebApp look & feel, so it's not an option.
Any ideas? Thanks!
I managed to find a solution. I created this alias subdomain:
pdf.example.com
Then, I linked the pdf to the alias subdomain:
Display PDF
iOS recognizes this as another server, so it automatically forces the load of the file in a new tab in Safari, exiting the current standalone mode of the webapp.
I'm trying to resolve a bigger issue by splitting it into smaller bits. The first problem is that i don't know how to hide properly. for the purpose of this post, i've created a simple demo app that gets deployed to docker (available on github). It has two microservices inside: OcelotGateway (OcelotIdentity project) deployed to localhost:7060 and IdentityServer microservice (Identity project) deployable to localhost:7050. Here's my ocelot configuration file:
{
"ReRoutes": [
{
"DownstreamPathTemplate": "/{route}",
"UpstreamPathTemplate": "/identity/{route}",
"UpstreamHttpMethod": [ "Get", "Options", "Post" ],
"DownstreamScheme": "http",
"ServiceName": "identity"
}
],
"GlobalConfiguration": {
"RequestIdKey": "OcRequestId",
"AdministrationPath": "/administration"
}
}
So i expect to see IdentityServer's quickstart page at localhost:7060/identity, but i get 404 instead. This page works fine when i'm reaching it directly at Identity server's url (localhost:7050).
You probably already figured out the answer, but just for future generations; I suppose the problem is your catch-all, that expects something like /identity/something to be passed to /something.
To display the quick-start page, you should define another re-route, that only catches /identity and forwards to /. Then, no something is required and the re-route should work just fine.
Also, the scheme should better be https.
can someone find out what is the error in my extension, I do not know why it is saying invalid extension when i try to upload it temporarily. I have developed the same extension for chrome, it works there fine, also operates on opera but not going to install on fireFox. Can anyone specify the problem. Below is my manifest :
{
"name":"My Work Book",
"description":"Save & Manage Your Jobs with ease",
"version":"1.0",
"manifest_version":2,
"icons":{
"16":"icons/job_icon.png",
"32":"icons/job_icon.png",
"64":"icons/job_icon.png"
},
"content_scripts":[{
"matches":[
"<all_urls>"
],
"css": [
"plugins/bootstrap.min.css",
"plugins/fa/css/font-awesome.css",
"style.css"
],
"js":[
"plugins/jquery.js",
"plugins/drag.js",
"content.js",
"general.js"
]
}],
"web_accessible_resources": [
"Icons/*.png",
"Icons/*.svg",
"plugins/fa/css/*.css",
"plugins/fa/fonts/fontawesome-webfont.eot?v=4.7.0",
"plugins/fa/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0",
"plugins/fa/fonts/fontawesome-webfont.woff2?v=4.7.0",
"plugins/fa/fonts/fontawesome-webfont.woff?v=4.7.0",
"plugins/fa/fonts/fontawesome-webfont.ttf?v=4.7.0",
"plugins/fa/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular"
],
"background":[{
"matches":[
"<all_urls>"
],
"scripts":[
"plugins/jquery.js",
"background.js"
]
}],
"permissions":[
"<all_urls>"
],
"browser_action":{
"default_icon":"icons/job_icon.png"
}
}
I did not use any chrome APIs in the content scripts yet, i just used one which is chrome.extension.getURL() which i have changed to browser.extension.getURL() but still getting that error.
It looks like your background entry is invalid. Background scripts run in the background globally so I don't think defining matching URLs is doing anything for you. BTW Firefox will accept either chrome or browser commands.
Try
"background":{
"scripts":["plugins/jquery.js","background.js"]
},
When I install my web app to homescreen on Android without a service worker, everything works as expected. I can click my home screen icon and my app launches with a splash screen and then I see my app in fullscreen mode. When I add in the service worker registration code and install to home screen, my app launches in a browser window and seems to ignore my manifest file.
Something to note is that without the service worker my app only has an icon on the homescreen. with the service worker code it becomes fully installed with the "new improved add to home screen" and there is an icon on my home screen as well as in my installed apps panel.
Here is my code:
web-app.html:
<!DOCTYPE html>
<html>
<head>
<title>Web App</title>
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name = "mobile-web-app-capable" content = "yes">
<link href = "manifest.json" rel = "manifest">
<link href = "web-app.css" rel = "stylesheet" type = "text/css">
<link href = "web-app.png" rel = "icon" type = "image/png">
</head>
<body>
<h1>Android Web App!</h1>
<img src = "/web-app.png">
<p>This page can be viewed in any browser, but it can also work in a web app! If you are viewing this page in a full screened webview on your mobile device, you are looking at a fully functional web app! You can use this technology to better connect with your users or create a full screen mobile experience for your HTML5 games!</p>
<script type = "text/javascript">
navigator.serviceWorker.register("web-app-service.js");
</script>
</body>
</html>
manifest.json:
{
"author": "PoP Vlog",
"background_color": "#ffffff",
"description": "Progressive Web App Example with Offline Mode",
"display": "fullscreen",
"icons": [{
"src": "/web-app.png",
"sizes": "192x192",
"type": "image/png"
}],
"lang":"en",
"manifest_version": 2,
"name": "Web App",
"orientation": "portrait",
"scope":"/",
"short_name": "Web App",
"start_url": "/",
"theme_color": "#ffffff",
"version": "0.2"
}
web-app-service.js:
self.addEventListener("install", function(event) {
event.waitUntil(caches.open("web-app").then(function(cache) {
return cache.addAll([ "/", "/web-app.html", "/web-app.css", "/web-app.png"]).then(function() {
self.skipWaiting();
});
}));
});
self.addEventListener("activate", function(event) {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
return response || fetch(event.request);
}));
});
I couldn't find a lot of documentation on this, but clearly the behavior changes when I remove the service worker registration code from my html document. I suspect that the problem lies in my web-app-service.js file.
EDIT: 11/01/2017
When I completely comment out my fetch event listener, my app works as expected, but add to home screen only installs an icon on my home screen. When I add to home screen with the fetch event listener, I get a full install of my web app into my apps panel and my app only opens in a browser window with full url bar and everything. This problem has something to do with adding the fetch capability to my service worker.
EDIT 11/08/2017
I have discovered that I only have this problem on my Node JS HTTPS test server when accessing my web app through a local IP address. The web app works fine when I run it from my Github Pages site. This leads me to believe it is a problem with scope in the app manifest or perhaps my Node server.
In manifest.json change "display": "fullscreen" to "display": "standalone".
It'll launch your app in App like view.
For more info refer https://developer.mozilla.org/en-US/docs/Web/Manifest
With the new firefox webextensions: Is there a way to save the current page (or a part of it) as html (or text) to disk? If not, how are the chances, such an API will be implemented in the future?
I didn't find any suitable API and appreciate any help.
Regards
There are probably several ways to do this. The following will get you started. It saves the webpage in the currently focused tab in the active window to the browser's default downloads path. The file name is set to 'samplePage.html' (you can change that by modifying the filename value in the downloads.download() options; or you can remove that field entirely and leave it to the default naming).
You will need to store icon images in your webextension package for the user to be able to click on. Also, be sure to navigate to a webpage you want to save before you try to use the webextension; webextensions are not active on the Firefox about:debugging page.
manifest:
{
"name": "SavePage",
"version": "1.0",
"description": "Clicking browser icon saves page html",
"manifest_version": 2,
"icons": {
"48": "icons/clickme-48.png"
},
"permissions": [
"tabs",
"activeTab",
"downloads"
],
"browser_action": {
"default_icon": "icons/clickme-32.png"
},
"background": {
"scripts": ["background.js"]
}
}
background script:
/* BACKGROUND SCRIPT
Clicking on browser toolbar button saves the webpage in the
current tab to the browser's default downloads path with a
filename of "samplePage.html". The "tabs" and "downloads"
permissions are required.
*/
browser.browserAction.onClicked.addListener((tab) => {
var currentUrl = tab.url;
function onStartedDownload(id) {
console.log(`Started to download: ${id}`);
}
function onFailed(error) {
console.log(`Something stinks: ${error}`);
}
var startDownload = browser.downloads.download({
url : currentUrl,
filename: 'samplePage.html'
});
startDownload.then(onStartedDownload, onFailed);
});
An alternative approach might be to try to save the webpage to local storage rather than to disk. I have not explored that option.
These pages may be helpful:
downloads.download()
browserAction.onClicked
There may be security risks in giving a webextension these permissions. You will have to weigh the risks for your own usage pattern.