I want to test a simple JavaScript function in ASP.NET.
Movies/Index.cshtml
<!-- My local JavaScript File -->
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
<input type="button" id="getPeople" value="Get People"/>
<ul id="people_list"/>
Views/Shared/_Layout.cshtml
<script src="~/Scripts/jquery-2.2.3.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
/Scripts/JavaScript.js
$(document).ready(function ()
{
});
$('#getPeople').click(function ()
{
alert("getPeople");
}
I press the button but no alert appears. Why?
The click handler of '#getPeople' should be inside $(document).ready
$(document).ready(function ()
{
$('#getPeople').click(function ()
{
alert("getPeople");
}
});
Make sure
to import jQuery first (before importing /Scripts/JavaScript.js)
to add click handler inside document's ready event.
Check the output of your composed page (for example Developer tools in the browser), if you are uncertain.
$(document).ready(function () {
$('#getPeople').click(function () {
alert("getPeople");
});
});
Related
Hope everybody is having a good day. I had this buton and code, which worked for me.
I also followed the jQuery documentation: https://api.jquery.com/click/
$(function () {
$("#btnName").click(function () {
console.log("test");
});
}
I then upgraded webpack and JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
If anybody can help me out that would be awesome. Thanks in advance.
Edit: HTML for button:
<!-- NEW CONTACT BUTTON -->
<div class="new-contact-buttons">
<div class="btn-grouped">
<button type="button" class="btn btn-default btn-block bottom" id="btnRetrieveCallerMatches" disabled style="display:none;">Retrieve
caller matches</button>
<button type="button" class="btn btn-default btn-block bottom" id="btnNewContactForm" disabled style="display:none;">New
contact</button>
</div>
</div>
I am now trying this code, but unfortunately its still not working:
$(function () {
$("#btnNewContactForm").click(function () {
console.log("######## clicked new contact")
});
});
I re-enable the button when I need it using:
$("#btnNewContactForm").show();
$("#btnNewContactForm").removeAttr("disabled");
And the button shows up so that piece of code works.
I also checked if the top function is being executed and it is.
Try this :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<button id="btnName">click me</button>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("#btnName").on("click", function () {
console.log("test");
});
});
</script>
</html>
In each and every one of your examples you are forgetting to close your function, small syntax mistake, but the following code will work
$(function () {
$(document).ready(function() {
$("#btnName").click(function () {
console.log("test");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnName">Hi</button>
Just before the button code I had a sort method:
$(".phonebook table").tablesorter();
I think because the upgrade (webpack or jquery) this function stopped working and it wouldn't execute any code after this. So the code was fine all along but the binding code wasn't executing. Sorry for wasting everyones time.
When I put this code before the tablesorter everyting worked fine:
$("#btnNewContactForm").click(function () {
console.log("#######" + "saving new contact");
newContact();
});
$(function() {
$(document).on('click', "#btnName.app", function(e) {
e.preventDefault()
console.log("clicked");
});
});
you forgot to put ")" in the end of $(function(){...})
I'm very new to jQuery, but from what I've read, this doesn't make sense to me. Here is my code:
$(function() {
function grid() {
$("#main").hide();
}
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="numbers.js"></script>
</head>
<body>
<div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
<button onclick="grid()">grid</button>
</div>
</body>
</html>
When I put$(function(){...}); around my code, it never runs and the console returns ReferenceError: grid is not defined, but if I remove $(function(){...}); then everything runs fine.
The code within $(function() { }) has its own scope, so when you define a function within that, that function only exists within that scope. However, you have:
<button onclick="grid()">grid</button>
Which looks for a function called "grid" in the global scope (where it doesn't exist).
Ideally, if you are using jQuery, you would do something more like:
<button id="grid">grid</button>
$(function(){
$('#grid').on('click', function() {
$("#main").hide();
});
});
you can call a javascript function or define onClick listener of button inside $(document).ready
// using jquery
$(document).ready(function() {
$('#grid').click(function(){
$("#main").hide();
});
});
// using javascript function
function grid(){
document.getElementById('main').style.display = 'none';
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="numbers.js"></script>
</head>
<body>
<div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
<button id="grid">grid</button>
<button onclick="grid()">grid2</button>
</div>
</body>
</html>
Please guys is there a way i can make a value of the submit button to be loaded automatically from another page using the jquery .load function:
<input type="submit" id="submit" value="(JQUERY LOADED PAGE VALUE HERE)" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#submit').load('page.php')
}, 500);
});
<script>
Change it to a .get() and use the call back
$.get('page.php', function(data) { $('#submit').val(data); });
You can use normal ajax for this. .load() is supposed to load HTML content.
<input type="submit" id="submit" value="(JQUERY LOADED PAGE VALUE HERE)" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$.ajax({
url : 'page.php',
success : function(data){
$('#submit').val($.trim(data));
}
});
}, 500);
});
<script>
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>
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/