JQuery PHP / HTML switch onclick

Question

This piece of code is somehow not working and I dont know why, im not good at php nor js just trying to make some website.

The part that is not working is this favorite button, it works like it has to work but it does not switch to "unfavorite" after click, it only works if u refresh the browser.

This is the html that is generated by the php file:

<a class="btn" id="fav28" title="Add to Favorites" href="javascript:;" onclick="AddFav('28','fav','add')">
    <i class="icon-heart"></i>
</a>

And this is the js function:

function AddFav(id, dothis, dowhat) {

$.ajax({
    url: ("/process.php?do="+dothis+"&id="+id+"&action="+dowhat)
});
if(dowhat == "add"){
    document.getElementById(dothis+id).className = 'disabled';
    document.getElementById(dothis+id).onclick = another_function
    document.getElementById(dothis+id).title = 'Remove from Favorites';
}else if(dowhat == "remove"){
    document.getElementById(dothis+id).className = 'btn';
    document.getElementById(dothis+id).title = 'Add to Favorites';
}
}

I have tried the

document.getElementById(dothis+id).onClick = "AddFav(28,id,remove)";

but nothing happens with this, it simply does not change the onclick

what it has to do is to change the "onclick" event from

onclick="AddFav('28','fav','add')"

to

onclick="AddFav('28','fav','remove')"

Thanks in advance.

grammar · Accepted Answer · 2013-10-29 19:42:21Z

I might be wrong, but I don't think you can override the "onclick" attribute in HTML with JavaScript. The "onclick" will always run, even if you try to change it or add another click handler in JavaScript.

Your best solution for this problem would be to remove the "onclick" attribute, and setup the click handler with JavaScript instead.

Your PHP should generate this:

<a class="btn" id="fav28" title="Add to Favorites" href="javascript:;">
    <i class="icon-heart"></i>
</a>

Note that "onclick" was removed. In your JS you should have something like this:

var favButton = document.getElementById('fav28');

favButton.addEventListener( 'click', function(){
    // Note: `this` is referring to the button you clicked
    if( this.className === 'disabled' ) {

        // Run AddFav as if you were removing the favourite

        this.className = 'btn';
        this.title = 'Add to Favourites';

    } else {

        // Run AddFav as if you were adding the favourite

        this.className = 'disabled'
        this.title = 'Remove from Favourites';

    }

});

Then your AddFav method only has to worry about adding or removing the favourite, which in your case looks like it's only an Ajax call. You can remove all logic from AddFav that changes the button and call it where I've commented out.

Cristian Bitoi · Accepted Answer · 2013-10-29 19:35:29Z

1

You says you tried

document.getElementById(dothis+id).onClick = "AddFav(28,id,remove)";

but the syntax is wrong because you don't have qoutes for id and remove (that are strings) like:

AddFav(28,'id','remove')";

I see you use jquery.. if you use jquery why not enjoy all features. your function can became:

function AddFav(id, dothis, dowhat) {

$.ajax({
    url: ("/process.php?do="+dothis+"&id="+id+"&action="+dowhat)
});
if(dowhat == "add"){

    $('#' + dothis + id).addClass('disabled'); // add class disabled
    $('#' + dothis + id).removeClass('btn'); // remove class btn if exist

    $('#' + dothis  +id).on( "click", function() {
         AddFav(id,'fav','remove'); // attach new function AddFav for click event
    });

    $('#' + dothis  +id).attr('title','Remove from Favorites');

}
else if(dowhat == "remove"){

    $('#' + dothis + id).addClass('btn'); // add class btn
    $('#' + dothis + id).removeClass('disabled'); // remove class btn if exists

    $('#' + dothis  +id).attr('title','Add to Favorites');

}
}

answered Oct 29, 2013 at 19:35

Cristian Bitoi

1,5571 gold badge10 silver badges14 bronze badges

2 Comments

aanders77 Over a year ago

You should use .on instead of .bind, as stated here api.jquery.com/bind The syntax is the same :)

Cristian Bitoi Over a year ago

Yes, yes, true... old habbit :)

puelo · Accepted Answer · 2013-10-29 19:37:29Z

1

If you want to do it in pure javascript than the changing the onclick attribute to another function is done like this:

document.getElementById(dothis+id).onclick = function { AddFav(id,'fav','remove') };

Like this:

http://jsfiddle.net/4ku75/

answered Oct 29, 2013 at 19:37

puelo

6,0752 gold badges39 silver badges74 bronze badges

Comments

Aurélien Gasser · Accepted Answer · 2013-10-29 19:41:57Z

1

It might be a scope problem: the AddFav function might not be defined in the global scope.

Try replacing

function AddFav(id, dothis, dowhat) {

with

window.AddFav = function(id, dothis, dowhat) {

This way, your AddFav function is global, and you might call it using window.AddFav or simply AddFav

answered Oct 29, 2013 at 19:41

Aurélien Gasser

3,1201 gold badge23 silver badges25 bronze badges

Collectives™ on Stack Overflow

JQuery PHP / HTML switch onclick

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related