Given this HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Sencha on Rails</title>
<!-- styles, scripts etc. -->
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="JzrbB8G0gpcKoWcnL8+AllPSXzUVwqDSp5yjgEGqYwk=" />
</head>
<body></body>
</html>
How would I use Ext.core to extract the csrf-token?
In jQuery, I could do this:
var csrfToken = jQuery("meta[name=csrf-token]").attr("content");
> "JzrbB8G0gpcKoWcnL8+AllPSXzUVwqDSp5yjgEGqYwk="
I'm building a Sencha Touch application backed by rails, so I can't use jQuery.
You can use Ext.query(selector,root); to get the token.
For example:
var csrfToken = Ext.query('meta[name=csrf-token]')[0].getAttribute('content');
Note that Ext.query returns an array of components that matched the query. http://docs.sencha.com/touch/1-1/#!/api/Ext.ComponentQuery.Query-method-query
Or you can use Ext.select
var csrfToken = Ext.select('meta[name=csrf-token]').elements[0].getAttribute('content');
Related
Flutter Web
I want to download a local pdf document stored in assets/doc.pdf
The code that works in my dev environment. I.e. I'm able to download valid pdf in debug mode locally.
ByteData bytes = await rootBundle.load("doc.pdf");
final blob = html.Blob([bytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
//--
// Downloads the file
var link = html.AnchorElement(href: url);
link.download = 'doc.pdf';
link.click();
html.Url.revokeObjectUrl(url);
Problem
When I build the release build and host it on Firebase hosting, after downloading the same file, the file is only 2KB and contains this text with an error message:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<link rel="stylesheet" href="loader.css">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="web_portfolio">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>web_portfolio</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="loader">
<div class="lds-circle"><div></div></div>
</div>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js" ></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=2745115030');
});
}
</script>
<script>
head.js("main.dart.js?version=3", function() {
document.getElementById('loader').remove();
});
</script>
<!-- <script src="" type="application/javascript"
onendload="document.getElementById('loader').remove();"></script> -->
</body>
</html>
I have tried multiple browsers.
If I go to build\web\assets\assets, the pdf file is still valid.
I have tried opening the pdf in a new browser tab like so:
ByteData bytes = await rootBundle.load("doc.pdf");
final blob = html.Blob([bytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
//** opens a new tab with the containing pdf
html.window.open(url, "_blank");
html.Url.revokeObjectUrl(url);
But the path is still wrong and the pdf can't be displayed.
I wonder why it works locally, but paths get messed up when live on firebase hosting?
I am trying to embed tableau object into razor page in blazor application but its not working it shows blank page and it will not log any error in browser console.
Below is the razor page.
Tableau.razor
#page "/tableau"
<h3>Tableau Example</h3>
<body>
<div class='tableauPlaceholder' style='width: 1700px; height: 950px;'>
<object class='tableauViz' width='1700' height='950' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Ftableau.xxxxxx.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='/t/ITRD' />
<param name='name' value='AgileDEStrainingStatus/Agilemind-setTrainings' />
<param name='tabs' value='yes' /><param name='toolbar' value='yes' />
<param name='showAppBanner' value='false' />
<param name='filter' value='iframeSizedToWindow=true' /></object></div>
</body>
#code {
}
_host.cshtml
#page "/"
#namespace BlazorApplication.Pages
#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>BlazorApplication</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
<script type='text/javascript' src='https://tableau.xxxxxx.com/javascripts/api/viz_v1.js'></script>
</body>
</html>
What I am doing wrong?
Thanks
I can't replicate your exact sample as the URL for your data is obviously private, but I created a Tableau sample at https://github.com/conficient/TableauSample which uses the basic example from the Tableau website
I used Server-side Blazor as per your example and was able to load the sample. What I think you're missing in your code is that there is no initiation of the Tableau library? In the Tableau sample they invoke the setup function:
<body onload="initViz();">
You can't do this in Blazor since embedded JS isn't permitted but you can use JavaScript interop
I created a basic interop file to do this:
window.initViz = function (containerDiv, url) {
// containerDiv: element to update - use #ref in Blazor to get this
console.log("initViz called for " + url);
var options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
console.log("initViz calling .Viz()");
var viz = new tableau.Viz(containerDiv, url, options);
}
I also changed the sample by passing an ElementReference rather than an id - if you're going to build a component in future this is good practice since you don't need to name the elements and can have multiple instances on a page.
I then amended the Index.razor page to invoke the initViz function in OnAfterRenderAsync.
I want to add metadatas to layout page for SEO dynamicly from admin panel. Sample:
<meta content="" name="description" />
<meta content="XXX" name="author" />
In MVC5, I use:
<head>
#Html.Action("GetMetatags", "Home")
</head>
and easily get them.
But in Asp.Net Core 2.1, I try to use ViewComponents instead of partial view like this:
<head>
#await Component.InvokeAsync("MetaDatasForSEO")
</head>
The problem: I can get metadatas correctly but not between <head> tags. Just in <Body> tag...So it doesnt works. Thanks for help...
I am using gulp-inject to inject some css and js files to the dist/index.html which are located at dist/css/*.css and dist/js/*.js
gulp.task('prep-index', function () {
var target = gulp.src('./dist/index.html');
var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false}, {relative: true});
return target.pipe(inject(sources))
.pipe(gulp.dest('./dist/'));
});
Currently it is injecting files from the base url of the project, but I want it to inject files links relative from target file i.e. dist/index.html
from /dist/css/*.css to css/*.css
and from /dist/js/*.js to js/*.js
But its generating like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Directi Task</title>
<!-- inject:css -->
<link rel="stylesheet" href="/dist/css/basscss.min.css">
<link rel="stylesheet" href="/dist/css/style.css">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script src="/dist/js/jquery.min.js"></script>
<script src="/dist/js/script.min.js"></script>
<!-- endinject -->
</body>
</html>
Any tips on this?
Found the bug, the {relative: true} should be inside the inject() but not within src()
return target.pipe(inject(sources, {relative: true})) fixed the problem.
I am creating a app that can be displayed outside rally. I created a login key for a read-only user as described in the documentation and substituted it for [loginkey] in the code below. When i try to access the app I am being asked for user credentials again. When i cancel the authentication dialog i receive a 401 error in the developer tools in the browser. Please find my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>LoginKey</title>
<!--App information-->
<meta name="Name" content="App: LoginKey"/>
<meta name="Version" content="1.0"/>
<meta name="Vendor" content=""/>
<!--Include SDK-->
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginkey=[loginkey]"></script>
<script type="text/javascript">
function onLoad() {
var rallyDataSource = new rally.sdk.data.RallyDataSource(
'__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
rallyDataSource.setApiVersion("1.43");
var config = {type: "hierarchicalrequirement", columnKeys:["FormattedID", "Name"]};
var table = new rally.sdk.ui.Table(config, rallyDataSource);
table.display("tableDiv");
}
rally.addOnLoad(onLoad);
</script>
<style type="text/css">
.loginKey {
/* Add app styles here */
}
</style>
</head>
<body class="loginKey">
<div id="tableDiv" style="float:left;width:400px"></div>
</body>
</html>
The issue was with the name of the parameter. I was using loginkey for the name of the parameter while it was actually supposed to be loginKey