Need a widget for adding CSS and JS file in the modeler

0
Hi everyone, I want to use font awesome in the project. Now, I have to add font awesome CSS and SVG files into theme folder. Furthermore I have to modify mendix-custom.css to add the line to import its CSS. So, wouldn't it be nice if I can import CSS file via widget after I added CSS and SVG files into theme folder. This can be applied for JS file as well. Any idea? Thanks
asked
2 answers
1

Regarding CSS injection, you can use dom.addCss("my/custom.css"); and dom.removeCss("css/theme.css"); Take a look at https://apidocs.mendix.com/5/client/module-mxui_dom.html to find out more.

If you have jquery loaded, you can use something like

$.getScript("my_lovely_script.js", function(){
   alert("Script loaded but not necessarily executed.");
});

These both things you can use in HTMLSnippet widgets set to eval as js to pop in js. Read more at http://addyosmani.com/writing-modular-js/

Thankyou

answered
0

Hi Ockert,
I tried to test for loading css. that was work great but for the javascript I've got some trouble. My scenario is I create HTML that contains form to submit in HTMLSnippet #1 and I create javascript function in HTMLSnippet #2, it contains function to receive a value from HTMLSnippet #1. The first one has worked well but after I submitted it was not function. Do you have any idea?

This the code in each HTMLSnippet;

HTMLSnippet #1 

<h1>JavaScript Can Validate Input</h1>

<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number"/>

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

HTMLSnippet #2

function myFunction() {

    var x, text;
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
answered