I am trying to add Google Cast to my music app. It works properly when I include the button and the script in the index.html file. However, when I move the button to a component, it no longer registers the button. I have tried adding this code to the components constructor as a way of delaying the load time of the cast library but it still doesn't register:
let script = window['document'].createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
window['document'].body.appendChild(script);
I copied this idea from the source of this npm:
https://www.npmjs.com/package/ng-cast
Any idea on how I can get the is="google-cast-button" to register late in the load process?
The most robust solution in my opinion is to add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to either your app.module.ts or feature.module.ts. By doing so, you can place the chrome cast button in your app with <google-cast-launcher></google-cast-launcher>, which is far more stable than messing with the DOM manually within your component.
I found this with react.js - if the button is created via innerHTML, then the 'is=' scripts of the web component won't run. The only way to get the scripts to run on a dynamically created button is to use the document.createElement syntax. This may mean digging in to angular to figure out how to create one that way. In react, it means waiting for componentDidMount and inserting the element into the DOM that way.
So not a BIG help, but maybe a hint of what to try next (granted it has been a few months).
Related
I am trying to follow this integration for Experian QAS service: https://github.com/experianplc/Experian-Address-Validation
It's not really designed for React, so I am trying to find a way to integrate it.
So far, I have downloaded the script file 'experian-address-validation.js' and I have tried to run it by few methods:
Using react-helmet and simply adding
Using component
Creating a script element, adding .src property to it and then appending it to the body
None of these methods work. Also, when looking over 'Sources' tab, I can not find the JS script file, as if it does not exist.
I've created a Liferay form-field module based on React.
I want to manipulate the component with Javascript but as the code fires when DOM is ready, but the component isn't, the code doesn't work.
The problem is that I'm trying to get a DOM element this way:
document.querySelector(".slider-divisor")
I've tried putting this line in many places of the JS file (resources/META-INF/resources/slider-form-field.es.js) but the result is always null.
I've found a solution using setInterval that checks when the component 'appears' in the DOM. Then, the code is executed and setInterval stops, but I want to know if exists a way to check an event when component is loaded to execute my code instead use setinterval.
This is command I've used to create the module:
blade create -t form-field -c SliderFormField --js-framework react -p com.liferay.dynamic.data.mapping.form.field.type.slider slider-form-field
Thanks in advance.
i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.
Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.
I have a strange problem. I have a custom JS file written and all of its functions work fine until I run any ADF's JS action. For example - I have an action which slide down a component and it's fine. But when I run a adf popup or Faces Error Message all of my custom JS are disabled. Where is the problem?
Thanks in advance
Since you ain't giving any details on your problem, I can give only common answer.
When using custom js, you should always keep in mind, that any ADF action may overwrite all or part of html code on the page.
You should always set property clientAttribute=true for component, if you accessing it via js. Use actionListener instead of regular js handlers on component if possible or each time component refreshes you should reinitilize all of your js hooks.
Good way to avoid problems is to do all you can via ADF JS framework.
Check with any js debugger(like firebug) whats going on the page during your action and act accodingly.
You can get more info in documentation.
I'm using SilverStripe 3.0 CMS, and I need to include a Google Map into the CMS.
I'm following this steps, and besides it's a little bit old, the official documentation uses the same methods in the current version of SilverStripe (At least it seems to be the current version documentation).
The issue is in this part of the code:
Behaviour.register({
"#Form_EditForm" : {
initialize : function() {
this.observeMethod("PageLoaded", this.adminPageHandler);
this.adminPageHandler();
},
adminPageHandler : function() {
initialize();
}
}
});
First of all, Behaviour was not defined. I needed to include manually the behaviour.js file that comes within the framework. But now, I get a Type Error:
this.observeMethod is not a function
Can someone give me a hint of what can I do in order to call a javascript function when a page editor is opened in the SilverStripe CMS?
the 'Behaviour.register' call you mention is definitly deprecated and no longer available in the core code, so the docs need an update here.
unfortunately, i couldn't find a documented way to replace this behaviour, but for now the following should work for you, based on the approach in the forum post you mentioned first hand:
find the 'initGoogleMaps.js' script added here:
function getCMSFields() {
Requirements::javascript('mysite/javascript/initGoogleMaps.js');
...
inside this script, remove the Behaviour.register... block, and move the initialize function outside document.ready (or simply remove the document.ready part), so initialize is globally available (you might consider renaming it).
then, add the following inside getCMSFields:
$fields->addFieldToTab('Root.Content', new LiteralField('js', '<script>initialize();</script>'));
this will ensure the initialize function is called every time a page's 'edit view' is rendered inside the cms.
hth
As mentioned by ben,
LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')
is more reliable than 'include-it when needed'. Why?
Because Silverstripe uses Ajax, it is better to load any javascript or css on the first load, so that they are ready when you go to different model admin areas within the CMS in ajax-powered environment. Not loading at the start causes inconsistency and your js, css files will not be loaded when you don't hard-load that admin area.
From documentation: http://doc.silverstripe.org/framework/en/reference/requirements and http://api.silverstripe.org/3.0/class-LeftAndMain.html
The whole "include it when you need it" thing shows some weaknesses in
areas such as the CMS, where Ajax is used to load in large pieces of
the application, which potentially require more CSS and JavaScript to
be included. At this stage, the only workaround is to ensure that
everything you might need is included on the first page-load.
One idea is to mention the CSS and JavaScript which should be included
in the header of the Ajax response, so that the client can load up
those scripts and stylesheets upon completion of the Ajax request.
This could be coded quite cleanly, but for best results we'd want to
extend prototype.js with our own changes to their Ajax system, so that
every script had consistent support for this.
By the way, the ideal place for this line is _config.php in your custom module or in mysite, depending on your needs.
LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')
would work much better