I have a button which I have defined as follows (using semantic UI):
<button class="ui left floated submit button" id="csv-button">Copy</button>
<script>
$("#csv-button").click(getCSV);
</script>
Now at the end of my file, before closing the body tag, I have:
<script>
function getCSV() {
alert("Function called")
}
</script>
Now, on click I am getting:
Uncaught ReferenceError: getCSV is not defined
$(document).ready(function() {
$("#csv-button").click(getCSV);
})
function getCSV() {
alert("Function called")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="ui left floated submit button" id="csv-button">Copy</button>
Related
The submit button is working when the function is defined on the same page. But it's not working when the action of the submit button is defined in separate JS file.
<form method="post">
<div id="sjfb">
<div id="form-fields">
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.DisplayFor(model => model.controls);
#Html.DisplayFor(model => model.formEditor);
}
</div>
<button type="submit" id="submit" class="submit">Save Form</button>
</div>
</form>
// in separate .js File)
$("#sjfb submit").click(function () {
alert('Submit button is working');
}
I even tried the following methods:
1. document.getElementID('submit').onClick(function(){*some code*}
2. Giving a name to the function and calling it in onClick()
3. $(#sjfb #submit).click(function(){...})
4.$(#sjfb .submit).click(function(){...})
still not working. I can't find what is wrong with this.
You're missing the dot on submit class event handler.
$("#sjfb submit")
You should have:
$("#sjfb .submit")
The problem is in this snippet
$("#sjfb submit").click(function () {
alert('Submit button is working');
}
Just to make it clear you should change it as follows:
$(document).ready(function(){
$("#sjfb .submit").click(function () {
alert('Submit button is working');
});
});
Or as follows:
$(document).ready(function(){
$("#sjfb #submit").click(function () {
alert('Submit button is working');
});
});
since you've given class and id both as "submit" to your submit button. So you should add that to your js also.
Your entire code as tested on w3 is as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sjfb .submit").click(function () {
alert('Submit button is working');
});
});
</script>
</head>
<body>
<form method="post">
<div id="sjfb">
<div id="form-fields">
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.DisplayFor(model => model.controls);
#Html.DisplayFor(model => model.formEditor);
}
</div>
<button type="submit" id="submit" class="submit">Save Form</button>
</div>
</form>
</body>
</html>
if you load your javascript file before le dom content is loaded, then it can't bind the event on the button. try loading le js file a the end of the document, or you can add the event when the event $(window).on('load', fn) is fired
Replace your code with this
$(document).ready(function() {
$("form").submit(function () {
alert('Submit button is working');
});
});
Try with finding the element inside the div
$("#sjfb").find('button[type="submit"]').click(function (e){
console.log(this);
});
This code will find the button inside the id="sjfb" div and will call
the click function.
In Bootstrap v4 how do I show alerts through JavaScript? My goal is to have the alert hidden when the page loads then when a AJAX call completes turn the alert on to display a message.
I see in the documentation how close the alert but no where how to display it:
https://getbootstrap.com/docs/4.0/components/alerts/#methods
I have the following fiddle where I show the alert first (not what I want) then press a button to close it. A second button is there to turn it back on but no clue what to pass to it to make it work. I figure if I can make this sample work I can then figure out how to make it work with the alert not displayed on the page load
https://jsfiddle.net/jhf2e5h6/
<div class="row">
<div class="col-sm-12">
<div id="divInfo" class="alert alert-success show fade ">
<div class="alert-heading"> :</div> <p></p>
</div>
</div>
</div>
<button id="close">Close</button>
<button id="show">Show</button>
<script type="text/javascript">
$(function () {
$('#close').on('click', function () {
$('#divInfo').alert('close');
});
$('#Show').on('click', function () {
$('#divInfo').alert('?????');
});
//
});
</script>
Method .alert destroys the DOM. So no possibility to go back. Have a look to documentation :
https://getbootstrap.com/docs/4.0/components/alerts/#methods
You should try to use removeClass/addClass.
$('#close').on('click', function () {
$('#divInfo').removeClass('show');
});
$('#show').on('click', function () {
$('#divInfo').addClass('show');
});
And you have mistake on 'Show', you should try 'show'.
Bootstrap 4 has .d-none, which does display: none. This comes in handy if your alert contains a dismiss button.
So add .d-none to your .alert element (e.g. on page load), and do the following:
// Show the alert
$('.alert').removeClass('d-none').addClass('show');
// Hide the alert
$('.alert').addClass('d-none').removeClass('show');
close removes it from the DOM so it can't be re-shown.
You can instead toggle the invisible class...
https://www.codeply.com/go/mbshAxZQMH
$(function () {
$('#close').on('click', function () {
$('#divInfo').addClass('invisible');
});
$('#show').on('click', function () {
$('#divInfo').removeClass('invisible');
});
});
I prefer to dynamically create alert content
<div id="alert"></div>
<script type="text/javscript">
function showAlert(obj){
var html = '<div class="alert alert-' + obj.class + ' alert-dismissible" role="alert">'+
' <strong>' + obj.message + '</strong>'+
' <button class="close" type="button" data-dismiss="alert" aria-label="Close">'+
' <span aria-hidden="true">×</span>'+
' </button>'
' </div>';
$('#alert').append(html);
}
$('#Show').on('click', function () {
showAlert({message: 'Hello word!', class:"danger"});
});
I'm looking for the mootools equivalent of the jquery way. I need to link a button click on clicking another button
$('#myButton').click(function(){
// execute some function
});
Is this what you want?
<script type="text/javascript">
function callNewClick()
{
document.getElementById('btnTwo').click();
}
function helloUser()
{
alert('Hello!');
}
</script>
<button id="btnFirst" onclick="callNewClick();"> ClickFirst </button>
<button id="btnTwo" onclick="helloUser();"> Hello </button>
For example, in your code:
$('#myButton').click(function(){
document.getElementById('yourBtnTwoId').click();
});
I have a button like so:
<button data-id="1" onclick="showID()">Show ID</button>
And a function:
<script>
function showID() {
alert(($(this).data("id")));
}
</script>
I just want the data-id to be shown in the alert box. I've also tried
alert(($(this).data("id")));
But again nothing...
$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.
You need to do like this:
<button data-id="1" onclick="showID(this)">Show ID</button>
<script>
function showID(elem) {
alert(($(elem).data("id")));
}
</script>
Try this
function showID(button) {
alert($(button).attr('data-id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Currently this will not give you the right value, your code should be this way:
<button data-id="1" onclick="showID(this)">Show ID</button>
Then
<script>
function showID(e) {
alert(($(e).data("id")));
}
</script>
this doesn't work the way you are trying.
pass this on click.
Check out this fiddle.
Here is the snippet.
function showID(ele) {
alert(($(ele).attr("data-id")));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Here there is an example, you have to pass the id to function in the button tag:
JavaScript - onClick to get the ID of the clicked button
I am trying to make a start button, but whenever I test the program, it shows up but doesn't do anything.
This is what I have:
var startGame = function() { //when the start button is clicked, the game starts
$('#startButton').click(function() {
$('#main').hide();
playing = true;
});
}
$(document).ready(startGame()); //when the html loads, start the function
while (playing) {
//this is the main loop for the program
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="textHere">
<div id="main">
<h1>I am a computer.</h1>
<a class="button" id="startButton">START</a>
<!--this is the button-->
</div>
<script src="" https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ""></script>
</script>
<script src='I%20am%20a%20computer.js'></script> <!--where it gets the script-->
</body>
You're calling the startGame function instead of passing it to document.ready. It should be:
$(document).ready(startGame);
When you put parentheses after a function name, it calls it immediately. To use the function as a value, leave out the parentheses.