The folowing code inserted into joomla->customHTML module is not working however it works in ordinary LAMP.
document.getElementById("foo").innerHTML = "\"Lorem\" ipsum\
\"dolor\"\
\"sit amet\"\
";
Inserted by sourcerer system plug in.
Not suprisingly this works for both
document.getElementById("foo").innerHTML = "\"Lorem\" ipsum\"dolor\"\"sit amet\"";
Is there way to make this environment more stable?
Javascript doesn't allow multi-line strings, it's not php.
Also Joomla custom HTML module will usually strip <script> code
Besides custom HTML, there is an extension by nonumber.nl that allows you to insert javascripts easily in the page, the name is sourcerer if I'm not mistaken.
Creating local files on server and adding them to the page cleared all errors caused by collisions with joomla.
I am now also able to work with editors that i used to.
I simply created a .js .php .css files on server and add them with sourcerer plug-in to the page under joomla.
{source} //source tag for joomla sourcerer plug-in
<link href="/includes/comsettings/comstyle.css" type="text/css" rel="stylesheet" />
<?php
require './includes/comsettings/comsettings.php';
echo '<script src="./includes/comsettings/comsettings.js" type="text/javascript"></script>';
?>
{/source}
This way, all operations done by joomla editors to the source are overridden. Except, of course variables created by joomla for frame work (Example $_POST array is ,still, already set on all pages)
Every arcticle or customHTML module (created by joomla beckend) are created under public root directory that you installed joomla in. While inserting your files (custom ,non-joomla originated) to the page, you can navigate from root to any directory (readable/executable dirs) which your files created under it.
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 developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?
There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!
Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.
As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.
I have gone through some Joomla tutorials and I am not understanding how Joomla works. I have never encountered something where every aspect of it evades me. I'm not asking for a free ride.. just where to go or a basic idea of how this works.
I simply need to add a Panoramio javascript into the <head></head> section of a joomla website. In Word Press I simply download the header.php template and code away.
It's so confusing understanding Joomla. I do know not to paste directly into an "Article" page so do I have to install some sort of extension or tool to even get this to work?
I read to edit the index.php in my templates but I can't even find that. Am I the only person that can't understand Joomla at all? Even the beginner documentation seems to assume I know their system. Thank you in advance.
Be careful about which files you add code to. Editing core files like the index.php in the templates folder might not be the best solution. What if there is a template update? The file will get overridden. So just bare that in mind.
Before you add the script, it is good idea to get the name of current template:
$app = JFactory::getApplication();
$template = $app->getTemplate();
You can use the following to import a .js file the <head> tags:
$doc = JFactory::getDocument(); //only include if not already included
$doc->addScript(JUri::root() . 'templates/' . $template . '/file.js');
or you can add the Javascript there and then like so:
$doc = JFactory::getDocument();
$js = "
//javascript goes here
";
$doc->addScriptDeclaration($js);
Hope this helps
you can edit index.php file and other template files as css etc.
go to : Extensions->template manager
chose template TAB
Second from the left you see: "template name" Details and Files
here you can edit any template file directly on your server.
Menu can change depending on Joomla version, but that's the general idea.
You definitely aren't the only one. Joomla is meant to be able to handle anything you need it to do, and this makes it rather complicated.
Your best bet is to add the script to the template index.php file that you mentioned if you want it to be available throughout the entire site. If you just needed it for a particular module or component, you would instead want to load it there. In your case, since you are fairly new to Joomla, let's just get it loading!
Navigate to your base Joomla directory (where you installed Joomla) and look for the templates folder. Within this you should have several folders. Hopefully you know which template you are currently using and open that folder and there should be an index.php file in it. The top of this file should look similar to the header.php file from Wordpress. Add your script tag to the header element and it should load.
If you have no idea what the name of your current template is, go to Extensions->Template Manager on the backend. There should be two with stars to the right of them. One should be marked "administrator" and the other "site". The folder that you are looking for in the templates folder should match the name of the "site" template.
Here is a quick tutorial on what you need to do:
Joomla! templates are at the /templates folder (locate your template)
inside you find the index.php file (there you need to change stuff)
inside you will find a html page with some PHP inside it
locate the <head> tag
How add this:
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/javascript/YOURSCRIPT.js', 'text/javascript');
Make sure that this line of code already exists:
$doc = JFactory::getDocument();
Footnote: Because you did not specifiy what Joomla! version you are using, this example is from Joomla! 2.5, the current LTS.
P.S. You can also insert the script the 'normal' way, after the <head> tag.
I am no expert in JavaScript but I have an AJAX application that works perfectly without modifying any template files. The thing is that it adds the JavaScript at the bottom of the page, not in the head section. I don't know if this is an issue but it works for me.
1) Go to Extensions->Module Manager
2) Create a new module. Call it JavaScript Footer (for example)
3) Under the Details tab set Show Title to Hide, set Position to Debug, set Status to Published and set Access to Public
4) Under the Custom Output tab, type
<script type="text/javascript" src="http://yourdomain.com/yourscript.js"></script>
I never did understand why some scripts are in the header while others are at the bottom of the body (Google Analytics for example) but it works for me.
Joomla is quite different from Wordpress. Actually, index.php is rather useless when customizing joomla template. You will have to explore the blocks of the template in the folder blocks found in your template. For example, to add a scripts in the header section just edit header.php in the directory your_template/blocks.
I am making a website using PHP. I have various Javascript snippets in various pages and various Javascript files. I want to put them all in one .js file. How can I do that?
Copy them all into one file, in the order they were included within document.
If they were written correctly, there should be no problems. But there may be problems regarding some conflicts (like names of the variables) or cases, when the script was not meant to be executed on all pages (eg. assumes some container exists within HTML, but this container is only on some pages - thus on other pages the script may throw some errors or behave inappropriately).
With PHP you could just make a faux-javascript file, e.g. js.php and then include all the js files like:
<?php
include('foo.js');
include('bar.js');
Then reference this file from the main php page's html:
<script type="text/javascript" src="js.php"></script>
Another way is by inline js as
<script type="text/javascript">
<?php
include "one.js";
include "two.js";
?>
</script>
I also try to reduce js, css and use image sprite for background to reduce browser header requests.