Dojo dijit.form.ValidationTextBox help - javascript

I try to use first time the Dojo toolkit and I'm facing an error.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/lib/dojo/dojo.js.uncompressed.js"></script>
<title>Insert title here</title>
</head>
<body>
<form enctype="application/x-www-form-urlencoded" action="" method="post">
<dl class="zend_form">
<dt id="teszt-label">
<label for="teszt" class="required">teszt:
</label>
</dt>
<dd id="teszt-element">
<input type="text" name="teszt" id="teszt" value=""
dojoType="dijit.form.ValidationTextBox"
regExp="\d{5}" required="true" invalidMessage="asd" />
</dd>
</dl>
</form>
<script type="text/javascript">// <![CDATA[
dojo.require("dijit.form.ValidationTextBox");
// ]]></script>
</body>
</html>
I got the script from the second example: http://www.dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html#dijit-form-validationtextbox
The script must validate the input with the given regular expression.
I see in firebug, that it loads all of the required components, but it doesn't work on the input field.
What's wrong?

<script type="text/javascript">
//<![CDATA[
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
// ]]>
</script>
This code solved the problem.

how about doing this instead?
<script type="text/javascript" src="/assets/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
isDebug: true is set if you want some debug messages appearing on browser's console.

regExp="\d{5}" to regExp: "[\\d]{5}"

Related

ng-disable a button if ng-pattern of input does not match

I want to disable a button with ng-disable if ng-pattern of an input field does not match the regular expression. In this case the regular expression is "[0-9]". I have tried the following code:
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" ng-app="Filter">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<div class="ctrl" ng-controller="Ctrl">
Text <input type="text" ng-model="input_field" ng-pattern="[0-9]"><br/>
<button ng-disabled="input_field.$valid">Start Filter</button>
</div>
</body>
</html>
Test.js
Module.controller('Ctrl', function($scope){
$scope.input_field = "Insert your Text here!";
}
Unfortunately it is not working. I have tried many ways but nothing worked. Do you have any ideas how to disable the button if the pattern do not match.
I think you should wrap it with <form> and fix the syntax: $error instead of $valid, [0-9] -> /^[0-9]/. Here is a demo, adjust it appropriately:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
Input: <input type="text" ng-model="input_field" name="input_field" ng-pattern="/^[0-9]/" placeholder="Insert a number"><br/>
<button ng-disabled="myForm.input_field.$error.pattern || !input_field">Start Filter</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {});
</script>
</body>
</html>

jQuery plugin is not working(depends-on)

<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>
<script>
$(document).ready(function) {
$('#basicTest .subject').dependsOn({
'#basicTest input[type="checkbox"]': {
checked: true
}
});
});
</script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="basicTest">
<label>
<input type="checkbox"> Check me
</label>
<input type="text" class="subject">
</form>
</body>
</html>
I am actually trying to implement the basic example which is after click on the "check me" a input box gets displayed. By using the depends on plugin is is not working. These are the files. I placed the script in between the html and head tags. Any suggestions are welcome!

jquery .load Function

I'm learning how to load and modify web content on client side without page load and postbacks.
I want to load the content of Controls/content.html into the div just like i saw on multiple exemples :
here's the div and button :
<input type="button" id="btnHtm" onclick="Content()" name="Menu" value="HtmAppear" />
<div id="htmlCont"></div>
here's the content :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h4> HELO </h4>
</body>
</html>
Here's the file path :
,
Edit : deleted other trys
Here's my fourth try :
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
<script language="javascript" type="text/javascript" >
$(document).ready(function content() {
$('#htmlCont').load("Controls/content.html");
});
</script>
Your selector need a #. Try this:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#htmlCont').load("Controls/content.html");
});
</script>

Why is JavaScript of the HTML from page2 loaded into page1 not working?

im trying to load html from page2 into page one but its JavaScript won't work, is this same origin policy? if it is how do i bypass this?
Page1:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisandthat').click(function() {
$("#hide").toggle('fast');
$("#cont").load('testpage2.html #res')
$("#unhide").toggle('fast');
console.log ()
});
});
</script>
</head>
<body>
<div id="">
<input id="thisandthat" name="test but" type="button" value="Button" />
<div id="hide" style="background-color:#050; width:100; height:100;">this and other things</div>
</div>
<div id="cont">
</div>
</body>
</html>
Page2
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisand').click(function() {
$("#unhide").toggle('fast');
alert ('im in')
});
});
</script>
</head>
<body>
<div id="res">
<input id="thisand" name="test but" type="button" value="Button" />
<div id="unhide" hidden="" style="background-color:#09F; width:100; height:100;">i apppear</div>
</div>
</body>
</html>
as you can see, javascript needed from page2 is present on page1. Please help.
The problem is that you're using the id selector in your $("#cont").load('testpage2.html #res')
jQuery will only load that section of page 2, therefore no Javascript is loaded. If you remove the id selector it will load the whole page including the Javascript.
$("#cont").load('testpage2.html')
Alternatively, you can place your Javascript within the res div, then that should work.
On a side note, you're missing various line ending semi colons in your code, which is not good.

Using MouseUp instead of AutoFocus as a solution for iPad or iPhone

Here is my script. I'm trying to get the one field to auto focus on all browsers, mobile borwsers, and iPad browser, but I cannot get it to work. Can someone help me please? This is what I'm trying: o
On http://boxoffice.jokerzcomedyclub.com/scanner/ , the object is to get the field to automatically start the cursor in it. It works on computers, but it doesn't work on iPad or iPhone, so I'm looking for other alternatives. Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validate Ticket</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="js/jquery.autofocus-min.js"></script>
<script>
$('.label').mouseup(function(){
$('[autofocus=""]').autofocus();
});
/*$('.label').mouseup(function(){ $('input').focus(); });*/
</script>
<script type="text/javascript">
/* window.onload = function() {
document.forms[0].barcode.focus();
}*/
</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<br />
<div style="width:200px; border:1px #999 solid; text-align:center;">
<form action="" method="get">
<select name="Events" class="listclass">
Did you try with
$(document).ready(function(){
$('.label').focus();
});

Categories