Unrecognized expression in js script

Question

I'm very new into js at all and will need some help with this. This is my vote.js script

 function vote(type, value, image_id) {
   var dataFields = {'type': type, 'value': value, 'image_id': image_id};

   var ThisImageVotes = $("#"+image_id).find('#'+type).html();

   $.ajax({ // Ajax
      type: "POST",
      url: "add_vots.php",
      data: dataFields,
      timeout: 3000,
      success: function(dataBack){
         $("#"+image_id).find('#'+type).html(dataBack); 
           if(type=='positive')
           {
                 $("#"+image_id).find('#voteUp a').replaceWith('<a href="#" onclick="return false;"></a>');
           }
           else if(type=='negative')
           {
                 $("#"+image_id).find('#voteDown a').replaceWith('<a href="#" onclick="return false;"></a>');
           }

         $("#"+image_id).find('#voteUp("#"+image_id).find("#voteUp a")').attr('class', 'vote_up_done oneLine');
         $("#"+image_id).find('#voteDown').attr('class', 'vote_down_done oneLine');
         $("#"+image_id).find('#positive').attr('class', 'numberVoted oneLine');
          $("#"+image_id).find('#negative').attr('class', 'numberVoted oneLine');

         $('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>');           
         $('#alertFadeOut').fadeOut(3000, function () {
            $('#alertFadeOut').text('');
         });
         },
      error: function() {
         $('#message').text('Error! Please try again!');
      }
   });
}

What this script do is to let people to vote on image and when vote is done to make button (thumb up/down) grey i.e. disabled. Normally button must go grey right after the vote is done. Currently the vote is recorded into database but buttons doesn't turn grey and I can vote as much as I want. Once the page is refreshed buttons are disabled.

And if need this is the HTML part from the page with images.

<div id="'.$row['image_id'].'" class="pull-right">
    <div id="lineBlock">Ratings: ';
        if (isset($_COOKIE[$cookie_name])) { 
          echo '<div class="vote_up_done oneLine"></div>
           <div class="numberVoted oneLine">'.$vote['positive'].'</div>';
        } else {
          echo '<div class="vote_up oneLine" id="voteUp"><a href="#" onclick="vote(\'positive\', \'1\', '.$row['image_id'].'); return false;"></a></div>
           <div class="number oneLine" id="positive">'.$vote['positive'].'</div>';
        }                       
        if (isset($_COOKIE[$cookie_name])) {
           echo '<div class="vote_down_done oneLine"></div>
                   <div class="numberVoted oneLine">'.$vote['negative'].'</div>';
        } else { 
           echo '<div class="vote_down oneLine" id="voteDown"><a href="#" onclick="vote(\'negative\', \'1\', '.$row['image_id'].'); return false;"></a></div>
                 <div class="number oneLine" id="negative">'.$vote['negative'].'</div>';
        }                            
        echo '</div><span id="message"></span>
</div>

The error in console is this

Uncaught Error: Syntax error, unrecognized expression: #voteUp$("#"+image_id).find("#voteUp a")

Any ideas why buttons doesn't turn grey(disabled) and why is this error?

Answer 1

You need to replace this line:

$("#"+image_id).find('#voteUp("#"+image_id).find("#voteUp a")').attr('class', 'vote_up_done oneLine');

With:

$("#"+image_id).find("#voteUp a").attr('class', 'vote_up_done oneLine');

This looks like a serious typo that you have. Your quotes are scrambled.

Snippet

$(function () {
  $(".actions a").click(function () {
    if ($(this).hasClass("disabled"))
      return false;
    $(this).closest(".actions").find(".disabled").removeClass("disabled");
    $(this).addClass("disabled");
    return false;
  });
});

* {padding: 0; margin: 0; list-style: none; font-family: 'Segoe UI'; text-decoration: none; color: #000;}
li {padding: 5px; border: 1px solid #999; width: 200px; border-radius: 3px; margin: 10px;}
li .actions {overflow: hidden; padding: 3px;}
li .actions a {float: right;}
li .actions a:first-child {float: left;}
li .actions a.disabled, li .actions a.disabled i {color: #999;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<ul>
  <li>
    <div class="image"><img src="http://lorempixel.com/200/100/animals/1" alt="" /></div>
    <div class="actions"><a href="#"><i class="fa fa-thumbs-up"></i> Vote Up</a><a href="#"><i class="fa fa-thumbs-down"></i> Vote Down</a></div>
  </li>
  <li>
    <div class="image"><img src="http://lorempixel.com/200/100/animals/2" alt="" /></div>
    <div class="actions"><a href="#"><i class="fa fa-thumbs-up"></i> Vote Up</a><a href="#"><i class="fa fa-thumbs-down"></i> Vote Down</a></div>
  </li>
  <li>
    <div class="image"><img src="http://lorempixel.com/200/100/animals/3" alt="" /></div>
    <div class="actions"><a href="#"><i class="fa fa-thumbs-up"></i> Vote Up</a><a href="#"><i class="fa fa-thumbs-down"></i> Vote Down</a></div>
  </li>
  <li>
    <div class="image"><img src="http://lorempixel.com/200/100/animals/4" alt="" /></div>
    <div class="actions"><a href="#"><i class="fa fa-thumbs-up"></i> Vote Up</a><a href="#"><i class="fa fa-thumbs-down"></i> Vote Down</a></div>
  </li>
  <li>
    <div class="image"><img src="http://lorempixel.com/200/100/animals/5" alt="" /></div>
    <div class="actions"><a href="#"><i class="fa fa-thumbs-up"></i> Vote Up</a><a href="#"><i class="fa fa-thumbs-down"></i> Vote Down</a></div>
  </li>
</ul>

Answer 2

The .find should be outside the quote, because it's not part of the jquery selector. '#voteUp' is a jquery selector and should be in quotes, while find is a javascript method that operates on the result of a selector.