jquery Uncaught SyntaxError：无效或意外的标记 - 输入文本有一个撇号

Question

I have the current problem regarding an input which I use for searching a vast variety of articles. To get more in depth, the thing is that when I insert a text with an apostrophe, I get the following error: Uncaught SyntaxError: Invalid or unexpected token

  function set_id_article_popover(id, name){
   $('#articles_search_input').val(id);
   $('#articles_search_popover').val(name);
   $('#articles_search_popover').blur();
   $('[data-toggle="popover"]').each(function () {
    $(this).popover('hide');
  });

$('#articles_search_popover').val(name); is where I insert article's name. $('#articles_search_input').val(id); gets the id of the article to search. First number is inserted correctly inside the function, which is the id of the article set_id_article_popover(id, name)

          <div class="item" id="articles_search_popover_container">
              <i class="fa fa-newspaper-o placeholder_input_icotext-muted_light"></i>
                    <input name='name_busqueda' 
                        autocomplete ='off' <?php if(!empty($value1)) 
                           {echo 'value="'.$value1.'"';} ?> type="text" 
                           data-texts='1' 
                           data-toggle="popover" 
                           title="<i class='fa fa-exclamation-triangle'></i>&nbsp;<span class='text-muted'><?php echo __('Busca por especialidad o tratamiento');?></span>" data-lang="<?php echo $this->params['language'];?>" 
                            data-search="articles" 
                            id="articles_search_popover" 
                            data-lang="<?php echo $lang; ?>"
                            class="form-control" 
                            placeholder="<?php echo __('Buscar en artículos');?>">
                             <!-- Popover "Especialidad / Especialista" -->
                           <?php echo $this->element(
                            '/main_search/custom_autocomplete', 
                            array(
                             'id' => 'articles_search_popover', 
                             'headers' => false,
                             'specialties' => true,
                            'specialist'=> false,
                            'top_specialties' => false,
                            'treatments' => true,
                            'cols' => '1')
                            ); ?>
      </div>

Now, I will attach you the part of the Controller to have a better grasp of what is happening in the back-end.

  if(isset($this->request->query['name_busqueda']) 
   && $this->request->query['name_busqueda'] != ""){
      $word = $this->request->query['name_busqueda'];
   }

    if(isset($word) && $word != "" && !strpos($word, "-")){
        $words_titulo = $word;
    }

    if(isset($articles_search) && $articles_search != ""){
        $word_search = false;
        //specialty or treatment is selected
        $data = $this->request->query['articles_search'];
        $data = explode("_",$data);
        $tipo = $data[0];

        if($tipo === 'specialty'){
            //search by specalty
            $specialty_id = $data[1];//id

            if(!empty($this->params['language']) && $this->params['language'] != 'es'){
                $name_field_sufix = '_' . $this->params['language'];
            } else {
                $name_field_sufix = '';
            }

            $specialty = $this->Specialization->find('first', array(
                'fields' => array(
                    'name' . $name_field_sufix .' AS name'
                ),
                'conditions' => array(
                    'id' => $specialty_id
                )
            ));

            if(!empty($specialty)) {
                $words_titulo = $specialty['Specialization']['name'];
            }


            $options['conditions'] = array(
                'ArticlesSpec.specialization_id' => $specialty_id
            );
            $this->set('specialty_id', $specialty_id);

        }else{

            //search by treatment
            $treatment_id = $data[1];//id

            if(!empty($this->params['language']) && $this->params['language'] != 'es'){
                $name_field_sufix = '_' . $this->params['language'];
            } else {
                $name_field_sufix = '';
            }

            $treatment = $this->Treatment->find('first', array(
                'fields' => array(
                    'name' . $name_field_sufix .' AS name'
                ),
                'conditions' => array(
                    'id' => $treatment_id
                )
            ));

            $aux_join = array(
                array(
                    'table' => 'td_articles_treatments',
                    'alias' => 'ArticlesTreat',
                    'type' => 'LEFT',
                    'conditions' => array(
                        'ArticlesTreat.article_id = Article.id',
                    )
                ),
                array(
                    'table' => 'td_treatments',
                    'alias' => 'Treatments',
                    'type' => 'LEFT',
                    'conditions' => array(
                        'ArticlesTreat.treatment_id = Treatments.id',
                    ),
                )
            );

            $options['joins'] = array_merge($joins, $aux_join);
            $campos_aux = ', ArticlesTreat.*, Treatments.*';
            $options['conditions'] = array('ArticlesTreat.treatment_id' => $treatment_id);

            if(!empty($treatment)) {
                $words_titulo = $treatment['Treatment']['name'];
            }

        }

    }

Do you know if there is a possibility of transforming the apostrophe through Cake or would it be better to do it through Javascript ?

I tried applying some solutions by replacing the apostrophe with an escape plus an alternative encoding character so that the input would be read more concisely, but I am kind of at a dead-end here. Any help would be quite appreciated. I am attaching you a couple of screen captures so I can guide you precisely of what is happening.

On this first one, I start to write on the search input. I fill it up with whichever info I want to.

On this second one, when I do the search and I click the button, it spits out the error: Uncaught SyntaxError: Invalid or unexpected token This is what happens in my development server.

Thanks

Answer 1

I found the problem finally after a long time. In the line where the function is being called on the onclick event inside this view, I had applied a json_encode function with PHP upon the name and therefore I was able to solve and do the query. That way the value's name I was searching for is being returned with json and there is no need of escaping the single quote character or doing other superfluous conversions.

  <section class="item list-group-item">
            <input type="hidden" id="treat_id" value="treatment_<?php echo $id;?>">
            <input type="hidden" id="treat_name" value="<?php echo $name;?>">
            <a onclick='set_id_article_popover("treatment_<?php echo $id;?>",  <?php echo json_encode($final_name); ?>)' class="center-block thumb_xxs">
                <i class="fa fa-heart"></i>
                <?php 
                if(strlen($name) > 50){
                    $name_short= substr($name, 0, 50).' ...';
                }else{
                    $name_short = $name;
                }
                $bname = returnBold($name_short, $search_text);
                ?>
                <span title="<?php echo $name ?>" class="text-muted"><?php echo $bname; ?></span>
            </a>
        </section>