When a user empties the cart it removes all items and the page reloads. The page will reload in order to reset the buttons that are activated (all buttons with .button class will reset to there original state) There should be a way to reset the buttons without needing to reload the page. Instead of the function preforming location.reload is there a function that can reset all flags to "99cents.png"
<script>
$(".button").on('click', function(){
var flag = $(this).data('flag');
simpleCart.add({
name : $(this).attr("data-product-id"),
price : .99,
quantity : (flag ? -1 : 1)
});
$(this).attr("src", flag ? "99cents.png" : "m99cents.png");
$(this).data('flag', !flag);
});
function reloadFunction() {
location.reload();
}
</script>
Store the original state in a data also. When reloadFunction is called, you can retrieve the state from this property and replace the source attribute.
In the html:
<img class="button" src="originalsrc.png" />
In the javascript:
$(function(){
$(".button").each(function(i,el)
{
var el = $(this);
el.data('flag-original', el.attr('src'));
});
});
function reloadFunction() {
$(".button").each(function()
{
var el = $(this);
el.text(el.data('flag-original'));
});
}
After some research on jquery I discovered there was a method I could use called .removeData(); with this I was able to achieve the desired task by adding a class called ".empty" to the empty cart button. Here is what I came up with that works:
$(".empty").on('click', function(){
$(".button").attr("src", "99cents.png");
$(".button").removeData();
});
.removeData() was able to clear out everything without needing to refresh the page!
Thank you!
Related
I am facing one issue, I want to disable anchor click after one click. I have
on-click attribute set in my anchor tag. Below is my HTML
<a style="cursor:pointer;" id="someId" onclick="Myfuntion()">Verify</a>
After I click "Verify" I am changing anchors text to "Verifying..." and one more thing I am trying to disable this anchor to avoid click in between the verification logic going on.
I have tried event.preventdefault() and also added disabled attribute to anchor.
But nothing works.
Please help!
If you were using jQuery for this you could have done this more easly.
Here we add a new class to a link to show that it has been clicked already. We check this when a click is made.
<a style="cursor:pointer;" id="someId">Verify</a>
$('#someId').on('click',function(){
//Check if button has class 'disabled' and then do your function.
if(! $(this).hasClass('disabled')){
$(this).addClass('disabled');
Myfuntion();
$(this).removeClass('disabled');
}
});
Here is a demo as to how it could be done using Javascript.
//Pass the event target to the function
function Myfuntion(elem) {
//If the element has no "data-status" attribute
if (!elem.getAttribute("data-status")) {
//Set attribute "data-status=progress"
elem.setAttribute("data-status", "progress");
//Change the text of the element
elem.textContent = "Verifying...";
//The setTimeout(s) below is only for the demp purpose
//Lets say, your verification process takes 4 seconds
//When complte
setTimeout(function() {
//Remove the attribute "data-status"
elem.removeAttribute("data-status");
//Notify the use that verification is done
elem.textContent = "Verified";
//Again, this is only for demo purpose
setTimeout(function() {
//User may verify again
elem.textContent = "Verify";
}, 1000);
}, 4000);
}
return false;
}
Link to the demo
There are plenty of ways to do this; one simple approach is to just redefine the function itself:
var myFunction = function() {
alert('clicked');
// do whatever your function needs to do on first click, then:
myFunction = function() { // redefine it
// to no-op, or to another action
alert('second click');
}
}
<a onclick="myFunction()">click me</a>
I want to pass the value of the limit in Jquery at the touch of a button. I almost found a solution, but can not quite understand. How to set the value to "limit:" the default and change it by pressing the button.
HTML
<button id="pagelimit default">1</button>
<button id="pagelimit">2</button>
<button id="pagelimit">3</button>
</div>
JS
function displayVals() {
var pagelim = $( "#pagelimit" ).val();
};
$('#product-grid').mixItUp({
pagination: {
limit: $pagelim // insert button value
}
});
Please help me solve this problem.
ID of an element must be unique... It looks like you want to update the limit option with the clicked button's text so
<button class="pagelimit default">1</button>
<button class="pagelimit">2</button>
<button class="pagelimit">3</button>
then
//this method is not used in the below code as we don't know which button was clicked here... if you share how the `displayVals` method is called then we can try to make this work
function displayVals() {
var pagelim = $("#pagelimit").val();
};
jQuery(function ($) {
$('.pagelimit').click(function () {
//update the limit option
$('#product-grid').mixItUp('setOptions', {
limit: +$(this).text()
});
});
//initialize the plugin
$('#product-grid').mixItUp({
pagination: {
limit: 1
}
});
})
I'm modifying a wordpress site and have a menu with four anchor tags (buttons) to the left of a slider. When a user selects a button, the slide associated with the button shows. Now, I'd like to open a page when the user clicks the button, instead of showing the slide. Here is the code so far:
$('#slidernavigation > a').on('click', function(e){
e.preventDefault();
$a = $(this);
$(this).showSlide();
if($a.id == $('#slide-1285')){
console.log('testing');
}
else{
console.log('not-testing');
}
});
Here I'm testing to see if I can click on the anchor with the id '#slide-1285' and log it to the console. It always says 'not testing'. I'm going to set up conditions for all id's so a user is redirected to the correct page. Something like this:
$('#slidernavigation > a').on('click', function(e){
e.preventDefault();
$(this).showSlide();
if($a.id == $('#slide-1285')){
window.location.href = "http://webpage1";
}
elseif($a.id == $('#slide-1286')){
window.location.href = "http://webpage2";
}
elseif($a.id == $('#slide-1287')){
window.location.href = "http://webpage3";
}
else($a.id == $('#slide-1288')){
window.location.href = "http://webpage4";
}
});
Any ideas? Thanks in advance.
To get the id of the element that was clicked, you can do:
$(this).attr('id');
That will return a string. So you could do:
if($(this).attr('id') === 'slide-1285') { do something }
$('#slide-1285') would return a jquery element, but you want just the id. I think the code above is more what you are looking for.
You can add a new data attribute to each of your link and then get that value and redirect.
<a data-webpage="http://webpage1" href="whatever" id="slide-123"></a>
<a data-webpage="http://webpage2" href="whatever" id="slide-456"></a>
.....
and then
// this will bind all ids starting with slide-
$('[id^=slide-]').on('click', function(e){
// some code.
window.location.href = $(this).data('webpage');
}
1) you are comparing $a.id, that is string, to object $('#slide-1285');.
2) To simplify:
$(document).ready(function(){
$('.a').click(function(e){
e.preventDefault();
window.location = $(this).attr('href');
});
});
<a href='http://google.com' class='a'>Google!</a><br/>
<a href='http://stackoverflow.com' class='a'>SO!</a><br/>
jQuery objects have no id property. You need to do attr('id'), or just get the id property of the plain DOM object. Additionally, jQuery objects are never going to equal each other. Third, you want to check if the clicked element has a certain ID, which can be done using .is().
In sum, you could do one of these:
Comparing strings:
$('#slidernavigation > a').on('click', function(e){
if(this.id == '#slide-1285'){
console.log('testing');
}
else{
console.log('not-testing');
}
});
Using .is():
$('#slidernavigation > a').on('click', function(e){
if($(this).is('#slide-1285')){
console.log('testing');
}
else{
console.log('not-testing');
}
});
Or, just let the browser do its thing. Give your <a>s href attributes, and they'll function as links, even without JS.
instead of writing $.id
you should write
$a.attr('id')
and this should be checked like this :-
if( $a.attr('id') == slide-1285)
not the way you are doing :)
Try
var pages = [{"slide-1285" : "http://webpage1"}
, {"slide-1286" : "http://webpage2"}
, {"slide-1287" : "http://webpage3"}
, {"slide-1288" : "http://webpage4"}
];
$('#slidernavigation > a').on('click', function(e) {
e.preventDefault();
var nav = e.target.id;
$.grep(pages, function(page) {
if (nav in page) {
window.location.href = page[nav];
}
})
});
jsfiddle http://jsfiddle.net/guest271314/2nf97dfr/
<div id="a">
dhjdfd
</div>
$('#a').on('click',function(e){
var clickedElement= e.srcElement;
if($(clickedElement).attr("id") == "abc"){
//do something
}
});
just use e.srcElement to get the element reference and then get its id.. and btw u can use switch case rather than multiple if else statements ..
working fiddle link
It is possible to check if a input was not changed using change() event?
I'm working with <input type='file' /> and i want to warning the user that no changes was made on his own action.
Right now, i just made a normal change() event:
// fire the thumbnail (img preview)
$("#file-input").on("change", function () {
readURL(this); // create the thumbnail
});
what i'm missing ?
Prev Solutuib:
well, i found a workaround for this, the real problem is that i give a option to the user to hide the thumbnail, and if he wants, open again...
but the thumbnail will only open when the user select a image, that's the problem, because the change event fire this option to open, so, if no change, no thumbnail open.
so, when i hide the thumbnail, i change the input file for a new one, making the change event always fire.
Use a variable to store the last value of the input, and compare to the current value on change event, if they are the same, no change was made :
var last_value = $("#file-input").val();
$("#file-input").on("change", function () {
if (this.value === last_value) alert('no change');
last_value=this.value;
});
EDIT: Or you can always just replace the input tag with another, like this SO answer suggest :
var $c = $("#container");
var $f1 = $("#container .f1");
function FChange() {
alert("f1 changed");
$(this).remove();
$("<input type='file' class='f1' />").change(FChange).appendTo($c);
}
$f1.change(FChange);
<input type="file" id="file-input" data-url="intial-value" />
$("#file-input").on("change", function () {
if($(this).val() != $(this).data('url'){
//value has changed
$(this).data('url', $(this).val())
}
else{
return false;
}
});
$("#file-input").on("change", function () {
if($(this).data('last-val')){
// do something
} else {
$(this).data('last-val',$(this).val());
//do something else
}
});
I am using jQuery with .load function to update count, however if the button is clicked so fast, it can be hacked. Also I can't use unbind as this makes the button unusable after the first click.
Here is the jQuery I use when button is clicked.
<script type="text/javascript">
$(function() {
// update "likes" of a post
$(".bubble-like a").click(function() {
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-like').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});
// remove my like from a post
$(".bubble-unlike a").click(function() {
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-liked').fadeOut(200);
$(this).parent().parent().children('.bubble-unlike').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});
});
</script>
If I clicked on like too fast or vice versa, the load is executed more than once. I also explained that unbind does not help.
Any idea?
UPDATE
I am not sure if I am doing that correct, but it seems to resolve it in my case.. can anyone correct/make me wrong ?
I added this line to my click handlers
// update "likes" of a post
$(".bubble-like a").click(function() {
$(this).css({'display' : 'none'});
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-like').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});
// remove my like from a post
$(".bubble-unlike a").click(function() {
$(this).css({'display' : 'none'});
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-liked').fadeOut(200);
$(this).parent().parent().children('.bubble-unlike').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});
I added this line to my loaded scripts add_post_like and remove_post_like:
$('.bubble a').show();
Now it seems to accept only one click.. Is that reliable?
You can disable the click event whenever the button is clicked til the end of loading process. Then activate the event after it's completed within the callback function.
gory details: http://api.jquery.com/load/
UPDATE:
I've made a quick example for you: http://jsfiddle.net/hvfc5/1/
As you click the button, it would firstly remove the event binding on the button, then bind it back again after the image loaded. But if you click it again after this, you'd figure that the event still can be unbinded, but it never comes back. It's because the image has been loaded, therefore the load() function won't even be triggered.
This is just a demo sample for you to understand how to manipulate things, you still need to customize your own version as demanded.
You can disable the button as it is clicked and enable on when other button is clicked like toggle e.g. When likes is clicked disable it and enable unlike and vice versa.
The one() function comes to mind.
http://api.jquery.com/one/
Yes: first action of button click would be disabling the button itself. That way, fast clicks are no longer possible. Of course, you,'d have to re-enable the button after the load.
Update
Sigh... It's all about teh codez right?
$(".bubble-like a").click(function() {
$(".bubble-like a").attr('disabled', 'disabled');
var post_id = $(this).parent().parent().parent().attr('id');
var number = post_id.replace(/[^0-9]/g, '');
$(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
$(this).parent().parent().children('.bubble-like').fadeOut(200);
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number,
function(){
$(".bubble-like a").removeAttr('disabled');
});
});
$(".bubble-like a").click(function() {
var button = $(this);
$(this).wrap($('<button/>', {
"class" : "disButton",
disabled: true,
width: button.width()
}
)); // wrap the anchor with button with disabled property
...
..
$("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, function() {
button.unwrap(); // remove the wrapping button
});
});
You have to right some css to make the button look like a simple text. For example,
button.disButton {
border: none;
background: transparent;
}
button.disButton a{
color: #ddd;
text-decoration: none;
}