I want to perform some Jquery Event on clicking the Close sign on the alert Block of Jquery.
My VIew code is as below::
<div class=' alert alert-block fade in' >
<button type='button' class='close' data-dismiss='alert'>×</button>
<p>Just Close Me </p>
<div>
My Js code is as below::
$('button.close').click(function () {
var id = $(this).attr('data-id');
alert("deleted list is"+id);
});
As per the above code I am not able to detect or do Jquery events on clicking that 'X' button.
If you're using Bootstrap 3, you need to do this:
$('#my-alert').on('close.bs.alert', function () {
//code
});
I know this is quite old now but this is worth a look
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=alert-events
<script type="text/javascript">
$(document).ready(function(){
$("#myAlert").bind('closed.bs.alert', function(){
alert("Alert message box has been closed.");
});
});
</script>
<div id="myAlert" class="alert alert-info">
×
<strong>Note!</strong> Please read the comments carefully.
</div>
When you do a close, the dom element corresponding to the alert is removed from the Dom.
Try this instead:
<html>
<head>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<form id="myform">
<input type="submit" value="Submit">
</form>
<div id="messages" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="messages_content"></div>
</div>
<script>
$('#myform').submit(function(e) {
$('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
$('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');
$('#modal').modal('show');
e.preventDefault();
});
$('#messages').on('close.bs.alert', function (e) {
$('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideDown().show();
e.preventDefault();
});
</script>
</body>
This is how you bind the close event
$('#my-alert').bind('close', function () {
//do something…
})
PS. You should read the manual, everything is in it.
Related
I was trying to make a play-pause button using jQuery but the mouse click event is not being captured. I am trying to remove and add font-awesome class on each click such that it can change its icon.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mycarousel").carousel({interval: 2000});
console.log("document is ready");
$("#mycarousel").on("click", "#carouselButton", function(e) {
e.preventDefault(); //added after reading from one of the answers on stackoverflow
console.log("this is a click!");
if ($("#carouselButton").children("span").hasClass("fa-pause")) {
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass("fa-pause");
$("#carouselButton").children("span").addClass("fa-play");
}
else if($("#carouselButton").children("span").hasClass("fa-play")) {
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass("fa-play");
$("#carouselButton").children("span").addClass("fa-pause");
}
// return false;
});
});
</script>
</head>
<body>
<div id="mycarousel">
.......
<button type="button" id="carouselButton" class="btn btn-danger btn-sm" >
<span class="fa fa-pause"></span>
</button>
</div>
</body>
At the console I am only getting "document is ready" as output.
I also tried using $("#carouselButton").click(function() {...}); instead of $("#mycarousel").on("click", "#carouselButton", function() {...}); but the button didn't budged at all.
I tested it on edge and chrome after disabling caching on browser.
Any body has any suggestions how can I make this work or where am I going wrong?
I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
You can do it like this:
$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>
select the input tags in the form and track the change event:
$("form :input").on("change", function(){
var $elm = $(this); // the button which is clicked
// do your ajax here
});
I call a Colorbox page names enquiry.html 10 second after opening the base page IN enquiry.html page i added a close button but it does not work
have a look on my code
In Head of base page
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
In Body of base page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" async></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" async></script>
<script>
function openColorBox(){
$.colorbox({
iframe:true,
width:"90%",
height:"90%",
href: "enquiry.html",
onLoad: function() {
$('#cboxClose').remove();
setTimeout(function(){
$(window).colorbox.close();
}, 250000)
}
});
}
function countDown(){
seconds--
$("#seconds").text(seconds);
if (seconds === 0){
openColorBox();
clearInterval(i);
}
}
var seconds = 10,
i = setInterval(countDown, 1000);
</script>
in enquiry.html page
<input type="button" value="close" onclick=" $(window).colorbox.close()">
<form name="form1" method="post" action="">
<p class="close"> </p>
</form>
But on click on Close button it does not Close
Please Help
Thanks In Advance
you should try with $.colorbox.close() to close colorbox popup
refer this page for more details http://www.jacklmoore.com/colorbox/
I tried to use "ng-click" from angular into a html page and I managed. But if i try to use the same "ng-click" on the same function in a bootstrap modal code don't work anymore. Why. How to call mehod in the second case ?
This is my html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
Call from file<br/>
Call from a pop-up
</div>
<div class="modal fade" id="about" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head.</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="first()">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my script
var myApp = angular.module('myApp', []);
myApp.controller("MainController", function($scope){
$scope.val= 1
$scope.even= false
$scope.increment = function(){
$scope.val +=1
$scope.even = ($scope.val%2 == 0)?true:false;
//$scope.even = $scope.val%2 == 0
}
$scope.first = function(){
alert("work");
}
})
The reason is that when the modal shows up the processing of all angular directives is already over. Hence the ng-click attribute on the template of modal that is going to be appended to the DOM later on makes no difference.
Generally you would like the HTML to be compiled with a the correct scope.
If you don't want to get into details of this, use Angular UI for Bootstrap
This will give you nice directives and services for bootstrap widgets.
There is a $modal service that can be used just like the $http service which returns a promise.
Here also you can have callbacks for events when modal disappears or closes.
There is sample code in the example. Here is how a function that will bring up a modal would look like:
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.