I've tried to create a new window and print it from current one in maui application. I invoke the printPage() method from Index.razor. The problem is that I use js code to open it and it throws an exception that created window is null. Is it possible to create new window in such a way or there is another method?
I know that if I call just a window.print() in script, the print dialog will pop up. However, it'll print a current page and I want some specific page. (In the example it's just a blank page)
Index.razor
#page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
#inject IJSRuntime JS
<button class="btn btn-primary" #onclick="Print">Print</button>
#code {
private async void Print()
{
await JS.InvokeVoidAsync("printPage");
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>MauiApp11</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/app.css" rel="stylesheet" />
<link href="MauiApp11.styles.css" rel="stylesheet" />
</head>
<body>
<div class="status-bar-safe-area"></div>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
<script>
function printPage() {
var i = window.open("", "", "height=452,width=1024,tabbar=no");
i.document.write(`<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Template</h1>
<p>This is a blank template for a web page.</p>
</body>
</html>`);
i.document.close();
i.focus();
i.print();
}
</script>
</body>
</html>
Related
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
My CMS uses
<link rel="prev" href="/t/119152/page-18" />
<link rel="next" href="/t/119152/page-20" />
to link to previous and next thread pages. I want to add rel=preftech value to these links using javascript.
I tried
<script>
document.querySelector("link[rel=prev]").setAttribute("rel", "prev prefetch");
document.querySelector("link[rel=next]").setAttribute("rel", "next prefetch");
</script>
and
document.querySelector('link[rel=prev]').rel = 'prefetch';
document.querySelector('link[rel=next]').rel = 'prefetch';
but none of these seem to update it.
Also, where should the script tag should ideally be placed for it to work?
Both techniques work as you can see here.
<!DOCTYPE HTNL>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="prev" href="/t/119152/page-18" />
<link rel="next" href="/t/119152/page-20" />
</head>
<body>
<script>
document.querySelector('link[rel=prev]').rel = 'prefetch';
document.querySelector("link[rel=next]").setAttribute("rel", "next prefetch");
console.log(document.querySelectorAll("link")[0].outerHTML);
console.log(document.querySelectorAll("link")[1].outerHTML);
</script>
</body>
</html>
I am working through some Blazor examples, and while trying to work with some JSInterop solutions, I ran into an issue with jQuery UI elements. I am not a proficient Javascript programmer, but I am proficient enough with .NET so I may be missing something simple. The first jQuery UI component I have tried to work with is the "resizable" component, found here: https://jqueryui.com/resizable/
Here is what my current code looks like:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.server.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
});
</script>
</body>
</html>
I am certain that the issue isn't with loading the libraries, and I have placed the script after loading blazor.server.js.
Now, my Index.cshtml has the following in the html portion:
<body>
<div class="container-fluid">
<div id="resizable" class="ui-widget-content">
<div class="row row-no-gutters" style="width: 100%; height: 50%">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
</div>
</body>
Ideally, this would yield a resizable div, but the resulting html element is not resizable. From my understanding, Blazor JSInterop no longer requires JS functions to be registered. What am I doing wrong?
The problem is that of timing: your jQuery function executes before your Blazor app has rendered.
The way I solved this is by replacing the "onready" ($(...)) function with a named function (e.g. onBlazorReady) that I then invoke from my Blazor's MainLayout component at the right time.
The right time being OnAfterRender.
For example:
MainLayout.razor:
#code {
[Inject]
protected IJSRuntime JsRuntime { get; set; }
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
JsRuntime.InvokeVoidAsync("onBlazorReady");
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.server.js"></script>
<script>
onBlazorReady() {
$("#resizable").resizable();
});
</script>
</body>
</html>
As you can see, I'm injecting IJSInterop so that I can call my onBlazorReady JS function after the LayoutComponent has rendered.
Works fine for me like this, to add datepicker from jquery ui:
Razor component file.
#code {
protected override async void OnAfterRender(bool firstRender)
{
await jsRuntime.InvokeVoidAsync("addDatePicker");
base.OnAfterRender(firstRender);
}
}
Global razor file:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magiro.Blazor</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
<script>
window.addDatePicker = () => {
$(".datepicker").datepicker();
}
</script>
</body>
</html>
There is no need any more to add a method in the global index page (_Hosts.cshtml in ASP.NET Core 5.0), which would fill those file with view-specific logic and dependencies. At least with v5 we have IJSObjectReference allowing us to call $('table').DataTable() directly from our .razor file like this:
<table>
<thead>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<!-- your data -->
</tbody>
</table>
#code {
[Inject]
protected IJSRuntime JSRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
await jQuery.InvokeVoidAsync("DataTable");
}
}
}
It's also possible to pass options to the plugin with an anonymous type. For example, to disable the search, we'd call in JS
$('#example').dataTable({
"searching": false
});
In Blazor we create an anonymous type with the same structure and pass it as parameter to the DataTable call:
var options = new {
searching = false
};
await jQuery.InvokeVoidAsync("DataTable", options);
The most probable cause is timing. The jQuery function gets executed before the DOM elements exists.
You should register the JS code as an interop function and call that after in OnAfterRender event.
Normally you don't need any JQuery function like ready, you can simply put those all required code into your custom js function which should run on ON_LOAD of your component as said by #Sipke Schoorstra in above answer
I am creating multi page phone gap app
I have basic structure including css and scripts in index.html , i am trying to load content dynamically into container from other html pages.
When I load content of other dynamic page css is not reflecting on pages.
I have style sheets locally but still that style sheet is not applying on login.html after load
Style sheet cdn path for any one sing
https://cdn.syncfusion.com/js/mobile/ej.mobile.all-latest.min.css
script cdn path https://cdn.syncfusion.com/js/mobile/ej.mobile.all-latest.min.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Login</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/ej.mobile.all.min.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div data-role="appview">
<div id="header" data-role="ejmheader" data-ej-title="Leap Agent Portal"></div>
<div id="content"></div>
</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
<script src="scripts/jquery.validate.min.js"></script>
<script src="scripts/jsrender.js"></script>
<script src="scripts/ej.mobile.all.min.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script>
var loadPage = function(url) {
$.ajax({
url: url,
}).done(function (data) {
$("#content").html(data);
});
}
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
loadPage("views/login.html");
};
})();
</script>
</body>
</html>
login.html
<form id="loginform" method="post">
<h1>Enter Login Credentials</h1>
<br />
User Name
<input type="text" required id="username" name="username"><br>
<br />
Password
<input type="password" required id="password" name="password">
<div align="center">
<button type="submit" data-role="ejmbutton" data-ej-contenttype="textimage" data-ej-rendermode="auto"
data-ej-imageclass="fa fa-key" id="btnlogin">
Login
</button>
</div>
<div id="message"></div>
</form>
If I write everything on single without load style sheets are rendering
No Style rendered if I loaded with jquery load
Have you try safari development inspector to check your DOM/CSS ? sometimes it helps ,-)
I am upgrading a Phonegap App to Phonegap 1.1.0 (from 9.4) and building with the new iOS5 SDK and Xcode 4.2.
The same happens when trying PhoneGap 1.0.0 as well.
The app has an about button that launches a notification dialog, but it is not firing after upgrading.
Here is the HTML from the Phonegap App
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap.1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady(){
//do something
}
function OnPageLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
}
function alertDismissed() {
// do something
}
function onAlertBtn()
{
navigator.notification.alert("Test Alert Message", alertDismissed, "Test Alert", "Done");
}
</script>
</head>
<body onload="OnPageLoad()">
<div align="center">
<FORM>
<INPUT type="button" style="font-size: 18px;" value="About" onClick="onAlertBtn();" >
</FORM> </div>
</body>
</html>
Any assistance would be appreciated.
Thanks
Ok, after considerable trial and error, a fix has been found!
Modify the source to be...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady(){
//do something
}
function OnPageLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
}
function alertDismissed() {
// do something
}
function onAlertBtn()
{
navigator.notification.alert("Test Alert Message", alertDismissed, "Test Alert", "Done");
}
</script>
</head>
<body onload="OnPageLoad()">
<div align="center">
<FORM>
<INPUT type="button" style="font-size: 18px;" value="About" onClick="onAlertBtn();" >
</FORM> </div>
</body>
</html>