<!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>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<style type="text/css">
#book {
width:160px;
height:160px;
margin-top:15px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
var book = new book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>
I created a basic code but makeCode() doesn't seem to be invoked. I have added imported the book.js and jquery.min.js under "Scripts/jQuery/book.js". By keying a value in the input, makeCode will be invoked.
You need to ensure the DOM is ready or else elements may not be loaded into it yet.
$(function(){
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
I don't know what the book function does internally, but if this has any DOM references then this also needs to be called after the DOM is ready.
http://jsfiddle.net/6oxu38gt/
Javascript belongs at the bottom of the page before </body> and your jQuery commands should be inside a dom ready wrapper (though not strictly required when at the bottom of the page).
<!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>
<style type="text/css">
#book {
width:160px;
height:160px;
margin-top:15px;
border: 1px solid black;
}
</style>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
<!-- javascript at the end, and load jquery first -->
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript">
var book = new book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$(function(){
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
</script>
</body>
</html>
jQuery DOM must be ready.. Think of the document ready function as a self-executing function which fires after the page elements have loaded.
Place your javascript within document.ready code, as below...
$(document).ready(function() {
//do jQuery stuff when DOM is ready
});
So, for your example:
<script type="text/javascript">
$(document).ready(function() {
var book = new book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
</script>
Thanks all for the help!!!
The issues are:
1) ensure the DOM is ready
$(document).ready(function() {
//do jQuery stuff when DOM is ready
});
2) Changed the sequence of
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
The final result is
<!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>
<style type="text/css">
#book {
width:160px;
height:160px;
margin-top:15px;
}
</style>
<script type="text/javascript" src="~/Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery/book.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var book = new Book("book");
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
</script>
</head>
<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>
Related
I am in process of learning.I wanted to try an qrcode generator project.The project works fine.I have two small doubts.Can someone suggest me anything,It would be very helpful.Thank you guys.
1.How can I save my generated QR code image ?
2.How to set a limit for data entry ? (i mean to set a limit for the value to be entered in the code)
<!DOCTYPE html>
<html lang="en">
<head>
<title>QRCode generator </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="string" value={"foo":"35"}; style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:20px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 150,
height: 150,
colorDark: "#1b1076",
colorLight: "#ffffff",
});
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text,#color").
on("blur", function() {
makeCode();
}).
on("keydown", function(e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</body>
How can i append the data from textarea to a div by pressing enter key using anglurjs. in this code i am appending the data on alertbox but i want to append the data on particular section(div) as like in chat apps
HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<input ng-enter="DoWork()" ng-model="MyText" />
<div id="chatContent" ng-model="chatData"></div>
</div>
</div>
app.js
var $scope;
var app = angular.module('miniapp', []).filter('moment', function() {
return function(dateString, format) {
return moment(dateString).format(format);
};
});
app.directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
function Ctrl($scope) {
$scope.DoWork = function(){
alert('Hello World! ' + $scope.MyText);
$scope.chatData = $scope.$scope.MyText;
};
}
Check This Example.This example is on jquery.you can take help and use same login in your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function abc(){
var a=$("#mytext").val();
$("#mydiv").append(a);
}
</script>
</head>
<body>
<textarea id="mytext" rows="" cols=""></textarea>
<button onclick="abc()">Submit</button>
<div id="mydiv"></div>
</body>
</html>
I have two ASP pages. One head.master which has some contents as well as contents which are retrieved from the Default.aspx page. Because I can get script URL from the head.master page, I have it setup there along with the HTML/JQuery contents like this:
<!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 id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
... //other contents here
<asp:ContentPlaceHolder id="ContentPlaceHolderSearch" runat="server">
<!-- Search stuff goes here -->
</asp:ContentPlaceHolder>
... //other contents here
</form>
</body>
</html>
In my Default.aspx page I have the contents like this:
<%# Page Language="VB" MasterPageFile="head.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" title="WESTMED Medical Group - Top Doctors in New York" %>
<%# Register Assembly="Ektron.Cms.Controls" Namespace="Ektron.Cms.Controls" TagPrefix="CMS" %>
<%# OutputCache Duration="900" VaryByParam="none" %>
<asp:Content ID="topContent" ContentPlaceHolderID="topContent" Runat="Server">
... //other stuff goes here
</asp:Content>
<asp:Content ID="ContentPlaceHolderSearch" ContentPlaceHolderID="ContentPlaceHolderSearch" Runat="Server">
<input style="background: url(images/find.png) no-repeat; padding-left: 20px;" type="text" id="TextBox1" />
<input id="Button1" type="button" value="Search" class="locButton" />
<script type = "text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var textbox = document.getElementById("TextBox1").value;
if (textbox.length > 0) {
//alert("Search query is not empty and redirecting...");
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
alert("Search query is empty");
}
});
$('#TextBox1').keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^a-zA-Z0-9]/g, ''));
});
$('#TextBox1').keypress(function (e) {
var textbox = document.getElementById("TextBox1").value;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
if (textbox.length > 0) {
e.preventDefault();
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
e.preventDefault();
alert("Search query is empty");
}
}
});
});
</script>
</asp:Content>
Looking at the output HTML source of the page I see the following:
<!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 id="ctl00_Head1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<form method="post" action="/" id="aspnetForm">
... //other contents goes here
<input style="background: url(images/find.png) no-repeat; padding-left: 20px;" type="text" id="TextBox1" />
<input id="Button1" type="button" value="Search" class="locButton" />
<script type = "text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var textbox = document.getElementById("TextBox1").value;
if (textbox.length > 0) {
//alert("Search query is not empty and redirecting...");
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
alert("Search query is empty");
}
});
$('#TextBox1').keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^a-zA-Z0-9]/g, ''));
});
$('#TextBox1').keypress(function (e) {
var textbox = document.getElementById("TextBox1").value;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
if (textbox.length > 0) {
e.preventDefault();
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
e.preventDefault();
alert("Search query is empty");
}
}
});
});
</script>
... //other contents goes here
</form>
</body>
</html>
But when I press the button nothing happens. I press the enter key nothing happens. I can enter special characters and it doesn't do the validation. I looked at other ASPX questions and I am thinking the script does not load before the contents. Please help me resolve this issue.
Console screenshot:
Answer for everyone else's benefit:
As you have found, in our chat, your CMS is already using jQuery under another alias.
The link you found was:
https://stackoverflow.com/questions/13438464/joomla-2-5-jquery-cannot-call-method-of-null
But if another jQuery is already in your CMS you will want to use that version instead.
Never assume anything when dealing with someone else's code. Use something like Fiddler2 to view what your browser is pulling down.
I am working on a clipboard functionality...
I am facing mouse-events issues... In below code, when I remove label tag and style="display:none" class="hide" , my clipboard functionality is working, but clipboard functionality is not working..
Please kindly check below code: what changes I need to make so that it works perfectly?
<!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>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
<link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
function myfunc2() {
var selectedobj=document.getElementById('texter');
if(selectedobj.className=='hide'){ //check if classname is hide
selectedobj.style.display = "block";
selectedobj.readOnly=true;
selectedobj.className ='show';
}else{
selectedobj.style.display = "none";
selectedobj.className ='hide';
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
var clip = new ZeroClipboard.Client();
clip.setText('');
jQuery('#copy-button').click(function(){
clip.setText(jQuery('#texter').val());
});
});
$(document).ready(function () {
var clip = new ZeroClipboard.Client();
clip.setText(''); // will be set later on mouseDown
clip.addEventListener('mouseDown', function (client) {
// set text to copy here
clip.setText(jQuery('#texter').val());
// alert("mouse down");
});
clip.glue('copy-button');
});
</script>
</head>
<body>
<label onmouseover="myfunc2()">Click here</label>
<textarea name="texter" id="texter" style="display:none" class="hide" readonly>sdfdsfsdfgdfdfg</textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />
</body>
</html>
I'm following the indications on the post:
jQuery fadeIn() different intervals with multiple div's
but i just cant get it to work.. what is wrong
<!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>Untitled Document</title>
<script type="text/javascript">
$('.fadeIn').each(function(){
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function(){
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
}
);
</script>
<style>
.fadeIn{
display: none;
}
</style>
</head>
<body>
<div class="fadeIn">Test 1</div>
<div class="fadeIn">Test 2</div>
<div class="fadeIn">Test 3</div>
<div class="fadeIn">Test 4</div>
<div class="fadeIn">Test 5</div>
<div class="fadeIn">Test 6</div>
</body>
</html>
demo in action
You have to import the jQuery library!
Add it Before your <script>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
it should look like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function($){ // remap the '$' character to jQuery
$('.fadeIn').each(function(){
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function(){
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
)};
})(jQuery);
</script>
Or use the $(document).ready(function(){ /*your code here*/ }); !
1) You need to include the jquery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
2) You need to wrap your code in a $(function() or jQuery(function($)
jQuery(function($) {
$('.fadeIn').each(function(){
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function(){
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
}
);
});
You need to do the update your code :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.fadeIn').each(function () {
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function () {
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random() * 1500));
}, Math.floor(Math.random() * 1500));
});
})
</script>
The
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
adds the jQuery library to your page - this enables you to use the jQuery functions. And you need to wrap your code in the
$(function() {
});
block so that it doesnt execute until the DOM is ready .. See the docs here
Firstly here is the fiddle with your code working.
All you didn't do was import the jquery library in your head element.