Via this code I can add external script to page header on every page.
$wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay';
function onBeforePageDisplay( OutputPage &$out, Skin &$skin )
{
$script = '<script type="text/javascript" async src="https://relap.io/api/v6/head.js?token=<token>"></script>';
$out->addHeadItem("Relap.io script", $script);
return true;
};
How can I do same not in all namespaces?
You can check the namespace via $out->getTitle()->getNamespace().
Related
My HTML Script tag has a src, but then the div id to display the widget appears and then disappears on refresh. The DIV is still there but its not bringing in the source.
I don't know why as I get no error message in the Javascript debugger.
One weird thing is it doesn't disappear in Localhost but ONLY in Azure.
Refresh the page to re-produce the issue.
I'm using Blazor .NET Core, and the widget is at:
Site:
https://markstest1.azurewebsites.net/
Source file:
https://www.climatelevels.org/graphs/js/co2.php?theme=dark-unica&pid=2degreesinstitute
Source Code
Startup.cs (CORS added for site). One site is http.
Could that be an issue?
public class Startup
{
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddDefaultPolicy(//name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("https://www.climatelevels.org", "http://www.2degreesinstitute.org")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
DIV Tag with id to source file. Razor file.
<div id="co2-widget-container"></div>
_Host.cshtml file with tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="https://www.climatelevels.org/graphs/js/co2.php?theme=dark-unica&pid=2degreesinstitute"></script></script>
Seems to be loading now correctly. The answer was that Blazor was starting too early and canceling the javascript loads in the _Host file. It seems I had to add the tag
<script src="_framework/blazor.server.js" autostart="false"></script>
to the Blazor script file so it doesn't start too quickly and let's the startup file initiate Blazor instead. Then mutate the src URL into a Blazor.start() call after DOMContentLoaded is loaded.
<script>document.addEventListener("DOMContentLoaded", function () {
Blazor.start().then(function () {
var customScript = document.createElement('script');
customScript.setAttribute('src', '//www.website...');
document.head.appendChild(customScript);
});
});</script>
Resource link used:
https://github.com/dotnet/aspnetcore/issues/22643
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-5.0
I try to build a simple CRUD frontend with no frameworks! I try to integrate a TypeScript file (intex.ts) into my index.html but it keeps beeing not found so that the called functions are undefined. I'm aware that browsers can't handle typescript but need javascript. I build my app before testing and all ts files get compiled. I tried integrating the compiled js file but it's not found either. All my frontend code is in directory src/public.
How do I connect my public/index.html with my public/index.ts so that the fundtions work?
relevant index.html code
<head>
<script type="text/typescript" src="index.ts"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
</body>
all index.ts code
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
error i'm getting when clicking the button
index.html:18 Uncaught ReferenceError: clickButton is not defined
at HTMLButtonElement.onclick (index.html:18)
I use express in the backend and use express.static:
app.use(express.static("src/public"));
It seems to be an error caused because the function is defined outside of the global scope.
You can try to assign the function to the global window object just below of the function declaration:
function clickButton(){
...
}
window.clickButton = clickButton; // Now the function can be accessed from global scope
Also u can try to add the eventlistener on your JS file instead of using the html attribute onclick:
function clickButton(){
...
}
document.querySelector('.button-smth').addEventListener('click', clickButton);
This way you don't need to assign the function to the global scope at all, but you will need to add the class '.button-smth' (or whatever) to the html button element.
Hope this helps!
Your ts need to be compiled to js first. Then, you could possibly use it as follows -
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
<div id="cases"></div>
</body>
Note: This is just a possible solution
I'm trying to create a sample plugin and I'm getting this error:
Uncaught ReferenceError: RedactorPlugins is not defined
This is my code for plugin:
<?php
$script = <<< JS
(function($)
{
$.Redactor.prototype.advanced = function()
{
return {
init: function ()
{
var button = this.button.add('advanced', 'Advanced');
this.button.addCallback(button, this.advanced.test);
},
test: function(buttonName)
{
alert(buttonName);
}
};
};
})(jQuery);
JS;
$this->registerJs($script);
?>
My advanced plugin is load after redactor.js, what should i modify to make Redactor to accept plugins?
Thanks in advance!
If you looking your html code by your browser, I am sure that JS will be before the Redactor plugin and maybe before jquery too.
Just add the depends
$this->registerJs($script,['depends' => [\yii\web\JqueryAsset::className()]]);
then check the position of your code in your printed html
If it will be still before Redactor plugin, you can make a new JS file and add to AppAsset.php just below Redactor plugin
I am working on a Google Apps Script. My situation is that I have an index.html file and a few others which should all share a menu on the side.
I therefore have a function as follows
function include(File) {
return HtmlService.createHtmlOutputFromFile(File).getContent();
};
and use
<?!= include('leftMenu'); ?>
to include that in my html files.
The problem I have is that in the included file there is a function called that is defined in my Code.gs
<div class="leftmenu">
Main menu<br>
<?var url = getScriptUrl();?><a href='<?=url?>?page=newInvoice'>New invoice</a><br>
<?var url = getScriptUrl();?><a href='<?=url?>?page=index'>Home</a>
</div>
This function works as I would expect as long as these lines are in the "main" html file but they produce text if they are in the "included" html file.
I hope that makes sense and some one is kind enough to explain what the problem is and hopefully how I can get round it.
Thank you
Neill
14 Dec. 2016 edited to try and explain exactly what my problem is
I have a html file named “newinvoice.html”.
This has javascript functions in it as follows
<script type="text/javascript">
function formSubmit() {
google.script.run.withSuccessHandler(updateUrl).onSubmitButton(document.forms[0]);
}
function updateUrl(url) {
var successMsg = document.getElementById('output');
successMsg.innerHTML = 'New invoice created, saved and sent per Email';
}
</script>
I can move these functions into a separate html file as you suggested. This is called menu_JS.html and is included in my main file with
This works perfectly.
I have a call to one of these these functions - also in the main html “newinvoice.html” This is as follows
<div class="leftmenu">
Main menu<br>
<?var url = getScriptUrl();?><a href='<?=url?>?page=newInvoice'>New invoice</a><br>
<?var url = getScriptUrl();?><a href='<?=url?>?page=index'>Home</a>
</div>
If I move this into a separate file “leftMenu.html” and include that in “newinvoce.html” with
Then the output no longer works.
It appears that the scripts are trying to run before the files are included instead of the include and then the execution as I am used to from PHP.
As always, I appreciate anyone willing to take the time to help me. This is frustrating. Thank you!
Create another HTML file and put the script you want to run client side in that file. Then use the same include statement to include that file.
So make menu_JS.html and place your functions in that, between script tags:
<script>
firstFunction(){
alert("In the first function");
}
secondFunction(){
alert("In the second function");
}
</script>
And in your main HTML template file, preferable after the body loads, place:
<?!= include('menu_JS'); ?>
NOTE that the script is in an HTML file and NOT a Script file.
EDIT: Nov 15 2016
Below is the variation of the function which I have that is working for my needs. Note that I am evaluating the included html file. I had previously used code more similar to your (commented out) and changed it to this some time ago:
function include(filename) {
// return HtmlService.createHtmlOutputFromFile(filename)
return HtmlService.createTemplateFromFile(filename).evaluate()
.getContent();
}
//function includeRaw(filename) {
// return HtmlService.createTemplateFromFile(filename).getRawContent();
//}
And this is how I load the initial html file. This is often in the doGet() function, but may be elsewhere
var result=HtmlService.createTemplateFromFile('GridView').evaluate()
.setTitle('Boxwood Registrations')
.setWidth(1285)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return result;
I have developed a website based on Angular HTML5 Bootstrap CSS. I have embedded DISQUS for interaction and comments purpose.But , it does not work the way I want and I see the same comments in every page since mine is a single page application and I have included the DISQUS code only in home page HTML file.
However , I want unique disqus to be loaded for every async URL refresh in my angular JS single page application so that comments are unique per page.
Now I see the same comments in all the pages.Below is the disqus code that I use inside the body tag
My website
http://www.europeansaga.com/#/
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//www-europeansaga-com.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<script id="dsq-count-scr" src="//www-europeansaga-com.disqus.com/count.js" async></script>
I have used the following HTML tag where disqus loaded as a one time activity.Being a single page application the page does not refresh at all during URL change
<div id="disqus_thread"></div>