What's wrong with this jQuery snippet?

Question

I am getting the following error message in my FF console:

"uncaught exception: Syntax error, unrecognized expression: ""

jQuery.noConflict();
jQuery(function() {
    jQuery('#foobar').click(function(){
        var id = jQuery(this).parent().parent().attr('id');
        var idstr = '"#'+id+'"';
        jQuery.post("example.com/callback.php", {id: id },
                function(data){
                jQuery(idstr).html(data.msg); // <- error occurs here 
                }, "json");
    });
});

As can be seen, I want to update the contents of a div with the received data.

These are the tests I have done so far:

1. inserted alert() statements to make sure

   • that data is being correctly returned from server (PASS)
   • that the element represent by idstr exists (PASS)

2. commented out the line where the div contents are being replaced, to see if error message goes away (PASS)

I can't see anything wrong with the code above (but then I am relatively new to jQuery). Can anyone spot what is causing the error?.

Also, I would like to briefly visually highlight the div that has had its contents updated (a bit like what happens here on SO, when an answer is accepted) - I am thinking of changing the element class and setting timers etc, but there may be a simpler way of doing that - can anyone help with how to do the 'highlighting part'?

Answer 1

This:

jQuery(document).function(){

Should be:

jQuery(document).ready(function(){

More Info:

http://api.jquery.com/ready/

Also why not use:

var idstr = '#'+id;

instead of:

var idstr = '"#'+id+'"';

Since idstr is a variable, you don't need to put quotes around it otherwise it will be mere string thereby giving you wrong results.

Answer 2

You don't need to dynamically make an "idstr" when you can just reference what you want to begin with

jQuery(document).function(){
    jQuery('#foobar').click(function(){
        var id = jQuery(this).parent().parent().attr('id');
        var idstr = $('#id');
        jQuery.post("example.com/callback.php", {id: id },
                function(data){
                idstr.html(data.msg); // <- error occurs here 
                });
    });
});

Answer 3

'"#'+id+'"' will become eg with id being 123 "#123" (the quotes being actual content and not just marking the string.

So it should be '#' + id which would give you #123