Cannot link JSX script to html file - javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="login.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="navbar" class="navbar">
</div>
</body>
<script src="/response.js" type="text/jsx"></script>
</html>
I am trying to create a component using ReactJS to set elements in the navigation bar. The problem is that the script I've written does not link to the html file. The value returned to the html tag is a list including nav, ul, and li tags.
How can I solve the problem of linking the script?
Thank you for the help.

Some browsers (e.g. Chrome) will fail to load the file unless it’s served via HTTP, which means that you’ll now need a server to view your page. A good one is http-server which can be installed from npm with the following command:
npm install -g http-server
And started frpm your project’s root directory like so:
http-server
Your page will now be viewable at http://127.0.0.1:8080/

Related

Implement HTML CSS and Javascript Template in Angular 7

I purchased a template which includes HTML, CSS, and Javascript files for a static webpage. I'm trying to use these existing files in my Angular project so I can connect it with a Nodejs app to make it a full stack webpage with backend. However, when I tried to put these files into Angular, everything is broken and is not functioning as it would when I manually open the HTML files on Chrome.
I've tried creating components for each HTML pages and adding the CSS and Javascript files into assets folder. Then I went on angular.json and added each CSS files into the styles array and the Javascript files into scripts array.
The HTML files look something like this:
<!doctype html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<title>Hireo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../assets/css/style.css">
<link rel="stylesheet" href="../../../assets/css/colors/blue.css">
</head>
<body>
.........body code...........
<!-- Scripts
================================================== -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/mmenu.min.js"></script>
<script src="js/tippy.all.min.js"></script>
<script src="js/simplebar.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/snackbar.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Anything you put in your assets folder will be available to the application, just remember to provide the relative/absolute path including assets.
If you have files in other folders or have specific errors (e.g. in the Network tab in Dev Tools), please provide more details that so I can advise. Until then, you can find most common solutions in https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/.
In your angular.json file add the static .html files to the assets array with their respective paths. You can then access the files i.e www.your-domain.com/your-static-file.html

How to link javascript file to angular app html template

I am new to Angular and I have been having a problem trying to use Bootstrap or jQuery JavaScript includes. Below is a snippet of my code. Chrome developer tools tells me:
Request URL:http://localhost:4200/js/jquery.min.js
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:4200
Referrer Policy:no-referrer-when-downgrade
Am I doing anything wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTestApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<!--Load JQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/metismenu/jquery.metisMenu.js"></script>
<script type="text/javascript" src="js/plugins/blockui-master/jquery-ui.js"></script>
<script type="text/javascript" src="js/plugins/blockui-master/jquery.blockUI.js"></script>
</body>
</html>
<base href="/">
refers to the root path, therefore, if you don't have those files in your root path they won't load.
You can put them in assets folder (for example) and change the src to assets/....
If you are using angular cli, the 'proper' way would be referencing them in app.scripts in .angular-cli.json
Another option would be installing the jquery library (npm install --save jquery) and declaring "$" as jquery variable.

SearchKit - Unable to get a sample app working

I've installed searchkit (https://github.com/searchkit/searchkit) and have been trying to just get a basic webpage to show something. I have very little experience with Javascript and web development in general and would appreciate some help and guidance.
I installed SearchKit via bower and then simply copied out the bundle.js and theme.css into my project, just to see it work.
I have the following directory structure:
appHome/
index.html
js/
searchkitbundle.js
bundle.js
css/
theme.css
I copied bundle.js and theme.css from the release directory of the bower installation. I copied searchkitbundle.js from the from the live editor on SearchKit's docs website (http://docs.searchkit.co/stable/docs/setup/project-setup.html).
Here is my index.html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/searchkit/0.10.0/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/searchkit/0.10.0/theme.css">
<title>JSP Page</title>
</head>
<body>
<script type="text/javascript" src="js/bundle.js"></script>
<div id="app">
<div class="search">
<div class="search__query">
<SearchBox/>
</div>
</div>
</div>
</body>
I have tried changing this in a variety of ways but can't get it to work. It worked once, but I can't seem to get it to do so again.
I don't see any errors, either in the browser or in my IDE. I'm deploying this locally as well as another copy of it within a Tomcat JSP application.
Can anyone see what I'm doing wrong here and get it to work?

Electron App Jquery Module not loading

I have a problem when loading jquery on electron.
The problem only exists when on main.js I put
mainWindow.loadURL('http://localhost:3000/menu');
and I send back the menu.html
however, when I use this method Jquery works fine
mainWindow.loadURL('ile://' + __dirname + '/menu.html');
I need it to work using localhost.
This is a known problem. It is because JQuery auto-senses the presence of node.js - Electron adds a node.js context to the browser so JQuery gets confused.
The best approach is to install JQuery via npm, use electron-rebuild then change your html file to look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Electron App</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css">
<link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="helpers/context_menu.js"></script>
<script src="helpers/external_links.js"></script>
</head>
<body>
<div class="container">
<h1 id="greet"></h1>
<p class="subtitle">
Welcome to Electron app running on this magnificent <strong id="platform-info"></strong> machine.
</p>
<p class="subtitle">
You are in <strong id="env-name"></strong> environment.
</p>
<div class="jumbotron">
<h1>Bootstrap Test</h1>
<p>
Some content that should be in a Bootstrap "jumotron" box.
If it isn't, check your html code to make sure that the Bootstrap css is loaded.
Also check the dev console in the app to look for errors.
</p>
</div>
</div>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="app.js"></script>
</body>
</html>
This is a standard boilerplate but with the special JQuery loader script and app.js loader moved to after that in case you are doing anything in your normal app script that requires jquery - for example, loading Twitter Bootstrap can now be done by using npm to install bootstrap, doing electron-rebuild, then using this in your app.js:
import bootstrap from 'bootstrap';

Generate Minified Sencha Architect project with Sencha cmd or SDK

I have my project in Sencha Architect 2.2.2 Build: 991.
I'm trying to create one file that contains only the extjs classes and my project code, because the idea is to load only one js file, not app-all.js and ext-all.js files in the page.
index.html:
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Site</title>
<link rel="stylesheet" href="res/ext/resources/ext-theme-classic/ext-theme-classic-all.css">
<link rel="stylesheet" href="res/list.css">
<script type="text/javascript" src="res/ext/ext-dev.js"></script>
<script type="text/javascript" src="res/ext/locale/ext-lang-pt.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
</html>
And I use:
sencha create jsb sudo -a http://.../index.html -p app.jsb3 --verbose
sencha build -p app.jsb3 -d . -v
And it creates two files classes app-all.js and all-classes.js.
app-all.js in theory have all the code minified (including extjs classes because I'm using ext-dev.js into the include.
<script type="text/javascript" src="res/ext/ext-dev.js"></script>
But if I include only app-all.js class in my html it says that it dont know what is Ext, that's undefined. If I add ext-all.js it works, but thats not the idea...
Thanks

Categories

Resources