CODEWITHSUNDEEP
javascriptphpjqueryhtmlonclick
rokkz
rokkz

Reputation: 179

JQuery PHP / HTML switch onclick

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.

Upvotes: 0

Views: 1191

Answers (4)

grammar
grammar

Reputation: 871

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.

Upvotes: 2

Aur&#233;lien Gasser
Aur&#233;lien Gasser

Reputation: 3120

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

Upvotes: 1

puelo
puelo

Reputation: 6037

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/

Upvotes: 1

Cristian Bitoi
Cristian Bitoi

Reputation: 1557

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');

}
}

Upvotes: 1

Related Questions