It could be because its late, but I've been at this for a good while now and still getting no further and running out of time.
Basically when I move the following code:
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
out from the function method and into the script it works fine, but if I put it within the button click function I get the following error:
Uncaught TypeError: undefined is not a function
I need it to work on button click, Here is the main code involved:
<script type="text/javascript" src="~/js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<div id="first">
<p>hello</p>
<input type="text" id="qr-text" value="" placeholder="Enter QR Data..."/>
<br />
<br />
<button id="button">Click on button</button>
</div>
<div id="qrcodeCanvas"></div>
<script>
$(document).ready(function () {
$('#button').click(function () {
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
});
});
</script>
UPDATE:
Here is the js file in question: http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/qr-code/
If you're trying to use the "un-minified" version, you need to load qrcode.js first. If you use the jquery.qrcode.min.js version, it packs the qrcode.js code into the same file.
So instead of
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
use
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
or
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
Related
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript" src="assets/js/jquery.placepicker.js"></script>
<script>
$(document).ready(function () {
$(".placepicker").placepicker();
}); // END document.ready
</script>
<input class="placepicker form-control" name="location" placeholder="location"/>
Please help me. It's not working properly.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&libraries=places"></script>
you have to provide api key only, then it will work fine.
test.html:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<div id="box">
</div>
</body>
</html>
and app.js:
require(["domReady"], function (dom_ready) {
dom_ready( function () {
document.getElementById('box').innerHTML = 'test';
});
});
I dropped the require.js and domReady.js files in the same directory:
https://raw.githubusercontent.com/requirejs/domReady/latest/domReady.js
http://requirejs.org/docs/release/2.1.11/minified/require.js
My browser does not display the "test" string in the webpage when I open it (tried with FF and chromium).
However, the "test" string is displayed if I add an empty tag:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<script type="text/javascript"></script>
<div id="box">
</div>
</body>
</html>
What did I miss ?
Close the script-tag properly.
<script type="text/javascript" data-main="app" src="require.js"></script>
I've set an onclick event unobtrusively to one of my buttons which is working fine in Firefox, Chrome, Safari and Opera. But in IE8 te script is never called (debugger statement is never executed).
The script:
$(function () {
$('#template-button').click(function () {
debugger;
var $templateDdl = $('#templateDdl');
var selTempID = $templateDdl.val();
var url = $templateDdl.data('url');
$.post(url, { selectedTemplateID: selTempID }, function (data) {
$('#template').html(data);
});
});
});
The button:
<input type="button" value="Verander template" id="template-button" />
The JQuery is in a seperate file called artsportaal.js which is loaded in the _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.loader.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/artsportaal.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
It is being loaded as almost the last script.
Is this a well known issue with a work around? Have I done something wrong? Thanks for your time and interest in my question.
This code works perfectly. As #ravisoni commented, I could have been because of name collision.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function () {
$('#my_button').click(function () {
alert('button got clicked!');
});
});
</script>
</head>
<body>
<input type="button" value="click_me" id="my_button" />
</body>
</html>
EDIT: I edit to comment to #devnull69 as to "debugging;". Statements with no side efects are accepted in JS, and therefore the script does not crash because of that "debugging;"
This is valid JS:
$(function () {
$('#my_button').click(function () {
'use strict';
'or better, do not use strict';
var x = 83;
x;
alert('button got clicked!');
});
});
Try it out: http://jsfiddle.net/SQgdK/1/
cannot run this code ... php textarea is showed but only one click and everything is disappear
Note:the page is positioning by anchors and words in "{}" are tags.
On оne page I am trying to put more than one ACEtextarea
(jQuery function is just a thought)
<div id="{id_area}" style="width:100%;height:165px; position:relative; background:#fff;" class="">
{text}
</div>
<input type="hidden" name="{name}" id="{id_area}-textarea"/>
<script src="{dir}/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/theme-crimson_editor.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/mode-php.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor_{id_area} = ace.edit("{id_area}");
editor_{id_area}.setTheme("ace/theme/crimson_editor");
var {id_area}_Mode = require("ace/mode/php").Mode;
editor_{id_area}.getSession().setMode(new {id_area}_Mode());
jQuery("#{id_area}-textarea").val(editor_{id_area}.getSession().getValue());
};
</script>
I have this code:
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
} );
</script>
</head>
<body>
<form onsubmit="return false">
<input type="button" value="Translate" onclick="gtrans(this.form)" />
<p id="translation" style="border:1px solid #00f;padding:5px;width:400px">-</p>
</form>
</body>
When I add inside ready(){} the line google.load ("language", "1"); the form is not showed, why?
Regards
Javi
The $(document).ready() function is executed before the window loads, as soon as the DOM is registered by the browser. So, as Dalen suggests, you should put your code outside the function.