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>
Related
I am trying to add math formula in ckeditor, from editor should collect entire information(including formula) display on the same page in different div.
When I do with the following approach it is displaying math formula as text(not formatting as formula).
<html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script>
function onSubmit(){
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML=data
}
</script>
</head>
<body>
<form action="#" >
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()" >
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
} );
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
document.getElementById( 'ie8-warning' ).className = 'tip alert';
}
</script>
</body>
</html>
It is faster and easier to use Katex rather than Mathjax for math formula rendering in Html.
For reference(Comparison between katex and latex ) :
https://www.intmath.com/cg5/katex-mathjax-comparison.php
So the solution by using katex will be :
<!DOCTYPE html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH"
crossorigin="anonymous"></script>
<script>
function onSubmit() {
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML = data
domChanged();
}
</script>
</head>
<body>
<form action="#">
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()">
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
});
if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
document.getElementById('ie8-warning').className = 'tip alert';
}
function domChanged() {
renderMathInElement(document.body);
}
</script>
</body>
</html>
Good luck !!!
Any simple way to implement semantic-ui form validation with google recaptcha if the recaptcha field is checked or empty?
To expand on Arpit's answer:
Here's a non-Angular solution that worked for me
Custom validation rule above your fields validation:
$.fn.form.settings.rules.recaptchaValidate = function() {
return (recaptchaVerified);
};
Add this to your validation:
recaptcha: {
identifier: 'recaptcha',
rules: [
{
type: 'recaptchaValidate',
prompt: 'Please complete reCaptcha validation.'
}
]
}
and your HTML:
<div class="required field">
<div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div>
<input type="hidden" name="recaptcha" id="recaptch-validation">
</div>
[ ... then this just before closing body tag ... ]
<script type="text/javascript">
var recaptchaVerified = false;
var correctCaptcha = function(response) {
recaptchaVerified = true;
};
var expiredCaptcha = function() {
recaptchaVerified = false;
};
</script>
use below validation for Google reCaptcha validation.
Script:
$(document).ready(function () {
$('.ui.form').form({
recaptcha: {
identifier: 'g-recaptcha-response',
rules: [
{
type: 'empty',
prompt: 'Please complete reCaptcha validation.'
}
]
}
},
{
onSuccess: function (event, fields) {
console.log('Success:', fields);
return false;
//event.preventDefault();
},
onFailure: function (error) {
console.log('Failure',error);
return false;
}
});
});
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Self Registration Module</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 ->
<script src="../../Content/semantic/semantic.min.js"></script>
<link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" />
<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
</head>
<body ng-app="registrationApp">
<div class="ui container" lang="en"
<div class="ui attached message">
<div class="header">
Registation Form
</div>
<p>Fill out the form below to register user in rev</p>
</div>
<form class="ui form attached segment">
<div class="field">
<div vc-recaptcha
key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'"
ng-model="RecaptchaResponse">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
So, here's some background: I am working on a MEAN stack app for my school where we can read and post our Galaga and Dig Dig highscores to a mongo database.
I am getting an error:
POST http://url.com/api/scores 500 (Internal Server Error)
TypeError: Cannot read property 'userName' of undefined at /app/server.js:37:22
server.js:37 is:
app.post("/api/scores", function(req, res){
Score.create({
name:res.body.userName,
game:res.body.game,
points:res.body.userPoints
});
});
The index.html that the res.body.* is coming from is:
<!DOCTYPE html>
<html ng-app="nameOfApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="core.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<div class="jumbotron text-center">
<div class="container">
<h1>HelpDesk Gaming Leaderboard</h1>
</div>
</div>
<div class="container">
<table>
<tr>
<td><b>Name</b></td>
<td><b>Score</b></td>
</tr>
<tr ng-repeat="score in scores">
<td>{{score.name}}</td>
<td>{{score.points}}</td>
</tr>
</table>
</div>
<br/>
<h2>Score?</h2>
<form>
<input name="userName" type="String" class="form-control" id="userName" ng-model="formData.userName" placeholder="Your Name">
<input name="game" type="String" class="form-control" id="game" ng-model="formData.game" placeholder="The game?">
<input name="userPoint" type="Number" class="form-control" id="userPoint" ng-model="formData.userPoint" placeholder="Points?">
<button type="submit" class="btn btn-default" ng-click="createScore()">Submit</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script>
</body>
</html>
and the core.js, which is the angular piece is:
var nameOfApp= angular.module('nameOfApp', []);
nameOfApp.controller("mainController", ["$scope", "$http", function($scope, $http) {
$scope.formData = {};
// when landing on the page, get all scores and show them
$http.get('/api/scores')
.success(function(data) {
$scope.scores = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.createScore = function() {
$http.post('/api/scores', $scope.formData)
.success(function(data) {
$scope.formData = {};
$scope.scores = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
}]);
Thanks for your input, and if there are any stylistic things that I have wrong, I would love to hear them. I am trying to get better at MEAN stack development.
It's not res.body.* you want to use in your Score.create method, you want to be using req.body.*. 'req' is what has all the data from your http request.
Should be:
app.post("/api/scores", function(req, res){
Score.create({
name:req.body.userName,
game:req.body.game,
points:req.body.userPoints
});
});
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.
<script type="text/javascript">
$(document).ready(function ()
{
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true
}
});
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox("toDate", Model.toDate.ToString("dd/MM/yyyy"), new { #class = "date" })
</div>
The above is cshtml page.. I am clueless why the date that i click on the datepicker wont show up on the texbox/input .. Can you help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>WeeklyReport</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<link href="//Content/Site.css" rel="stylesheet" type="text/css" />
<script src="//Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.infieldlabel.min.js" type="text/javascript"></script>
</head>
<body>
</div>
<div class="content">
<div class="topSpacer">
</div>
<div class="maincontent">
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true,
highlightWeek: true,
showAnim: "scale",
firstDay: 6,
showOptions: {
origin: ["top", "left"]},
onSelect: function() {
}
});
});
$(function() {
$("#datepicker").datepicker();
});
</script>
<div>
Enter search criteria
</div>
<div style="float: left">
<p>Date: <input type="text" id="datepicker"/></p>
</div>
<div style="float: left; padding-left: 30px">
<input class="date" id="toDate" name="toDate" type="text" value="15/12/2011" /> 
EndDate
</div>
</div>
</div>
</body>
</html>
`
What is this mess? What are you asking? In your question you didn't show how your code look like so we can only be guessing here. Normally when you ask a question you should show precisely how your code looks.
So here's a guess I can make to improve your code with a working example:
View:
#model AppName.Models.SomeViewModel
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.date').datepicker({
showStatus: true,
highlightWeek: true,
showAnim: 'scale',
firstDay: 6,
showOptions: {
origin: [ 'top', 'left' ]
},
onSelect: function () {
}
});
$('#datepicker').datepicker();
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox(
"toDate",
Model.toDate.ToString("dd/MM/yyyy"),
new { #class = "date" }
)
</div>