Have a basic link that I am using as a button and changing the text when the user clicks it to go from edit to done editing. When I first click the button, the click event happens but the text does not change until I click it again which is throwing off and not behaving as I would like:
HTML:
<a type="button" id="editButton" class="editButton" style="cursor: pointer">EDIT</a>
JS:
$("#editButton").click(function () {
var $this = $(this);
$this.toggleClass('editButt');
if ($this.hasClass('editButt')) {
$this.text('EDIT');
} else {
$this.text('DONE EDITING');
}
});
Fiddle
You toggle a class that is not present at first click, so it mean it will add it and then run your condition.
Add the class and problem solved
<a type="button" id="editButton" class="editButton editButt" style="cursor: pointer">EDIT</a>
http://jsfiddle.net/U8Ns3/4/
Try this out, and see fiddle
$("#editButton").click(function () {
var $this = $(this);
if ($this.hasClass('editButt')) {
$this.text('EDIT');
} else {
$this.text('DONE EDITING');
}
$this.toggleClass('editButt');
});
Simpler solution, here's a FIDDLE
<button type="button" id="editButton" class="edit">EDIT</button>
$('#editButton').click(function() {
var text = ($(this).text() === 'EDIT') ? 'DONE EDITING' : 'EDIT';
$(this).text(text).toggleClass('done');
});
Related
I want to add an onclick in and a button tag over jquery
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
<img id="loadingImage" src="preoader.gif" style="visibility:hidden">
I need it for this script
<script type="text/javascript">
function openImage(){
if ( document.getElementById('loadingImage').style.visibility == 'visible' )
{
document.getElementById('loadingImage').style.visibility='hidden';
} else {
document.getElementById('loadingImage').style.visibility='visible';
}}
</script>
you can add events like this:
$('#buttonid').on("click", function(){
//do something here like calling openImage();
});
you only need to give your button a unique id like this :
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0" id="buttonid"></button>
EDIT:
if you can not edit the button tag then you may need a different selector.
You can try to get a parent attribute to fetch the right child like this :
$('.parentclass button').on("click", function(){
//do something here like calling openImage();
});
or something like this
$('.parentclass div button').on("click", function(){
//do something here like calling openImage();
});
EDIT SOLUTION:
$(".mejs-play button").on("click", function(){
openImage();
});
You can use this code :)
$(document).ready(function(){
$("#btn").on("click", function(){
var img = $("#loadingImage");
if(img.is(":visible")) {
img.css({"display" : "none"})
} else {
img.css({"display" : "block"})
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btn">Click Here</button>
<img id="loadingImage" src="https://b-digital.info/wp-content/uploads/2018/09/preoader.gif">
If you can't change the html code, you can try using some of the attribute value for the selection part of the jQuery, like in next example:
$("button[title='Play']").click(function()
{
// Just for debugging on the console.
console.log("Click detected on PLAY button");
// Call the openImage() method.
openImage();
});
Your mistake here is trying to mix native js with JQuery.
When you select an item with lets say let item = document.getWhatever then you cant
use Jquery functions on this item so you have to select it from the beginning on with JQuery's method let item = $(#myItem).
Afterwards you can use Jquery functionallity to add an onclick event.
Either by setting the onclick as attribute like this:
item.attr('onclick', 'doStuff()');
or by using the .click() like so:
item.click(function() {
doStuff
});
based on your example you can add:
onClick="openImage();"
event handler on your button:
<button type="button" onClick="openImage();" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
Try it on codepen.
I'm basically creating a filter button.
If I press button1 {this will happen}
If press button2 {this will happen}
but if I press button1 and then button2 {this has to happen}
This is the code I have so far. Thanks!
$(document).ready(function() {
if($('#button1').click(function() && $('#button2').click(function()){
//perform actions
});
Here is the logic
button 1 handler {
set var to indicate click
do what you need
}
button 2 handler {
check var to see if button 1 is clicked
do whatever you need based on the var check
}
This only handles button 1 click followed by 2, but you get the idea and should be able to figure out if button 2 is clicked then 1
Try this using the data-attribute
$('#button1').click(function(){
alert('button one clicked');
$(this).data('lastClicked',true);
});
$('#button2').click(function(){
if(!!$('#button1').data('lastClicked')){
alert('Button 1 then button 2')
}else{
alert('button two clicked');
}
});
$("body > *").not("#button1").click(function(){
$('#button1').data('lastClicked',false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Button 1 </button>
<button id="button2"> Button 2</button>
<button id="button3"> Button 3</button>
As you would notice if there is any click that is not on #button1 then the next click will not be considered as button1 --> button2
$(document).ready(function() {
$('#button1').click(function(){
//perform regular button1 actions
var btn1clicked=true;
});
$('#button2').click(function(){
//perform regular button2 actions
if(btn1clicked){
//perform button2 clicked after button1 was clicked action
}
});
});
You need to set a variable after the first button is clicked. Then when the second button is clicked, you check if the variable is set and if it is, you perform the special action.
You could save the data about the clicking state using jQuery .data(), then use it in other handlers. Something like this:
$('.js-button-1').on('click', function() {
$(this).data('clicked', true);
$('.js-result').text('Button 1 is clicked');
});
$('.js-button-2').on('click', function() {
if ($('.js-button-1').data('clicked')) {
$('.js-result').text('Button 1 + Button 2 are clicked');
} else {
$('.js-result').text('Button 2 is clicked');
}
});
$('.js-button-clear').on('click', function() {
$('.js-button-1').data('clicked', false);
$('.js-result').text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="js-button-1">Button 1</button>
<button class="js-button-2">Button 2</button>
<button class="js-button-clear">Clear</button>
<div>
<span>Result: </span>
<span class="js-result"></span>
</div>
When I try to execute some JS, by clicking a button, it doesn't do what I want it to. However, when I fire up the JS console and execute it manually it works.
Here is my entire JS file (included just in case there is a conflict):
var ready;
ready = function() {
// This is the Sidebar toggle functionality that I am most interested in
var toggleSidebar = $("#togglesidebar");
var primary = $("#primary");
var secondary = $("#secondary");
toggleSidebar.on("click", function(){
if(primary.hasClass("col-xs-9")){
primary.removeClass("col-xs-9");
primary.addClass("col-xs-12");
secondary.css('display', 'none');
}
else {
primary.removeClass("col-xs-12");
primary.addClass("col-xs-9");
secondary.css('display', 'inline-block');
}
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
counter = function() {
var body_value = $('#post_body').val();
var title_value = $('#post_title').val();
if (body_value.length == 0) {
$('#wordCountBody').html(0);
$('#totalCharsBody').html(0);
return;
}
if (title_value.length == 0) {
$('#wordCountTitle').html(0);
return;
}
var regex = /\s+/gi;
var wordCountBody = body_value.trim().replace(regex, ' ').split(' ').length;
var totalCharsBody = body_value.length;
var wordCountTitle = title_value.trim().replace(regex, ' ').split(' ').length;
$('#wordCountBody').html(wordCountBody);
$('#totalCharsBody').html(totalCharsBody);
$('#wordCountTitle').html(wordCountTitle);
};
$(document).ready(function () {
$('#count').click(counter);
$('#post_body, #post_title').on('change keydown keypress keyup blur focus', counter);
$('body').tooltip({ selector: "[data-toggle~='tooltip']"});
});
Here is the HTML being triggered:
<div class="hidden-xs col-sm-3 masthead-group-3 pull-left">
<div id="togglesidebar" class="pull-right">
<button class="btn btn-default btn-lg btn-primary"><i class="fa fa-child"></i> Submit News</button>
</div>
</div>
Yet, when I go to my console and do this it works perfectly:
$("#togglesidebar");
[<div id="togglesidebar" class="pull-right">…</div>]
$("#togglesidebar").click();
[<div id="togglesidebar" class="pull-right">…</div>]
You can see it live here.
You have two buttons with the same id.
jQuery # selector find only the first match of that id, so the first button that is hidden.
Delete it or change it's name and it should works ;-)
Edit:
You can also change them to a .className rather than an id and all the respective references to classes and it should work.
I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?
Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO
here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});
I have a button currently available with an id :
<input type="button" id="show_button" value="Show" />
What I want is that..onclicking the button , the value of the button will be changed to "Hide" and it's id will be changed to "hide_button".. And on clicking the hide button it's value will be changed to "Show" and it's id will change to "show_button"..How can I achieve that?
i don't know why you want to change the id since we can get what you want without changing the ids..
try this
$('#show_button').click(function(){
var $this=$(this);
$this.val(($this.val()=="Show")?"Hide":"Show");
});
this is better since you don't have to use two click event handler for both the ids..
and if incase you need to change the ids.. then use on event delegation ..
$(document).on('click','#show_button',function(){
var $this=$(this);
$this.prop('id','hide_button');
$this.val("Hide"); //OR $this.val("Hide") //if you are using input type="button"
});
$(document).on('click','#hide_button',function(){
var $this=$(this);
$this.prop('id','show_button');
$this.val("Show"); //OR $this.val("Hide") //if you are using input type="button"
});
fiddle here
You can change value using
$('#show_button').val('hide');
You can change id using
$('#show_button').attr('id','hide_button');
$('body').on('click', '#show_button, #hide_button', function() {
var $this = $(this),
isShow = $this.attr('id') == 'show_button';
if (isShow) {
$this.attr('id', 'hide_button').val('Hide');
}
else {
$this.attr('id', 'show_button').val('Show');
}
});
jsFiddle: http://jsfiddle.net/sW49u/
Working example: http://jsfiddle.net/TjaBR/
$('body').on('click', '#process', function() {
$(this).toggleClass('hidden');
$(this).val($(this).hasClass('hidden') ? 'Hide' : 'Show');
});
Using Jquery Javascript library:
$('body').on('click', '#show_button', function() {
$(this).attr('id', 'hide_button').val('Hide');
});
$('body').on('click', '#hide_button', function() {
$(this).attr('id', 'show_button').val('Show');
});
One solution for your question is have 2 inputs, that you toggle between. I don't like changing/renaming id's principle.
Check this demo.
html
<input type="button" id="show_button" value="Show" />
<input type="button" id="hide_button" value="Hide" style="display:none;" />
jQuery
$('input').click(
function(){
$('input').toggle();
});