Very simple code, for some reason nothing I try will work! I have obviously imported Jquery, jqueryUI, ajax, all the things I need imported (more than once!). But for some reason this button does not want to be clicked using Jquery! I got it to work with onClick, but I would like to be using jquery for this. SOS!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
function pie(){
//alert();
}
</script>
<body>
loading...
<input type="button" id="heyo" onclick="pie()" value="ff" />
</body>
Wrap you jquery code with $(document).ready(function() {}) to make sure all the DOM objects have been loaded before accessing them with jQuery:
$(document).ready(function() {
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
});
Related
I want to display the alert() after a new row is appended.
This is my code, but delegation is not working.
$(".tweet").each(function() {
alert("tweet alert");
});
$("button").click( function(){
$("#container").append("<div class='tweet'>tweet</div>");
});
$(document).delegate('click', function(){
$(this).addClass("tweet");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
Im using a basic jquery version 1.4
In my code, the alert doesnt display at all! what am doing wrong? thank you.
You can add the alert inside the click handler like so:
$("button").click(function() {
$("#container").append("<div class='tweet'>tweet</div>");
alert("tweet alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
Suppose to have an html page and when I click on one button I read:"
I need to handle when I click "ok"
that is html code:
<button data-bb-handler="confirm" type="button" class="btn btn-primary">OK</button>
That is my jquery code:
(function() {
$(document).on('click','button[data-bb-handler="confirm"][type="button"]',function(){
console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});
}());
It doesn't work. Anyone can help me? Some other method?
This piece of Jquery code should work:
$('button[data-bb-handler="confirm"][type="button"]').click(function(){
console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});
Let me know if it did not work. Check this Working Codepen
I am suggesting to use Bootbox JS. it is based on Bootstrap layout.
You can achieve that you need as mentioned below
bootbox.confirm("Are you sure?", function(result) {
// write your code what you need to handle on OK button
});
You may use the event show.bs.modal:
//
// On modal show
//
$(document).on('show.bs.modal', function (e) {
//
// attach the click event for OK button
//
$('button[data-bb-handler="cancel"][type="button"]').on('click', function (e) {
console.log("CANCEL BUTTON PRESSED");
});
//
// attach the click event for CANCEL button
//
$('button[data-bb-handler="confirm"][type="button"]').on('click', function (e) {
console.log("OK BUTTON PRESSED");
});
});
$(document).ready(function() {
$('#myBtn').on('click', function (e) {
bootbox.confirm("Are you sure you wish to discard this post?", function () {
});
}).trigger('click');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<button id="myBtn" type="button" class="btn btn-primary">Click Me</button>
This is the bootbox.confirm message. For deatils you may refer to Bootbox.js.
When you click on the ok or cancel the dialog dom element is removed from the document.
So you have to use the callback function:
$(document).on('click.bootbox', function(e, result){
console.log("Pressed "+ result);
});
bootbox.confirm("Are you sure you wish to discard this post?", function(result) {
$(document).trigger('click.bootbox', result);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
I am trying to make a div disappear with javascript. It just doesn't work. What am I doing wrong?
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
document.getElementById("des").style.visibility = "hidden";
</script>
<div id="des">
Text.
link
</div>
You are running the script before the DOM has loaded.
If you put the script after the div, it works
Try and throw a document ready around your code.
And if you are loading jquery you can just do $('#des').css('visibility', 'hidden'); or $('#des').hide()
<script type="text/javascript">
$(document).ready(function(){
$('#des').css('visibility', 'hidden');
});
</script>
You are trying to get the element with id = "des", before it's created.
<div id="des">
Text.
link
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
document.getElementById("des").style.visibility = "hidden";
</script>
This should work.
this worked for me when I placed the javascript code in a function and load it when the body loads e.g
<script>
function func(){
document.getElementById("der").style.visibility = "hidden";
}
</script>
<body onload=func()>
<div id="der">
test
</div>
</body>
You should wrap the script in a $(document).ready block because you are calling the script before the DOM is loaded.
So,You will have to do it like this
<script type="text/javascript">
$(document).ready(function() {
document.getElementById("des").style.visibility = "hidden";
});
</script>
It's:
document.getElementById("des").style.display = "none";
you can also use:
document.getElementById("des").style.display = "block";
to make it visible again.
That's my preferred method, at any rate.
You need to wait for the document to be ready. Try using:
$( document ).ready(function() {
document.getElementById("des").style.visibility = "hidden";
});
or you could use JQuery:
$(documet).ready(function() {
$( ".des" ).hide();
});
Why not to use JQuery hide() method, as you already using JQuery and obiviously code to be included either in $(document).ready(function(){\\some code}) or $(window).load(function(){\\some code});
$('#des').hide()
in JS, you can achieve by
document.getElementById("des").style.display = "none";
Javascript is an interepreter based language, in case you want to write script first and use later, add a function instead.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function hideMyDiv(){
document.getElementById("des").style.visibility = "hidden";
}
</script>
<div id="des">
Text.
link
</div>
<script type="text/javascript">
hideMyDiv();
</script>
Cheers !!
This is my page which contains both HTML and Javascript code. No matter how I set the initial value of the ID, it only works once. Which I find very strange!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta http-equiv="refresh" content="30" />-->
<title>Relay Trigger</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>
</head>
<body>
<div id="button">
<button id="off">OFF</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#on").click(function(){
document.getElementById("on").innerHTML="OFF";
document.getElementById("on").id="off";
alert(document.getElementById("button").innerHTML)
});
$("#off").click(function(){
document.getElementById("off").innerHTML="ON";
document.getElementById("off").id="on";
alert(document.getElementById("button").innerHTML)
});
})
</script>
</body>
</html>
When you use $("#on").click(function(){/*...*/}, there isn't any element with id on.
Then, that event handler isn't attached.
Moreover, when you use $("#off").click(function(){/*...*/}, you add the event handler to the element that, in that moment, has the id off. It doesn't matter if the id changes, the element is still the same and still has the same event handler.
To get the functionality you want, you can use event delegation to an ancestor with a filtering selector:
$("#button")
.on('click', '#on', function(){
document.getElementById("on").innerHTML="OFF";
document.getElementById("on").id="off";
alert(document.getElementById("button").innerHTML)
})
.on('click', '#off', function(){
document.getElementById("off").innerHTML="ON";
document.getElementById("off").id="on";
alert(document.getElementById("button").innerHTML)
});
Note this can be several times slower.
But a better alternative would be using id="myButton" data-state="off", and
$('#myButton').on('click', function() {
var state = $(this).data('state');
$(this).data('state', state==='on' ? 'off' : 'on');
state = state.toUpperCase();
$(this).html(state);
alert(state);
});
Try using a class instead, ID's should not be used like this.
The reason it happens is because when you registered the event handlers - the #on actually did nothing because there was no #on element in the document in that time
You have 2 options here:
set the handler only after you change the id:
<script type="text/javascript">
$(document).ready(function(){
$("#off").click(function(){
document.getElementById("off").innerHTML="ON";
document.getElementById("off").id="on";
alert(document.getElementById("button").innerHTML)
$("#on").click(function(){
document.getElementById("on").innerHTML="OFF";
document.getElementById("on").id="off";
alert(document.getElementById("button").innerHTML)
});
});
})
use "live" behavior:
the live function of jQuery is deprecated - but you can do it by doing:
instead of
$("#on").click(function);
write
$(document).on("click","#on",function);
You're missing a " in your script src.
All you need is
LIVE DEMO
$(function(){ // DOM ready
$("#on, #off").click(function(){
var io = this.io ^= 1; // Toggler used as 1/0 boolean
$(this).text(io?"ON":"OFF").prop('id', io?"on":"off");
});
});
So inside this simple click function if you need to do more stuff depending on the stored io object value you can do:
PLAYGROUND
if(io){
// do additional stuff if "on"
}else{
// do additional stuff if "off"
}
By default http://amsul.ca/pickadate.js/index.htm render the widget when the user click on the input.
I created an icon and I want, when the user click on it, to show the widget. I tried with:
$('#my-icon').on('click', function(){
$("input.dateFormat").pickadate();
$("input.dateFormat").click(); // Tried also with trigger
});
But the calendar does not show.
There is a way?
I don't think triggering a click (the accepted solution) is the right way of going about this. Using version 3 API of pickadate.js, the open/close options are outlined here: http://amsul.ca/pickadate.js/api.htm#method-open-close
The code would then be something like:
var $input = $('.datepicker').pickadate();
var picker = $input.data('pickadate');
$('.calendarIcon').click( function( e ) {
// stop the click from bubbling
e.stopPropagation();
// prevent the default click action
e.preventDefault();
// open the date picker
picker.open();
});
I don't really know this library either, but a quick look at their "api" page makes me think you're probably looking for something like this:
var picker = $("input.dateFormat").pickadate();
$("#my-icon").on('click', function() {
if(picker.get('open')) {
picker.close();
} else {
picker.open();
}
}
This worked for me:
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.date.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.time.css">
<script type="text/javascript">
$(window).load(function(){
$('#inputDatetime').pickadate({
//format: 'dd. mmmm yyyy',
format: 'dd-mm-yyyy',
formatSubmit: 'dd-mm-yyyy',
});
});
$(document).ready(function() {
$("#my-icon").click(function(){
$( '#inputDatetime' ).pickadate("open"),
event.stopPropagation(),
event.preventDefault()
});
});
</script></head>
<body>
<input
id="inputDatetime"
name=""
class=""
type="text"
placeholder="Try me…">
<img src='https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png' id="my-icon">
</body>
</html>
i don't realy know this lib.
You should try to keep your calandar init outside your handler, and then trigger a click in your input :
$("input.dateFormat").pickadate();
$(document).ready(function() {
$("#my-icon").click(function(){
$( '.input.dateFormat' ).trigger("click")
});
});