I used some little basic javascript code and used it to make a simple UWP app, the alert function in the code works when i run the file in the browser, but it doesnt work when i try it in UWP app. below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App6</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App6 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body" onload="alert('oh yeah');">
</body>
</html>
The alert function is not supported in UWP app context. You have to use
var dialog = new Windows.UI.Popups.MessageDialog("Hello");
dialog.showAsync();
https://msdn.microsoft.com/library/windows/apps/br208674?cs-save-lang=1&cs-lang=javascript#code-snippet-1
Related
I created a new Blazor WebAssebly project in VS19 and wanted to add a website template to my project, I downloaded it but was wondering where I should put the JavaScript files it came with.
I currently have them here in my index.html file in wwwroot folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ImmoPlatform.SPA</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<!-- jQuery library -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="js/slick.js"></script>
<!-- Price picker slider -->
<script type="text/javascript" src="js/nouislider.js"></script>
<!-- mixit slider -->
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
but when I start my blazor project the javascript doesent seem to load. the CSS I put in the mainlayout.razor file in the Shared folder works file and that CSS came with the template.
Is this the correct place to put them? or should I put them somewhere else?
I ran into the same problem as you. The J/S files must point to the index.html; however, Blazor does not load them automatically – it must use the J/S interoperability, which is complex, and much more so if you do not know the functions that the template has.
At home, I wanted to use Admin LTE, luckily I found a project on GitHub, where they are making a version of this template for Blazor.
https://github.com/sjefvanleeuwen/blazor-adminlte
Hopefully the Blazor team will change this type of operation, since, in my view, it is a setback in the way of doing frontEnd.
I Created a Chrome OS APP to be a webview of my website, but I need to inject some JS codes to send some information to my server.
here the codes
exported_app_view.html
<!DOCTYPE html>
<html class="trim full">
<head>
<link rel="stylesheet" href="css/foam.css" />
<link rel="stylesheet" href="css/cab.css" />
<link rel="stylesheet" type="text/css" href="application.css">
</head>
<script src="application.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<body class="trim full">
<foam id="kiosk" model="AppConfig" view="KioskView">
<webview id="map" src="http://link.com/"> </webview>
</foam>
</body>
</html>
application.js
setInterval(function(){
core.appver = "1";
}, 2000);
it is not working like this, but If inserted code like window.close(); it works well.
I'm trying to make a windows phone 8.1 app that send a get request using html5 css and javascript. the only problem is the my code works on my browser but when I build the app using visual studio the get request is sent only the first time. I have no clue why this happens.
The code for the page is this :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$.get("http://192.168.1.100/gpio/0")
});
} );
</script>
</head>
<body>
<button>Send GET request </button>
</body>
</html>
The code that I use for the app is the same with just a few changes :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/jquery-1.12.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.get("http://192.168.1.100/gpio/0")
});
});
</script>
</head>
<body>
<button>Send GET request</button>
</body>
</html>
I'm pretty new to react js. I need to integrated Google Nexeus like menu to my app. I'm not sure how to include the custom javascript files in my react webpack setup. I tried to include it in following way. But it is not working. When I check the network communication in firefox developer tools I can see that same html content is comming as the response to GET gnmenu.js, not the actual javascript content.
<!doctype html>
<html>
<head>
<title>My Application</title>
<link href="static/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="static/lato/lato.css" rel="stylesheet">
<link href="static/opensans/opensans.css" rel="stylesheet" type="text/css">
<link href="static/raleway/raleway.css" rel="stylesheet" type="text/css">
</head>
<body style="margin: 0">
<script src="/static/gnmenu.js"></script>
<div id="content" class="myApp"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
Has anyone used gnmenu with react?
Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});