addClass to a certain id after ajax response with json

Question

I want to apply the class by addClass to an element with specific id. Which is return by ajax in a json format.

js

$(document).on('blur', '.autosave', function(e) { 
    e.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'inc/products_autosave.php',
    data: {
        id: $(this).prop('id'),
        val: $(this).val()
    },
    dataType:'json',
    success: function(resp) {
        console.log(resp); //debug
        if(resp.sql=='ok'){
            $('#'+resp.id).addClass('has-success animate bounce');
            alert(resp.sql+' - '+id);
        }else{
            alert(resp.sql+' - '+id);
        }
    }
  });
});

json

{sql: "ok", id: "prd_title_en|3"}

html

<tr id="3">
    <td>00003</td>
    <td><input type="text" name="prd_cde" id="prd_cde|3" class="form-control autosave" value="3000002" /></td>
    <td><input type="text" name="prd_title_en" id="prd_title_en|3" class="form-control autosave" value="FULL DAY CITY TOUR WITH LUNCH (6 PERSON)" /></td>
    <td><input type="text" name="prd_title_th" id="prd_title_th|3" class="form-control autosave" value="xxx" /></td>
    <td><input type="number" name="prd_cost" id="prd_cost|3" class="form-control autosave" value="900" /></td>
    <td><input type="checkbox" class="autosave" name="prd_rcm" id="prd_rcm|3" value="1" data-toggle="toggle" data-size="mini" data-onstyle="success" data-on="Yes" data-off="No"/></td>
    </tr>

Ideally, I want to add class has-success, animate and bounce to the input #prd_title_en|3. But it keep saying Uncaught Error: Syntax error, unrecognized expression: #prd_title_en|3

I tried change it to other character but the result is the same! — Wilf, Sep 11 '17 at 09:54
I think `prd_title_en|3` is not valid ID name, did you try for example `prd_title_en_3`? — Jax-p, Sep 11 '17 at 09:55

Rory McCrossan · Accepted Answer · 2017-09-11T10:16:03.000

The issue is due to the | character. From the jQuery docs:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes http://api.jquery.com/category/selectors/

To add the escape characters you can use replace(), like this:

var resp = {
  sql: "ok",
  id: "prd_title_en|3"
}

if (resp.sql == 'ok') 
  $('#' + resp.id.replace('|', '\\|')).addClass('has-success animate bounce');
      
console.log(resp.sql + ' - ' + resp.id);

.has-success {
  color: #0C0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="3">
    <td>00003</td>
    <td><input type="text" name="prd_cde" id="prd_cde|3" class="form-control autosave" value="3000002" /></td>
    <td><input type="text" name="prd_title_en" id="prd_title_en|3" class="form-control autosave" value="FULL DAY CITY TOUR WITH LUNCH (6 PERSON)" /></td>
    <td><input type="text" name="prd_title_th" id="prd_title_th|3" class="form-control autosave" value="xxx" /></td>
    <td><input type="number" name="prd_cost" id="prd_cost|3" class="form-control autosave" value="900" /></td>
    <td><input type="checkbox" class="autosave" name="prd_rcm" id="prd_rcm|3" value="1" data-toggle="toggle" data-size="mini" data-onstyle="success" data-on="Yes" data-off="No" /></td>
  </tr>
</table>

because I mixed the column name and id together with the id. And then separate them later with `explode`. So from `prd_title_en|3`. I will tell server to update `prd_title_en` where id='3'. Is there any character which least risk to mess with system? — Wilf, Sep 11 '17 at 10:05
You can use for example, hyphens (multiple if you want), or underscores, you can in fact use many symbols (see docs) but it gets awkward with all the escaping on needs. — Stuart, Sep 11 '17 at 10:07
I changed the separator into `-_-` (which I think is weird enough). But the result is unlike @Rory Mcrossan did. The class is not apply to the id. No matter I use the `replace` or not. — Wilf, Sep 11 '17 at 10:19

score 2 · Answer 2 · answered Sep 11 '17 at 09:54

You can't use the pipe | character in a jQuery selector, it has a special meaning. You'll need to escape the pipe with two backslashes, like so:

$('#prd_title_en\\|3');

In your case, seeing as its part of the response, you'll likely need to do a string.replace on the pipe to escape it:

var escapedId = resp.id.replace('|', '\\|');
$('#'+escapedId);

See http://api.jquery.com/category/selectors/ for further information on jQuery selectors.

addClass to a certain id after ajax response with json

2 Answers2

Linked