I am using some CDN links in a file copied directly from a dojo tutorial. I can't figure out why it won't work. There is supposed to be a dialog when you click the Show Me! button but the parts of the dialog are just visible on the page and the button does nothing.
<!DOCTYPE html>
<html >
<head>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"> </td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
id="cancel">Cancel</button>
</div>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
Show me!
</button>
</body>
</html>
You've always got to use a webserver even if you're viewing locally. It simply won't run from your local filesystem.
Run your source code from a web server, not the file system, even if the web server is
running on your development machine. The browser's handling of HTTP requests from the local
file system are more restrictive than from a web server, even when it's running in the same
machine. For consistent results, you should always run Dojo from within any HTTP web server
(Apache, nginx, Tomcat, IIS, Jetty, etc.).
Lucian's remark about the missing http:, that isn't a problem:
You may also load Dojo from a CDN. This is useful for quickly using Dojo, as it doesn't
require you to host your own copy of Dojo. You'll notice in many of our tutorials that we
show protocol-less URLs, e.g. . This allows you to use Dojo within http and https
applications without adjusting the URL. For more information, check out the Dojo CDN
tutorial
See: Dojo Start
First you had a "http:" missing in the second CDN loading thingy. And then it seems that somehow the dijit dialog files aren't loading... ! You could load them manually OR
you could switch the version of dojo from 1.7.4 to 1.8 (i would advise that) by loading 1.8 files & then it should work. Here is the code:
<!DOCTYPE html>
<html >
<head>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"> </td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
id="cancel">Cancel</button>
</div>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
Show me!
</button>
</body>
</html>
Related
I can get it to work on windows but I can not get it work on Ubuntu server. The file is in the images folder and inside that is the png file. The html is in the templates folder and inside the template folder is the images folder with the png file. I have the same setup on windows and it works.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class= "container">
<form action="/search" class="search-bar" method="GET">
<label for="query">Search:</label><br>
<input type="text" name="query" placeholder="Enter Serial Number"><br>
<button type="submit"><img src="images/search.png"></button>
</form>
</div>
</body>
</html>
I try move the files and even copy the whole dir the issue persist. It suppose to show an image but it don't. Even my style.css not being found.
I'm trying to use the jquery css stylesheet, but I can't seem to get it to format anything at all. I'm using the live preview extension in VSCode, and the css is from the jquery website.
<!DOCTYPE html>
<html>
<head>
<title>Physics Simulator App</title>
<link rel="stylesheet" href="css\jquery.mobile-1.4.5.min.css">
<script src="scripts\jquery-3.5.1.min.js"> </script>
<script src="scripts\jquery.mobile-1.4.5.min.js"> </script>
<script type='text/javascript' src='scripts\Week 2 homework.js'> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul>
<li> Information </li>
<li> Interface </li>
</ul>
</div>
<div data-role="header">Binary Operators Demo</div>
<div data-role="content">
<label for="input">A</label>
<input type="checkbox" name="inputA" id="inputA">
<br />
<label for="input">B</label>
<input type="checkbox" name="inputB" id="inputB">
<br />
<button onclick="AND();">AND</button>
<button onclick="OR();">OR</button>
<button onclick="NOT();">NOT</button>
<button onclick="XOR();">XOR</button>
</div>
<table id="data">
<tr>
<td>Result: </td>
<td id="resultA"></td>
</tr>
</table>
<div data-role="footer">
<small>binary operations demo app</small>
</div>
</div>
</body>
</html>
I don't think I'm missing anything in terms of brackets, and the file paths work for my own css files. I've tried adding 'data-theme="a"' to my page bracket, but nada. I just get this.
result
Is it a version issue or?
Friend, I may have misunderstood you for not mastering English very well. But as I understand it, your problem is with jquery.mobile.css?
Try using the CDN. I copied your code and replaced the with the CDN (I didn't find this Week 2 homework.js).
Replace the with the CDN and do this test:
Insert this code block:
<div class = "ui-grid-d">
<div class = "ui-block-a">
button <br>
<span> any info </span>
</div>
</div>
It uses the style of jquery.mobile.css, if it works the problem could be in your import of the files.
Two tips, avoid spaces in the file names, (Week 2, it could be Week_2_homework), and in the <label for = ""> do not point "input", point the name you gave to the input or the id.
If I was wrong about your problem, answer that I try to help you.
Reggards
My files are organized like this:
index.html renders perfectly when accessed via Intellij's lunch url (localhost:63342/../static/index.html)
But when I run my Spring Boot app and access http://localhost:8080/, my index.html fails to load the CSS files and images.
I have not touched any other configuration. All my controllers are #RestControllers. I do have mustache installed as a dependency but am not using it anywhere.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/body.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/section_one.css"/>
<link rel="stylesheet" type="text/css" href="css/section_two.css"/>
</head>
<body class="body-inner-wrap">
<header>
<div id="header-wrapper">
<div id="title" class="main_title">
<h1>Project</h1>
</div>
<div id="links">
<ul>
<li>
<b>Join</b>
</li>
<li>
<b>How-To</b>
</li>
<li>
<b>About</b>
</li>
</ul>
</div>
</div>
</header>
<div id="content-wrapper">
<div id="intro-box">
<h2>A simple and fast platform to upload audio files and reach out to your listeners via
our no non-nonsense mobile apps.</h2>
<h5>This is work in progress and will be live soon as a closed beta.</h5>
</div>
<div id="login-box">
<div class="login-form">
<form method="post" action="">
<p><input type="text" name="Username" value="" required placeholder="Username"></p>
<p><input type="password" name="password" value="" required placeholder="Password"></p>
<p><input type="submit" name="Login" value="Login"></p>
</form>
</div>
</div>
</div>
<br><br>
<div id="device-mock-bg">
<div class="device-mock">
<img src="images/android-device-mock.svg"
alt="Android app mock up"
height="700"
width="300" />
</div>
</div>
</body>
</html>
Also, checking the browser's console I found these -
The resource from “http://localhost:8080/css/style.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff)
Cookie “JSESSIONID” will be soon treated as cross-site cookie against “http://localhost:8080/css/style.css” because the scheme does not match.
Any help, please?
The problem was that Spring Security was blocking all resources. Had to configure it to allow /css/* and /images/*
Next to the comment by #krtkush, I had migrated my application from MVC to a SPA using VueJS. I had a custom MvcConfig (extending WebMvcConfigurer) class configured which resulted in problems loading only my CSS files, Javascript was loading just fine. I had some overrides for: addResourceHandlers, addInterceptors and added a message source for internationalisation.
After having deleted this class, as I didn't need it anymore, I found that this resolved my CSS loading issue. This unfortunately took me longer than I had hoped for. Hope this helps others that are in a similar process.
I have created simple login.html file in Dynamic Web Project + Maven + GlassFish in Eclipse.
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style type="text/css">
form {text-align: center}
</style>
</head>
<body>
<form action="LoginServlet" method="post">
USERNAME:<input type="text" name="name" value=""/><br>
PASSWORD:<input type="password" name="password" value=""/><br>
<input type="submit" value="ENTER"/>
<input type="reset" value="CLEAR"/>
</form>
</body>
</html>
I launch login.html file like Run as -> Run on server and it looks ok.
But when I changed something in html and try to run it on server I did not see my changes.
Try mvn clean, mvn install.
What should I do to see changes in html file when I Run it on Server? (In Preview I see changes)
When you launch your *.html file on server it opens in Eclipse browser. To see your changes you need to click on Green triangle "Go to the selected URL" and page will be updated.
When the user inputs data into each box and then clicks submit, how would I have that information stored into some memory so it can be outputted onto the screen. It is ok if the page is refreshed and all data is lost. As long as it is possible to output the data while on the page. I was told html5 could do this without the need of the page refreshing.
Basically, I want the user to input a Job ID, a Date and a description. The user then clicks submit. the data is then outputted onto the table.
My Code is probably not worth much here, I just have it up so people know where I'm standing.
And I understand it's not as simple as just writing a bit of code. I just need someone to give me a bit of direction, where exactly I should start and how I should approach this. I've searched the internet but I couldn't find what I needed. I'd like the simplest way to output the user input onto the screen. I want to try and avoid any heavy programming or any new languages for the moment but if that's not possible then let me know.
I was also told to use the 'memory' for storing. That's all the information I was given. I apologize if I haven't asked the question very technically, I've only began using HTML5.
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Form table</title>
<link rel="stylesheet" href = "testing.css" />
</head>
<body>
<section>
<div class = "scrollWrapper">
<table>
<tr>
<th>Job ID</th>
<th>Date</th>
<th>Description</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</section>
<section id = "sec2">
<form name="input" action="html_form_action.asp" method="get">
<p>Job ID:</p><input type="text" name="jobid"><br>
<p>Date:</p><input type="text" name="date"><br>
<p>Description:</p> <input type="text" name="description"><br>
<br>
<input type="submit" value="Submit">
</form>
</section>
</body>
</html>
I think you are going to need a little bit of JavaScript in order for that to work. You don't need memory (since you say it doesn't matter if the data gets lost on page refresh).
HTML5 has an <output> element where you can output what a user inputs.
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Form table</title>
<link rel="stylesheet" href = "testing.css" />
<script>
function display(form){
form.o_jobid.value = form.jobid.value;
form.o_date.value = form.date.value;
form.o_description.value = form.description.value;
return false;
}
</script>
</head>
<body>
<form name="input" action="" method="get" onsubmit="return display(this);">
<section>
<div class = "scrollWrapper">
<table>
<tr>
<th>Job ID</th>
<th>Date</th>
<th>Description</th>
</tr>
<tr>
<td><output name="o_jobid" style="width:100px; height:20px"></output></td>
<td><output name="o_date" style="width:100px; height:20px"></output></td>
<td><output name="o_description" style="width:100px; height:20px"></output></td>
</tr>
</table>
</div>
</section>
<section id = "sec2">
<p>Job ID:</p><input type="text" name="jobid"><br>
<p>Date:</p><input type="text" name="date"><br>
<p>Description:</p> <input type="text" name="description"><br>
<br>
<input type="submit" value="Submit">
</section>
</form>
</body>
</html>
I have placed the form outside of the sections in order for the output elements to work and added a display function in the forms onsubmit method.
The display function basically adds the users input in the corresponding output elements. (return false) is only so the form doens't actually submit it's data to the browser.
For browser support, the output element is supported by most modern browser (Chrome 13+, Firefox 6+, IE10+).
If you need support for a wider range you need to change the display function and the output elements.
Hope it helps.