I want to dynamically change the language of the DateTimePicker jQuery Plug-in (http://xdsoft.net/jqplugins/datetimepicker/) and I'm getting an "undefined" error for the lang1 inside the last plug-in call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Datatimepicker</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
</head>
<body>
<input id="datetimepicker" type="text" placeholder="Datetimerpicker">
<input id="lang" type="text" placeholder="language" value="en"><div class="select">select language</div>
<script>
var lang1;
$(".select").click(function(){
lang = $('#lang').val();
lang1 = '"'+lang+'"';
return lang1
});
$(".select").click(function(){
console.log(lang1);
$('#datetimepicker').datetimepicker({
lang: lang1
})
});
</script>
</body>
</html>
Shouldn't this work?
You defined two click handlers which you expect to somewhat magically exchange the lang1 variable.
Probably you intended this:
$(".select").click(function(){
var lang = $('#lang').val(); // 1
console.log(lang); // 2
$('#datetimepicker').datetimepicker({ lang: lang }); // 3
});
Get the current lang value from input field #lang
Log it to the console
Initialize the datepicker to use the language lang.
Related
I have some confusion. I need to sure that is jQuery's append method` create the DOM-based XSS attack. I am providing my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<select class="form-control" id="cmbEnrollProcess" name="cmbEnrollProcess"></select>
<button type="button" id="btn" onclick="xssecho();">Add</button>
<script type="text/javascript">
function xssecho(){
var options = "<option value=''>Select Enrollment Process</option>";
console.log('option',options);
$('#cmbEnrollProcess').html("");
$('#cmbEnrollProcess').append(options);
}
</script>
</body>
</html>
Here I am adding the option value dynamically using jQuery's append method. I need to find out whether this method create the DOM based XSS attack or not ?
Not sure what you are asking... but adding element with strings can open up for attacks... Example:
var value = "'><script>console.log(`dang`)</sc"+"ript><option>"
var options = "<option value='"+value+"'>Select Enrollment Process</option>";
$('select').append(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
one way to be safe is creating the value like this with jQuery:
var options = $('<option>', {
text: 'Select Enrollment Process',
value: 'few'
})
$('select').append(options)
new to AngularJS here, just started a new application, but it seems I'm missing something important in regards to controllers.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arsenal Roster</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="arsenalApp" ng-controller="ArsenalController">
<input ng-model="name">
<span>{{age}}</span>
</div>
<script>
var arsenalApp=angular.module('arsenalApp',[]);
arsenalApp.controller('ArsenalController',function($scope){
if($scope.name=="jon"){
$scope.age=12;
}else{
$scope.age=1;
}
});
</script>
</body>
</html>
The functionality I want is: if I input 'jon' in the textbox, the output in the browser should change to 12, otherwise, for any other text, it should remain as 1.
As of now it just outputs 1 and doesn't change on entering 'jon'. What am I missing about controllers?
<input ng-model="name" ng-change="onNameChange()">
$scope.onNameChange = function () {
if ($scope.name=="jon") {
$scope.age=12;
} else {
$scope.age=1;
}
}
You need to listen to the change event whenever the name is being changed and the change function should handle your conditions.
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
I am trying to overwrite the date validation within my code so i can validate the date as DD/MM/YYYY. Below is my code and i'm being shown an error message reading :
Unable to get property 'methods' of undefined or null reference
Can some please help? Im guessing the overwrite of validation code is incorrect.
var validator = $("#searchStartDate").kendoValidator();
var validator = $("#searchStartDate").kendoValidator().data("kendoValidator");
$.validator.methods.date = function (value, element) {
return this.optional(element) || $.kendoDatePicker.parseDate('dd/mm/yy', value);
}
//Picker Start Date
$(document).ready(function () {
$("#searchStartDate").kendoDatePicker({ format: "dd/MM/yyyy", culture: "en-GB" });
});
See: http://dojo.telerik.com/OWUvU
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<form id="myform">
<input name="myDate" class="validateDate" id="searchStartDate" /> <br />
<button>Validate</button>
</form>
<script>
$("#myform").kendoValidator({
rules: {
dateValidation: function(input) {
//only validate
if (input.hasClass('validateDate')) {
return kendo.parseDate(input.val(), "dd/MM/yyyy");
}
}
},
messages: {
dateValidation: "Please enter a date in the format dd/mm/yyyy"
}
});
$("#searchStartDate").kendoDatePicker({ format: "dd/MM/yyyy", culture: "en-GB" })
</script>
</body>
</html>
The code above adds custom validation in the format you requested.
You were using a combination of custom jquery validation script and kendo validation.
You need to use the full kendo validation methods, see - http://docs.telerik.com/kendo-ui/api/javascript/ui/validator for the full api.
Please have a look on code written below. I am trying to have a multiple timer on one page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
My code works fine when I create Divs Hardcoded. But when I load it through Ajax (For understanding of code, for the time being I am creating Divs using Function LoadText()), I am not able to get it displayed. Please help me out.
For one, you have this:
div.#defaultCountdown
which should be:
div#defaultCountdown
I don't see you calling your LoadText function anywhere
ID's are required to be unique within a document, and your LoadText function does not respect that rule
Unrelated, but you don't need to escape those double quotes inside of your single quoted string in LoadText
You should be using a class or unique IDs for the #defaultCountdown div.
Also this would confuse the selector engine since you are telling it to look for a class with a # sign in it:
$('div.#defaultCountdown').each(function()
Try changing it to a class and use:
$('div.defaultCountdown').each(function()
Update: Ok, the reason why your code isn't working is because the LoadText() function is never called. If you update your script to look like this, it will work (demo):
$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});
sounds like a timing issue. your jQuery code runs when the data is rendered to the page not after your ajax query completes. Make that a function rather than something to run on ready and call it after the ajax finishes.
Your $('div.#defaultCountdown').each(function() loop runs once when the document is ready - if you subsequently add new divs using Ajax then you need to make sure you re-run your $('div.#defaultCountdown').each(function() code again now that new divs have been added.
The jQuery live() function is good for this.
The working Code if I am not using Ajax Response Text or JavaScript innerHTML. Any solution in this direction will be appriciated. Please find below the modified code that is working. In this code I have created the divs hardcoded. Both the codes can be tested by copying this codes and saving it to html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
**//function LoadText()
// {
// document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
// }**
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.countdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>