The following part of code produces this result in Firefox and Chrome
<html>
<title>Dojo Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.ValidationTextBox")
</script>
<label for="firstName"> First Name: </label>
<input type="text" id="firstName"
dojoType="dijit.form.ValidationTextBox"
promptMessage="Enter first name:"
invalidMessage="First Name is required"
/>
</html>
An extra text box is produced with text "X" on it. I have no idea how to fix it and why does this happen. Anyone can help?
You need to add a valid dijit theme to the body tag of your html document, in addition to including a to the css stylesheet of the theme you want to use.
for example:
<html>
<head>
<title>Dojo Example</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.ValidationTextBox")
</script>
</head>
<body class="claro">
<label for="firstName"> First Name: </label>
<input type="text" id="firstName"
dojoType="dijit.form.ValidationTextBox"
promptMessage="Enter first name:"
invalidMessage="First Name is required"
/>
</body>
</html>
Related
I'm learning both HTML and JavaScript and I am getting this error: ReferenceError: $ is not defined. I was already getting this error and was told to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> to the <head>, which I did.
I was also told to make sure all jQuery javascript code is being run inside a code block such as:
$(document).ready(function () {
//your code here
});
I did so. However, I'm still getting the same error.
What's the reason, then? Am I using a wrong version? What's wrong? Here's the full code:
html.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="common.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="org-bar">
<h1 style="font-size:20px;">Criar Organização</h2>
<form id="orgCreation" action="welcome.php" method="post"></form>>
<label for="orgName"></label>
<input class="textInput" type="text" id="orgName" name="orgName" placeholder="Nome da Organização [5-20]" minlength="5" maxlength="20">
<label for="orgAbb"></label>
<input class="textInput" type="text" id="orgAbb" name="orgAbb" placeholder="Abreviatura da Organização [3-4]" minlength="3" maxlength="4">
<input class="button" type="button" id="orgButton" value="Criar">
</div>
</form>
</div>
<script src="orgcreation.js" type="text/javascript"></script>
</body>
</html>
You can see I first call jQuery on the head and only on the bottom of the body do I call the javascript file.
orgcreation.js
$(document).ready(function(){
$("orgButton").click(function(){
mp.trigger('orgCreation', $('#orgName').val(), $('#orgAbb').val());
});
});
I am not javascript html php expert but I would like to study I just wanted to ask for advice Is it possible to make the user can enter single or Multiple input of email in textbox separated by ; using javascript just like in outlook,yahoo,email?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
email <input type="text" name="FirstName" value="Mickey"><br>
</form>
</body>
</html>
Just Enter the text and click in the text box emails are separated
<html lang="en">
<head>
<title>Jquery - input tags plugin example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
</head>
<body style="background: #337AB7">
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script type="text/javascript">
$('#input-tags').tagsInput();
</script>
</body>
</html>
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>
<script>
$(document).ready(function) {
$('#basicTest .subject').dependsOn({
'#basicTest input[type="checkbox"]': {
checked: true
}
});
});
</script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="basicTest">
<label>
<input type="checkbox"> Check me
</label>
<input type="text" class="subject">
</form>
</body>
</html>
I am actually trying to implement the basic example which is after click on the "check me" a input box gets displayed. By using the depends on plugin is is not working. These are the files. I placed the script in between the html and head tags. Any suggestions are welcome!
Hi i have this html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/style.css"/>
<link rel="icon" href="">
<title>Submit</title>
</head>
<body>
<script>
function show_alert() {
alert("Animes score is: ");
}
</script>
<div class=střed>
<form>
<div id="one"><input style="width: 500px" type="text" name="url" value="Enter myanimelist URL" onfocus="if (this.value=='Enter myanimelist URL') this.value='';"/></div>
<div id="two"><input type="image" onclick="show_alert();" name="submit" src="/Button1.png" border="0" alt="Submit" />
</div>
</form>
</div>
</body>
</html>
Now i want to get from user's url (for example: https://myanimelist.net/anime/5114/Fullmetal_Alchemist__Brotherhood) the anime's score from page's html (this part: <span itemprop="ratingValue">9.26</span> - so in this case it would be 9.26) and show it in alert box (doesn't need to be alert box thought, just somehow show it to user). Thanks for any help.
I've searched on google but didn't find answer.
Here is jsfiddle so you can see it yourself: http://jsfiddle.net/ohk6ho8a/
When you type text into the line and submit 1 div moves under another.
Any idea how to fix this?
HTML file: - other files at jsFiddle (it's pain to copy paste code here)
<!DOCTYPE html>
<html>
<head>
<title>Text Game</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="gameScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<p id="help" style="display:none;">This is help</p>
<div id="divWrapper">
<div id="console">
<div id="placeholder"></div>
</div>
<div id="menu">
<div id="placeholder2"></div>
</div>
</div>
<form onsubmit="return false;" autocomplete="off">
<center><input type="text" id="command_line" autofocus="autofocus" size="50"></input><center>
<center><input type="submit" id="submit" size="50" ></input><center>
</form>
</body>
</html>
On your #console and #menu remove inline-block and change them both to float:left;
updated fiddle: http://jsfiddle.net/ohk6ho8a/1/
float:left;
instead of
display:inline-block;
You should float the two divs (float: left for both) and apply a clearfix style on the parent.