Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am new in Angularjs, below is my code,
<!DOCTYPE html>
<html>
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
<script src="ng-messages.js"></script>
</head>
<body>
<div ng-controller='thecontroller'>
<form name="myForm">
<label>
Enter text:
<input type="text" ng-model="field" name="myField" required minlength="5" />
</label>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
</div>
</form>
</div>
</body>
</html>
And Below is angularjs code,
var myApp=angular.module('myApp',['ngMessages']);
myApp.controller('thecontroller',function($scope){
$scope.name="Gopal";
});
We didn't get proper output, what's wrong with my above code.
Thanks
You have not mentioned ng-app="myApp" in your html template.
Also make sure you have reference the .js file needed. I assume this includes the module declaration.
<script src="ng-messages.js"></script>
DEMO
var myApp=angular.module('myApp',['ngMessages']);
myApp.controller('thecontroller',function($scope){
$scope.name="Gopal";
});
<!DOCTYPE html>
<html>
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
</head>
<body ng-app="myApp">
<div ng-controller='thecontroller'>
<form name="myForm">
<label>
Enter text:
<input type="text" ng-model="field" name="myField" required minlength="5" />
</label>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
</div>
</form>
</div>
</body>
</html>
You need to specify ng-app="your Module name" to bootstrap the application when index.html page start to load. It triggers the AngularJs life cycle automatically.
Note- You may also specify the pattern for validating email that is email is valid or not
<!DOCTYPE html>
<html >
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
<script src="ng-messages.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='thecontroller'>
<form name="myForm">
<label>
Enter text:
<input type="text" placeholder="abc#eyz.com" ng-model="field" name="myField" data-ng-required="true" minlength="5" maxlength="100" ng-pattern="/\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*/i"/>
</label>
<div data-ng-show="myForm.myField.$error.required">You did not enter a field</div>
<div data-ng-show="myForm.myField.$error.min
|| myForm.myField.$error.max">
Your email must be between 5 and 100 characters long
</div>
<div data-ng-show="myForm.myField.$error.pattern" >The email id is not valid</div
</form>
</div>
</body>
</html>
Related
I have this html code
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
When I run and try to upload a file by clicking browse and select a file i want to change the label text to the name of the file I uploaded how can I achieve that?
I'm using bootstrap. If you don't use bootstrap and use normal html it works in default way and shows the file name. But I have to use bootstrap here. So, please suggest a solution that goes with bootstrap.
You're going to need to use some JavaScript for this. I'll walk you through the steps: First detect when a file gets uploaded, then get the file name and update the label contents with the filename. Below is a brief example.
let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
If you require any more clarification please don't hesitate to ask.
I want a Calendar on a HTML Input Text.
I don't want HTML5 or other solutions.
I created a possible solution on this JSFiddle.
<head>
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
</head>
<input type="text" name="date1" id="date1" alt="date" class="IP_calendar" title="d/m/Y">
But I'm looking for other alternatives with other styles.
Any suggestion?
Why not doing this (just checked it) :
$(document).ready(function() {
$("#start_datepicker").datepicker();
$("#end_datepicker").datepicker();
});
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>
</form>
</body>
</html>
I am trying to Remove a topic from CrudRepository, but the checkboxes I am trying to create don't show up.
I have an Add Method which works just fine, but the remove doesn't.
HTML: hello.html
for the navigation and head fragments
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org/"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:fragment="head">
<title> Lunch Planner Beta </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
<nav th:fragment="navigation">
List |
Add |
<a th:href="/removeTopic">Remove</a>
</nav>
<form th:action="#{/home}" method="get">
<input type="submit" value="Home"/>
</form>
<br/>
<form th:action="#{/logout}" method="post">
<input type="submit" value="Sign OUT"/>
</form>
</body>
</html>
The part of TopicController.java
#RequestMapping(method = RequestMethod.POST, value = "/remove", consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
#Transactional
public ModelAndView deleteTopic(Long id, HttpServletResponse response, Errors errors){
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
model.addObject("topic",topicService.getTopic(id));
topicService.deleteTopic(id);
return new ModelAndView("home");
}
HTML: removeTopic.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="hello :: head">
</head>
<body class="container">
<nav th:replace="hello :: navigation"></nav>
<form th:action="#{/api/remove}" th:object="${topic}" method="post">
<div th:each="topic: ${topic}" class="checkbox">
<input type="radio" name="id" th:value="${topics.id}" th:id="${topics.id}"/>
<label th:for="${topics.id}" th:text="${topics.category}"></label>
<br/>
</div>
<input type="submit" value="Remove Topic"/>
</form>
</body>
</html>
And here is what is happeneing:
Your problem is in the loop, you are using the same object to iterate itself
th:each="topic: ${topic}"
You should have something similar to this
<div th:each="item: ${topics}" class="checkbox">
<input type="radio" name="id" th:value="${item.id}" th:id="${item.id}"/>
<label th:for="${item.id}" th:text="${item.category}"></label>
<br/> <!-- Do not use this tag to add vertical space, use css classes-->
</div>
Thanks to https://stackoverflow.com/users/2757561/cralfaro we were able to fix the connection between the controller and the removeTopic.html
The problem was is the hello.html at the
<a th:href="/removeTopic">Remove</a>
and this is how it should be:
<a th:href="#{/api/removeTopic}">Remove</a>
I am using angularjs, were i have defined some routes and on the html page i have used some validations.
My html page looks like:
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid">
<span ng-show="loginForm.uName.$error.required">Username is required.</span>
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
When i run the page in browser, all the errors/validations are showing up on page load itself.
I would like the validation error to only come up, when there is any error on particular control and wants the button to be disabled, until and unless the form is fully valid.
index.html:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="../js/app.js"></script>
</head>
<body ng-app="test">
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
app.js:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '../partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '../partials/login.html',
controller: 'login'
});
});
your code should work as is. check out this plunker..
what you need is ng-app somewhere in your html
<html ng-app="plunker">
.
.
.
</html>
i have created and added data into database through jsp.Now my problem is with edit/update the database which should be done through html form.In one for i select student rollno and form should display all other fields and then i can edit it and update the database.
editcourse.jsp
<!DOCTYPE html>
<html>
<head>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>
</head>
<body>
<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->
<form name="f1" method="post" class="anu" action="Edit_coursedetails.jsp">
<%#include file="adminheader.jsp"%>
<%#include file="sidemenus.jsp" %>
<div id="container">
<div style="float:right;width:10%;border:0;font-color:#163362">Log Out</div><br>
<div class="content"><center>Edit Course</center><br>
<div class="formElements,rightcol" align="center">
<label>Course code:
<span><input type="text" id="txtCoursecode" name="txtCoursecode" ></span></label>
</div><br>
<div class="buttons">
<button type="submit" class="primaryAction">Edit</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>
</form>
</body>
</html>
edit_coursedetails.jsp
<!DOCTYPE html>
<html>
<head>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>
</head>
<body>
<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->
<%
ccode=request.getParameter("txtCoursecode");
try {
Statement st = null;
st=conn.createStatement();
ResultSet rs = st.executeQuery("select * from courses where course='"+txtCoursecode+"'");
if(rs.next())
{
cname=rs.getString("cname");
Description=rs.getString("Description");
}
%>
Edit courses
<form name="f1" method="post" class="anu" action="Add_coursedetails.jsp">
<%#include file="adminheader.jsp"%>
<%#include file="sidemenus.jsp" %>
<div id="container">
<div style="float:right;width:10%;border:0;font-color:#163362">Log Out</div><br>
<div class="content"><center>Add Course</center><br>
<div class="formElements,rightcol" align="center">
<label>Course code:
<span><input type="text" id="txtCoursecode" name="txtCoursecode" value="<%=rs.ccode%>"></span></label>
</div><br>
<div class="formElements,rightcol" align="center">
<label>Course Name:
<span><input type="text" id="txtCoursename" name="txtCoursename" value="<%=rs.cname%>"></span></label>
</div><br>
<div class="formElements,rightcol" align="center">
<label>Duration:
<span>        <input type="text" id="txtDuration" name="txtDuration" value="<%=rs.getString("3")%>"></span></label>
</div>
<div class="buttons">
<button type="submit" class="primaryAction">Update</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>
<%
}
}
catch(Exception e){}
%>
</form>
</body>
</html>
in editcourse form by giving ccode it should display all other field from database with thier value and then i can modify it
You can use either ajax or give url of jsp in form action attribute.
then in that jsp get txtRollno from request, retrieve fields from database for this rollno, populate data into appropriate field and then you can edit it and then update into database.
As other friends said you need to use ajax call and you said that you don't know ajax.
So I think these tutorials help you:
1) What is AJAX?
2) AJAX Example
3) jQuery Ajax call tutorial
Good Luck ;)