I need to add widget script to my Blazor project.
If I'm adding script to _Host.cshtml this widget runs on all project pages.
But I need to run it only on selected pages.
I can't insert
<script src="//code-ya.jivosite.com/widget/kiMhndUDCT" async></script>
to .razor component.
How can i do that with JSRuntime?
Thanks!
Here is what I would do:
Create a Component: Blazor Components
Within that Component, use JS Interop
Add this "Widget Blazor Componenet" that you just made to your pages you need.
Related
I am building a Blazor app, I need to dynamically add a JavaScript file that is used only in a single Blazor component. As you would be aware Blazor allows adding script tags only to the root HTML document. This makes it difficult to add JavaScript files that are required only in a single component.
The script is
It is important to set the data-main="payment-js" attribute on the script tag.
Are there any restrictions around iframe rendering in Blazor? The script renders multiple iframes on the specific Blazor components as part a PCI compliant payment system integration.
The script works in a simple HTML file.
I would be grateful for any assistance
Edit:
Maybe MarkupString could help:
#((MarkupString)script)
#code {
string script = "<script data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…>";
}
Old answer:
You could use the special HeadContent component to add the script in the <head> tag from your component.
<HeadContent>
<script suppress-error="BL9992" data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…>
</HeadContent>
You have to add attribute suppress-error="BL9992" so that it won't give you Error RZ9992.
More info: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0#control-head-content-in-a-razor-component
Also there is this library for loading scripts in blazor: https://github.com/excubo-ag/Blazor.ScriptInjection
This can be achieved by using a script loader and JSRuntime. Check this out.
I am looking to build an Angular 8 application and call Caspio datapages from inside.
The standard approach to using a Caspio Datapage is to embed a script tag as follows:
<script type="text/javascript" src="https://c1acu417.caspio.com/dp/A57E7000f6812a2641704a929225/emb"></script>
However, it does not seem to be working.
So, for example, I am doing the following:
Setup a StackBlitz ( https://stackblitz.com/edit/angular-m6cshx?file=src%2Fapp%2Fapp.component.html )
Nothing shows up.
Here, it is working in static html:
https://codesandbox.io/s/cocky-dawn-8l7pv
Does anyone have any experience or ideas as how to achieve this in Angular?
Why cannot I simply embed that script?
Your problem
You cannot put script tags inside of an Angular Component's Template. If adding via script tag is the only option, you have to add it to the index.html.
You are adding the script tag as the type of module but it is not a module
If you want to bring this into your angular application, you have to put in your index.html page or, download the file manually and add it to the bundle. (Currently, you can't reference a script by url in your ng build step).
Advice
Figure out if this library has the ability to dynamically render the form. If you can have control of that, then you're good. Just add it to the index.html page. Otherwise, you're going to have to build a component that dynamically adds the script tag reference (with JavaScript) to that component once it's rendered. It's not a good way to do things, but it should work.
Here's an idea of how to add a script tag programmatically to a component:
const s = this.renderer2.createElement('script');
s.type = 'text/javascript';
s.src = 'https://path/to/your/script';
s.text = ``;
this.renderer2.appendChild(this._document.body, s);
Referenced Here: http://blog.davidjs.com/2018/09/insert-script-tags-in-angular-components/
Adding script tags in Angular component template
https://github.com/angular/angular/issues/4903
I'm currently doing front-end optimization for a project and I'm stuck with code splitting..
basically what I'm trying to achieve is splitting code and vendors and load specific ones only when needed.
Currently, I use the default mix setup and all the dependencies are imported into app.js. So I need to include app.js on every page, which is very inefficient because in my project, most of the pages don’t use vue and I used some REAL big vue plugins on some of the pages that utilises vue...
For instance, say I have two pages: /home and /orders. Instead of loading app.js on every page, I'd like have:
/home (most pages look like this)
vendor.js: jquery + bootstrap + jquery plugins
home.js: initializes some jquery plugins (e.g. carousels) on the page
/orders
vendor.js
vue.js: I'd like to extract vue because I have multiple entry points
order-index.js: registers page specific vue component and creates vue instance
// order-index.js
Vue.component('order-index', require('./components/OrderIndex.vue'));
const app = new Vue({
el: '#app'
});
How can I achieve that using laravel-mix? Or do you guys have any better suggestions?
Thanks!
I was trying to implement this widget to my Angular app. For the second part I was able to create a custom js file in my assets folder, create a .d.ts file for it and successfully imported the function in my component.
But for the first part:
<script async src="https://telegram.org/js/telegram-widget.js?5" data-telegram-login="samplebot" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script>
If I do it with plain HTML and js, it will fetch from the website and generate a login button. Yet I tried simply pasting it into my component's HTML, it does not get rendered. As it is not a function nor a variable, I am not sure how can I place it into a specific div in the component.
Please help.
I am trying to work an admin theme into an ember project. There is a custom.js file that has a lot of the javascript for the sidebar, header stuff etc. I have it in the vendor folder vendor/custom.js. I am including it in ember-cli-build as app.import('vendor/custom.js'); When I look in chrome at the vendor.js file I see the contents listed in it, but the javascript on the page does not work.
If I take some of the sections out of the custom.js and put them in the hbs file within tags the do run and work. I'm wondering why just including importing the file doesn't work.
Any thoughts on what could be wrong?
Here is a link to the custom.js file Custom.js Gist
You are trying to include customjs from the admin theme into your app.
Instead of including the custom.js directly, create custom components for each admin-theme component.
In your component you can register you click-event handler and you jquery custom code. There is a old blog post from a core team member acout this.
http://www.programwitherik.com/how-to-initialize-a-jquery-component-with-ember-js/
But i think you need some basic knowledge about how ember is rendering and what a component is compared to a controller + template. You also need to understand what the admintheme js is trying to achieve.