Twitter bootstrap icons and <input type="button>

user5035451
July 3, 2015
188 views
0 votes
2 Answers

I’ve trying to put two icons for vote up/down but I’m not sure how exactly to do this. Current code havehasonly two <input type="button"> now need to put icons on them. This is what I try so far:

<div class="btn-votes">
    <div class="like">
        <i class="icon-like"> 
            <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].','1')" '.$up.' />
        </i>
    </div>
    <div class="dislike">
        <i class="icon-dislike">
             <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].','-1')" '.$down.' />
        </i>
    </div>
</div>

And this is the AJAX part.

function addVote(image_id,vote_rank) {
    $.ajax({
        url: "add_vote.php",
        data:'image_id='+image_id+'&vote_rank='+vote_rank,
        type: "POST",
    beforeSend: function(){
        $('#links-'+image_id+' .btn-votes').html("<img src='img/loaderIcon.gif' />");
    },
    success: function(vote_rank_status){
        var votes = parseInt($('#votes-'+image_id).val());
        var vote_rank_status;
        switch(vote_rank) {
            case "1":
            votes = votes+1;
            break;
            case "-1":
            votes = votes-1;
            break;
    }
       console.log(vote_rank_status);
    $('#votes-'+image_id).val(votes);
    $('#vote_rank_status-'+image_id).val(vote_rank_status);

        var up,down;

        if(vote_rank_status == 1) {
            up="disabled";
            down="enabled";
        }
        if(vote_rank_status == -1) {
            up="enabled";
            down="disabled";

        }    

        var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote('+image_id+','1')" '+up+' /><div class="label-votes">'+votes+'</div><input type="button" title="Down" id="down"  onClick="addVote('+image_id+','-1')" '+down+' />';    
            $('#links-'+image_id+' .btn-votes').html(vote_button_html);
        }


    });
    }

I’m not sure where is the problem but in web console I see the error

ReferenceError: addVote is not defined

which I think mean that can’t pass onClick event to the AJAX function. So how should those buttons be?

This is the current HTML which is working just fine

<div class="btn-votes">
    <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].','1')" '.$up.' />
    <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].','-1')" '.$down.' />  
</div>

UPDATE: Current code

<div class="btn-votes">
    <div class="like">
         <button title="Up" class="up" onClick="addVote('.$row['image_id'].','1')" '.$up.' />
               <i class="icon-like"> </i>
         </button>
    </div>
    <div class="dislike">                                  
          <button title="Down" class="down" onClick="addVote('.$row['image_id'].','-1')" '.$down.' />
               <i class="icon-dislike"></i>
          </button>
    </div>
</div>

Tags: jquery twitter-bootstrap

Answers

First, the addVote() function does not exist, so wrap your ajax call in it.

function addVote(image_id, vote_rank) {
    $.ajax({
    url: "add_vote.php",
    data:'image_id='+image_id+'&vote_rank='+vote_rank,
    type: "POST",        
    beforeSend: function(){
        $('#links-'+image_id+' .btn-votes').html("<img src='loaderIcon.gif' />");
    },

    success: function(vote_rank_status){
         console.log(vote_rank_status);
    var votes = parseInt($('#votes-'+image_id).val());
    var vote_rank_status;
    switch(vote_rank) {
        case "1":
        votes = votes+1;
        break;
        case "-1":
        votes = votes-1;
        break;

    }
    $('#votes-'+image_id).val(votes);
    $('#vote_rank_status-'+image_id).val(vote_rank_status);

    var up,down;

    if(vote_rank_status == 1) {
        up="disabled";
        down="enabled";
    }
    if(vote_rank_status == -1) {
        up="enabled";
        down="disabled";
    }   
    var vote_button_html = '<div class="like"><i class="icon-like"><input type="button" title="Up" id="up" onClick="addVote('+image_id+','1')" '+up+' /></i></div><div class="label-votes">'+votes+'</div><div class="dislike"><i class="icon-dislike"><input type="button" title="Down" id="down"  onClick="addVote('+image_id+','-1')" '+down+' /></i></div>';    
    $('#links-'+image_id+' .btn-votes ').html(vote_button_html);
    }
    });
}

Then, do not use <input type="button" />, but <button></button>, and put the icon inside.

<button class="btn" onClick="addVote(id, rank)">
    <i class="fa fa-send"></i>
</button>

If you are already using jquery, you might wanna drop the onclick and do something like:

$('body').on('click', '.up, .down', function(e){
    e.preventDefault();
    addVote($(this).attr('data-id'), $(this).attr('data-rank'));
    return false;
});

And echo the php in data attributes of course.

You can bind onclick event on button, however, you should bind the function by jquery and not by onclick, as the onclick will trigger outside of your function scope :

var vote_button_html = '<div class="like">' +
                           '<i class="icon-like">' +
                               '<input type="button" title="Up" id="up" '+up+' />' +
                            '</i>' + 
                       '</div>' +
                       '<div class="label-votes">'+votes+'</div>' +
                       '<div class="dislike">' +
                           '<i class="icon-dislike">' +
                               '<input type="button" title="Down" id="down" '+down+' />' +
                           '</i>' + 
                       '</div>';    

var vote_button = $(vote_button_html);

vote_button.find("#up").on("click", function(){
    addVote(image_id,1);
});
vote_button.find("#down").on("click", function(){
    addVote(image_id,-1);
});

$('#links-'+image_id+' .btn-votes ').empty().append(vote_button);

Note that if you have multiple vote button on your page, you MUST change the id up and down from id to class as id MUST BE UNIQUE

Please signup or login to give your own answer.

Click here to cancel reply.