I am very new to AngularJS and trying to understand how AngularJS can use along with ASP.NET-MVC5 application. In my first attempt I want to run AngularJS app from basic HTML page (in my case index.html) where app holding form template in html format, also I have add global variable, controller, service via factory and directives but I cannot manage to run this app 'employee-form' inside index.html. In order to test if angularJS is initialize and working properly, I have added very basic angularjs code inside in html and it works.. I am not sure where I have done mistake
AngularFormsApp.js (global variable)
var angularFormsApp = angular.module('angularFormsApp', []);
efController.js
angularFormsApp.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
efService.js
angularFormsApp.factory('efService',
function () {
return {
employee: {
fullName: "Khurram Zahid",
notes: "The ideal employee, just don't mess with him",
department: "IT Development",
perkCar: true,
perkStock: false,
perkSixWeeks: true,
payrollType: "none"
}
}
});
efDirective.js
angularFormsApp.directive('employeeForm',
function () {
return {
restrict: 'E', //E stands for element, meaning we want to use this directive as element
templateUrl: '~/App/EmployeeForm/efTemplate.html'
}
});
efTemplate.html (form)
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<input type="text" id="notes" name="notes" class="form-control" />
</div>
<div class="form-group">
<label for="department">Department</label>
<select id="department" name="department" class="form-control">
<option>Engineering</option>
<option>Marketing</option>
<option>Finance</option>
<option>IT Development</option>
</select>
</div>
<br/>
<span><b>Perks</b></span>
<div class="checkbox">
<label><input type="checkbox" value="perCar"/>Company Car</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" />perk Stock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkSixWeeks" />perk Six Weeks</label>
</div>
<input type="submit" value="Submit Form" />
index.html
<!DOCTYPE html>
<html>
<head >
<title>Angular JS</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
</head>
<body ng-app="angularFormsApp">
<div class="AngularJSTestBlockCode">
<div>
<input type="text" ng-model="name" />
<br />
<h1>Hello {{name}}</h1>
</div>
<br /><br />
<div>
{{458/8}}
</div>
</div>
<div>-------------------------------------------------------</div> <br/><br/>
<div ng-controller="efController">
<employee-form>????????????????????
</div>
You need a route provider to render your html page. Here is your example
.config(['$stateProvider',function($stateProvider) {
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('dashboard.create-example',{
templateUrl:'views/example/create.html',
url:'/create-example',
controller:'Ctrl'
})
then in your controller(efController.js) put this $state.transitionTo('dashboard.create-example'); to render your page to any html you want
Related
I have a Partial View that contains a DropdownList and a Label. The initial value of the Label is blank and the Dropdown says "Select option". I have a script at the bottom of the Partial View to handle the On Change event of teh dropdown list but it never gets fired. I have put a breakpoint at the start of it but the IDE just shows that this breakpoint will never be hit.
Code for Partial View:
#*model IEnumerable<ArdentTestv6.Repositories.SelectProjectTypes_Result>*#
#*model ArdentTestv6.Repositories.ProjectListEntities*#
#Html.DropDownList("ProjTypeName",
(IEnumerable<SelectListItem>)ViewBag.ptName, "Select option", new {
#id="pType" })
<label id="ptid">
</label>
<script type="text/javascript" language="javascript">
$("#pType").change(function () {
debugger;
$.ajax({
url: "ProjectTypes/_ListProjectTypes",
method: "POST",
data: "TypeID=" + $(this).val(),
dataType: "json",
success: function (response) {
window.location.reload();
$("#ptid").val = $(this).val()
// handle
}
});
});
</script>
When the Parent View is loaded the Dropdown is populated and rendered correctly. The HTML Source code for the Rendered Parent View as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="/Images/logo.jpg" width="576" height="73" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Projects</li>
<li>Housekeeping</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<!--<h2>Create New Project</h2>-->
<br />
<form action="/ProjectLists/Create" method="post"> <div class="form-horizontal">
<h4>Create New Project</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Project_Type">Project Type</label>
<div id="ddlDiv" class="col-md-10">
<select id="pType" name="ProjTypeName"><option value="">Select option</option>
<option value="1">DCO</option>
<option value="2">CPO</option>
<option value="3">TWA</option>
</select>
<label id="ptid">
</label>
<!--<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
</script>-->
<script type="text/javascript" language="javascript">
$("#pType").change(function () {
debugger;
$.ajax({
url: "ProjectTypes/_ListProjectTypes",
method: "POST",
data: "TypeID=" + $(this).val(),
dataType: "json",
success: function (response) {
window.location.reload();
$("#ptid").val = $(this).val()
// handle
}
});
});
</script>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectReference">ProjectReference</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectReference" name="ProjectReference" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectReference" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectName">ProjectName</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectName" name="ProjectName" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectName" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectDescription">ProjectDescription</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectDescription" name="ProjectDescription" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectDescription" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectManager">ProjectManager</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectManager" name="ProjectManager" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectManager" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DateStart">DateStart</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field DateStart must be a date." id="DateStart" name="DateStart" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="DateStart" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DateCompleted">DateCompleted</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field DateCompleted must be a date." id="DateCompleted" name="DateCompleted" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="DateCompleted" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
Back to List
</div>
<hr />
<footer>
<p>© 2018 - Logged in as Ardent-HP\Ardent</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"ca5d6b107cc64804abbd651be07c37d8"}
</script>
<script type="text/javascript"
src="http://localhost:54821/a94212cdd4c04322a8b3d6a88ccab368/browserLink"
async="async"></script>
<!-- End Browser Link -->
</body>
</html>
How obtain value of hotel in Controller ? now i have only null. The nested object are not allowed because of html 5 doesn't let to be nested. I have objects in template but only object knight bring the value and I need also further written controls values. I ve tried to put the object but without formater yet, but I dont think it has meaning now.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Add knight</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" th:href="#{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" />
<script th:src="#{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" th:object="${knight}" th:action="#{/assignQuest}" th:method="post">
<input type="hidden" th:field="*{id}"/>
<input type="hidden" th:field="*{name}"/>
<input type="hidden" th:field="*{age}"/>
<input type="hidden" th:field="*{level}"/>
<div class="form-group">
<label class="control-label">Wykonaj zadanie</label>
<select th:field="*{quest}">
<option th:each="quest : ${notStartedQuests}"
th:value="${quest.id}"
th:text="${quest.description}">?</option>
</select>
</div>
<input type="hidden" th:field="*{name}"/>
<input type="hidden" th:field="*{id}"/>
<ul>
<label class="control-label">Zamiesszkaj w hotelu</label>
<li th:each="hotel : ${hotels}">
<input type="radio" th:field="*{id}" th:value="${hotel.id}" />
<label th:for="${hotel.name}" th:text="${hotel.name}"></label>
</li>
</ul>
<div class="row">
<button type="submit" class="btn btn-default">Wyslij rycerza</button>
</div>
</form>
</div>
</body>
</html>
QuestController:
import java.util.List;
#Controller
public class QuestController {
#Autowired
KnightService knightService;
#Autowired
QuestService questService;
#Autowired
HotelService hotelService;
#RequestMapping("/assignQuest")
public String assignQuest(#RequestParam("knightId") Integer id, Model model) {
Knight knight = knightService.getKnight(id);
List<Quest> notStartedQuests = questService.getAllNotStartedQuests();
List<Hotel> hotels = hotelService.getAllHotels();
model.addAttribute("knight", knight);
model.addAttribute("notStartedQuests", notStartedQuests);
model.addAttribute("hotels", hotels);
return "assignQuest";
}
#RequestMapping(value = "/assignQuest", method = RequestMethod.POST)
public String assignQuest(Knight knight, Hotel hotels, BindingResult result) {
System.out.println(result);
System.out.println(hotels);
knightService.updateKnight(knight);
// Quest quest = knight.getQuest();
// questService.update(quest);
return "redirect:/knights";
}
}
I have created a master page for my application and then the master application has been displayed in every page, but I have created a content page and I have created a separate CSS style design for this page and I have called to that particular page but the style for this page is not displayed.
#model MedeilMVC_CLOUD.Models.Company
#{
ViewBag.Title = "Add Company";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
<div class="page-content">
<div class="container-fluid">
<section class="box-typical box-panel mb-4">
<header class="box-typical-header">
<div class="tbl-row">
<div class="tbl-cell tbl-cell-title">
<h3>Form steps example</h3>
</div>
</div>
</header>
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
<div>
<h3>Account</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</section>
<h3>Profile</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Address</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</section>
<h3>Hints</h3>
<section>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section>
<h3>Finish</h3>
<section>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="agree" class="required" required>
<label for="agree">Terms and Conditions</label>
</div>
</div>
</section>
</div>
</form>
</div><!--.box-typical-body-->
</section>
</div>
</div>
<script src="~/js/lib/jquery-validation/jquery.validate.min.js"></script>
<script src="~/js/lib/jquery-steps/jquery.steps.min.js"></script>
<script>
$(function () {
$("#example-basic ").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
var form = $("#example-form");
form.validate({
rules: {
agree: {
required: true
}
},
errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); },
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
$("#example-tabs").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
enableFinishButton: false,
enablePagination: false,
enableAllSteps: true,
titleTemplate: "#title#",
cssClass: "tabcontrol"
});
$("#example-vertical").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
});
</script>
Style Sheet Link
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
And also javascript file also not working
you can use section directive in layout.
In layout write in that place where you want insert section (head/fooret etc...)
#RenderSection("styles", false)
Then in view set the content to this section:
#section styles{
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
}
Name of this section may be any. But in view you can use each section only one time in any place.
Having one html file called index.html.Here I'm having one page for list view(group).Another one(pg_add-group) is for both new and edit view.
If I hit the Add button from list view,the new form opened correctly.If I select any of the product from list view,its correctly uploaded the details to the edit view.
Its done by getting date from session.Now if I again try to add product, its containing old session data in the new form.The new form should contain with empty details.Can you help me to do this ?
Here is my coding,
pg_add-group
<div id="pg_add-group" data-role="page">
<form name="frm_add-group" id="frm_add-group" action="" method="post">
<div data-role="header" data-transition="fixed">
<h1 id="add-group-header"></h1>
Back
</div>
<div data-role="main" class="ui-content" >
<div id="add_sms-group_notification" class="center-wrapper-error" data-icon="right"></div>
<label for="group_name" class="ui-hidden-accessible"></label>
<input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
<label for="group_desc" class="ui-hidden-accessible"></label>
<textarea name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<div class="containing-element">
<label for="group_published">Published</label>
<select name="group_published" id="group_published" data-theme="b">
<option value="1" >Yes</option>
<option value="0" >No</option>
</select>
<input type="hidden" name="group_id" id="group_id" />
</div>
<div class="containing-element">
<button type="submit" name="submit" value="submit" data-theme="a" data-icon="check">Submit</button>
<button type="reset" name="reset" value="reset" data-theme="a" data-icon="delete" >Reset</button>
</div>
<div data-role="footer" data-position="fixed">
<h1 id='add-book-footer'></h1>
</div>
</form>
</div>
test.js
From he below coding
group_id is comes from the list view's selected group id.
session data ses_group contains the list of groups.
$('#pg_add-group').on('pageshow', function(event) {
var group_list = $.parseJSON(sessionStorage.getItem("ses_group"));
var group_id = sessionStorage.group_id;
$.each(group_list, function(ctr, obj) {
if(group_id == obj.groupid){
$('input[id=group_name]').val(obj.groupname);
$('textarea[id=group_desc]').val(obj.groupdesc);
$('input[id=group_id]').val(obj.groupid);
$("#group_published").val('0').slider('refresh');
}
});
$( ".input[id=group_name]" ).textinput( "refresh" );
$( ".textarea[id=group_desc]" ).textinput( "refresh" );
});
Working example: http://jsfiddle.net/Gajotres/2AVWQ/
Usage:
Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one. Basically use provided code to reset any form.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="Some value"/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<textarea>
asd
asd
asd
as
das
d
asdassd
</textarea>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text'],textarea").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}
Instead of styling the data-valmsg-summary produced by Html.ValidationSummary() in a custom way, I would like to just show the box with the twitter bootstrap style applied to it whenever the field validation fails. How would I go about doing this? Currently my markup looks like this:
..
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div class="container">
<div class="row-fluid">
<br />
<br />
<br />
<br />
</div>
<div class="row-fluid">
<form class="navbar-form pull-right" action="/Login?ReturnUrl=%2F" method="post">
<h3 class="modal-header">Please sign in</h3>
<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" class="input-large" placeholder="Username">
<input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" class="input-large" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me">
Remember me
</label>
<button type="submit" class="btn btn-danger">Sign in</button>
<br />
<br/>
<div data-valmsg-summary="true" class="alert alert-danger alert-block" id="formval" >
<span class="close pull-right" data-dismiss="alert">×</span>
<strong>Ooops!</strong> You seem to be missing something:
<ul>
<li style="display: none"></li>
</ul>
</div>
</form>
</div>
</div>
I've tried adding the style="display: none" to my div, but that does not seem to do the trick either.
I was looking for something else and stumbled on this. Thought I would post the answer for the next person since I am 5 months late. Add to your document ready.
//I dont want to validate my ajax forms take that if statement out if you want 2.
if ($('form:not([data-ajax="true"])').length != 0) {
var settings = $.data($('form:not([data-ajax="true"])')[0], 'validator').settings;
settings.submitHandler = function (form) {
//success
form.submit();
};
}
$("form").bind("invalid-form.validate", function (form, validator) {
var errors = validator.numberOfInvalids();
var message = "<ul>";
//loop thru the errors
for (var x = 0; x < validator.errorList.length; x++) {
var $group = $(validator.errorList[x].element).parent().parent(); //gets bootstrap class of form-group
var $element = $(validator.errorList[x].element); // gets the element to validate
var elementMessage = validator.errorList[x].message; // gets the message
$group.addClass("has-error"); // adds the bootstrap class has-error to the group
$element.popover({ content: elementMessage, placement: "right" }).popover("show"); // adds a popover
message += "<li>" + elementMessage + "</li>"; //appends message to list
}
message += "</ul>";
// Function I have to add alert to the page, but basically you can do whatever you want with the message now.
RegisterError("There was some errors with your submission!", message, false);
});