In my _Layout view I have this as scripts (also CSS have been added):
<!-- jQuery -->
<script src="/Content/themes/sb-admin-2/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/Content/themes/sb-admin-2/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="/Content/themes/sb-admin-2/raphael/raphael-min.js"></script>
<script src="/Content/themes/sb-admin-2/morrisjs/morris.min.js"></script>
<script src="/Content/themes/sb-admin-2/js/morris-data.js"></script>
<!-- Moment -->
<script src="/Scripts/moment-with-locales.min.js"></script>
<!-- DateTimePicker -->
<script src="/Content/datetimepicker/bootstrap-datetimepicker.js"></script>
<!-- Custom Theme JavaScript -->
<script src="/Content/themes/sb-admin-2/js/sb-admin-2.js"></script>
<script>
$(document).ready(function () {
debugger;
$('.datetimepicker').datetimepicker({
sideBySide: true
});
});
</script>
And also, in my view where I want to show the datetimepicker I have this:
<div class="row">
<div class="form-group col-md-6">
<label>Publish Date</label>
<div class="input-group" id="datetimepicker">
#Html.TextBoxFor(x => x.PublishDate, new { #class = "form-control datetimepicker", placeholder = "Date", required = "required" })
<div class="input-group-addon"><i class="fa fa-calendar"> </i></div>
</div>
</div>
</div>
I tried many things to show the datetimepicker, have someone an idea of my problem? I don't have errors thrown in Console, I tried to debug but I didnt find nothing.
Your div has id="datetimepicker" but you are using selector for class ".datetimepicker".
Try to change:
$('.datetimepicker').datetimepicker({
sideBySide: true
});
into
$('#datetimepicker').datetimepicker({
sideBySide: true
});
Related
I have a Bootstrap 4 form with an input field, called runname. I want to perform the following validation on the input field:
runname cannot be empty
runname cannot contain spaces
runnamecannot already be used previously
I already have the code for a form which gives an error, using custom Bootstrap styles if the input field is empty:
// JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container">
<div class="col-md-12 order-md1">
<form class="needs-validation" novalidate method="post" action="#">
<div class="form-group row">
<label for="inputRunname" class="col-sm-2 col-form-label">Run name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputRunname" name="runname" placeholder="Run name" required>
<div class="invalid-feedback">
Please enter a run name
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
And I have some Javascript to check if an input contains spaces:
function cannotContainWhiteSpace(input, errorId, name) {
var value = input.value;
var errMsgHolder = document.getElementById(errorId);
if (!(/^\S*$/.test(value))) {
errMsgHolder.innerHTML =
'The ' + name + ' cannot contain whitespace';
input.focus();
return false;
}
}
And I also have some Python code on my Cherrypy backend which does a lookup in the database to see if the runname already exists:
try:
myConnection = mysql.connector.connect(host=self.database['host'], user=self.database['user'], passwd=self.database['passwd'], db=self.database['db'])
cursor = myConnection.cursor(buffered=True)
# unless overriden by the force flag, check whether the runname has already been used before
if not force:
reusedrunquery = "SELECT run FROM logs WHERE run = %s AND errormessage IS NULL"
cursor.execute(reusedrunquery, (runname,))
if cursor.fetchall():
flag = True
cherrypy.session['reusedRun'] = True
myConnection.close()
except mysql.connector.Error as err:
return self.database_failure(str(err))
But I don't know how to cobble all these different parts together to get a form where I have both the two client-side validations and the server-side validation.
On Submit event, you should have a method in your backend that actually intercepts the request and I think there you should be able to make a connection with your backend's logic.
Here they are the steps:
Form compiled correctly
Http POST request starts onSubmit event
Back-end receives the request and applies further logic by gathering the data on the method in charge to receive the Http POST request
Otherwise, you may try to make an AJAX call on which there will be executed the client-side validations and then it will call the server-side method/class for checking that runname has been used already.
Most of the times I use custom styles to achieve this.
.invalid-feedback{
display:none;
}
.invalid .invalid-feedback {
display:block;
}
<form novalidate>
<div class="form-group">
<label>Label</label>
<input class="form-control" name="runname" type="text">
<div class="invalid-feedback"></div>
</div>
</form>
In Javascript
Validate the input controls and set css classes and message text.In your case, validate not empty, no spaces, and not already used[server side].
If invalid add the class invalid to parent form-group, and set the validation message inside invalid-feedback div next to the input control.
I created the main page that has 2 datepickers and 1 input mask for time. A button will trigger a GET request for a page with the same content to be loaded within a div. I have put all the js, CSS and function script on the main page.
At the main page, all the datepickers and input mask work correctly but the GET request got trigger and the new page is loaded, all the datepickers and input mask are not working.
Please help.
Date Picker and Input Mask Not Working
The MAIN PAGE Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- IN SUBFOLDER PLUGIN -->
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- JQuery 2.2.3 Compressed -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- InputMask -->
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
</head>
<body>
<form name="form1">
<label>Date : </label>
<div>From :<input name="dt_DateFr" type="text" date-picker></div>
<div>To : <input name="dt_DateTo" type="text" date-picker></div>
<div>Time: <input id="txtOTOut" name="txtOTOut" type="text"
data-inputmask="'alias': 'hh:mm'" data-mask>
</div>
<button type="submit" id="btnShow" name="btnShow"
onclick="showContent();return false;">
Show</button>
</form>
<br />
<br />
<div id="content2" style="display: none">
<!-- CONTENT HERE -->
</div>
<script>
$(function () {
//Date picker
$("[date-picker]").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).datepicker("setDate", new Date());
});
$(function () {
//Time mask
$("[data-mask]").inputmask();
});
$(function () {
$("#btnShow").click(function () {
$("#content2").show();
});
});
</script>
<script>
function showContent() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content2").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ax_test.asp?", true);
xhttp.send();
}
</script>
The GET REQUEST Page ax_test.asp
<form name="form2">
<label>Date : </label>
<div>From :<input name="dt_DateFr" type="text" date-picker></div>
<div>To : <input name="dt_DateTo" type="text" date-picker></div>
<div>Time: <input id="txtOTOut" name="txtOTOut" type="text"
data-inputmask="'alias': 'hh:mm'" data-mask>
</div>
</form>
Manage to get it working by including the jquery in the showContent()
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- ALL script in subfolder plugins -->
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- JQuery 2.2.3 Compressed -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- InputMask -->
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
</head>
<body>
<form name="form1">
<label>Date : </label>
<div>From :<input name="dt_DateFr" type="text" date-picker></div>
<div>To : <input name="dt_DateTo" type="text" date-picker></div>
<div>Time: <input id="txtOTOut" name="txtOTOut" type="text"
data-inputmask="'alias': 'hh:mm'" data-mask>
</div>
<button type="submit" id="btnShow" name="btnShow"
onclick="showContent();return false;">
Show</button>
</form>
<br />
<br />
<div id="content2" style="display: none">
<!-- CONTENT HERE -->
</div>
<script>
$(function () {
//Date picker
$("[date-picker]").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).datepicker("setDate", new Date());
});
$(function () {
//Time mask
$("[data-mask]").inputmask();
});
$(function () {
$("#btnShow").click(function () {
$("#content2").show();
});
});
</script>
<script>
function showContent() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content2").innerHTML = xhttp.responseText;
$("[data-mask]").inputmask();
$("[date-picker]").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).datepicker("setDate", new Date());
}
};
xhttp.open("GET", "ax_test.asp?", true);
xhttp.send();
}
</script>
</body>
</html>
Good Day!
I have a contact form that is using bootstrap validator.
I am able to get the (in)validation of the fields to show up as expected, but it does not seem like the submit button is "respecting" the (in)validation before submitting - the fields does not HAVE to be validated in order for the form to be submitted. I am using ajax in order to submit the form without realoding the entire page.
The ajax code should be located in the mashup.js file, of my contact test page!
(in case you have not already noticed it, I am a n00b - and would really appreciate the help:)
UPDATE: (This is the current code)
.html
<meta charset="utf-8">
<!-- Website Title & Description for Search Engine purposes -->
<title>Contact Form</title>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Content-Type -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Bootstrap CSS -->
<link href="includes/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Responsive Navigator -->
<link rel="stylesheet" href="includes/nav/responsive-nav.css">
<!--<link rel="stylesheet" href="includes/nav/nav_styles.css">-->
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<!-- BootStrap Validator CSS -->
<link rel="stylesheet" href="includes/css/bootstrapValidator.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="includes/css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<br>
<form id="html5Form" method="post" action='mail/mail.php'
class="form-horizontal"
data-bv-message="This value is not valid"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label>Name</label>
<input class="form-control" placeholder="Name.." type="text" name="name" id="name"
data-bv-message="The username is not valid"
required data-bv-notempty-message="The username is required and cannot be empty"
pattern="^[a-zA-Z0-9]+$" data-bv-regexp-message="The username can only consist of alphabetical, number"/>
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" placeholder="Email.." name="email" id="email" type="email" required data-bv-emailaddress-message="The input is not a valid email address"/>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" name="message" id="message" rows="7" required
data-bv-notempty-message="No empty message"></textarea>
</div>
<input type="submit" id="submit" name="submit" value="Send"/>
</form>
<div class="loading">
Sender melding...
</div>
<div class="success">
</div>
</div>
</div> <!-- End content -->
<!-- Include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include Mashup -->
<script src="includes/js/mashup.js"></script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- BootStrap Validator JS -->
<script src="includes/js/bootstrapValidator.min.js"></script>
<script>
$(document).ready(function() {
$('#html5Form').bootstrapValidator();
});
</script>
</body>
</html>
.js
$(document).ready(function() {
$('form').on('submit', function(e){
var thisForm = $(this);
//Prevent the default form action
//return false;
e.preventDefault();
//Hide the form
$(this).fadeOut(function() {
//Display the "loading" message
$(".loading").fadeIn(function() {
//Post the form to the send script
$.ajax({
type: 'POST',
url: thisForm.attr("action"),
data: thisForm.serialize(),
//Wait for a successful response
success: function(data) {
//Hide the "loading" message
$(".loading").fadeOut(function() {
//Display the "success" message
$(".success").text(data).fadeIn();
});
}
});
});
});
});
});
From looking at the provided Ajax example, it looks like you need to be watching for .on('success.form.bv'), not .on('submit'). So you would need to modify your event handler to look like this:
$('form').on('success.form.bv', function(e) { ... });
Hope this helps.
I am using ajax to auto refresh a div tag using this code in my index.php file:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#messanges').load('messanges.php');
}, 1000);
});
</script>
<div id="messanges"></div>
<textarea name="chat_input" id="chat_input"></textarea>
In messanges.php I have a auto scroll down code.
Cause I want it to start at the bottom when entering the chat.
<head>
<script>
var chat_height = $('#chat').outerHeight();
$('#chat_box').scrollTop(chat_height);
</script>
</head>
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">
"Test" </p>
</div>
The code is now forcing the scroll to stay at the bottom because of the ajax auto refresh.
How can I make it auto refresh, but if I want to scroll up it will not force me down when it refresh?
try some like this
<head>
<script>
var chat_height = $('#chat').outerHeight();
if($('.doScroll').is(':checked'))
{
$('#chat_box').scrollTop(chat_height);
}
</script>
</head>
<input type="checkbox" class="doScroll" checked />
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">"Test" </p>
</div>
Why doesn't this simply jQuery ajax code not load pull.php into the div with id of #alert?
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$(".pull_button").click(function() {
$("#alert").load("pull.php");
});
});
</script>
</head>
<body>
<div id="#alert"></div>
<nav>
<a class="pull_button">Pull Data</a>
</nav>
...
Take the # out of <div id="#alert">.
<div id="alert"> -> $('#alert')
<div class="alert"> -> $('.alert')