jQuery having trouble selecting things in different cases

Note: If you're 'just' a jQuery developer some things in this post may look a tad complex (Base62 encoding etc.) - it's really not. Although the more technical details are relevant to the question, the core is that jQuery won't select stuff with capitals. Thanks!

Hi folks!

So I have a list generated by Ajax. When you click the list's title, it's ID is sent and the list item appears alongside it. Standard stuff.

Since we're using an auto_increment ID, we don't want the users knowing how many submissions there are in the database. So, I'm encoding it into Base62, then decoding back again. [Note that this is - or, should be, irrelevant to the problem].

So as my list is generated, this code is output. We're using CodeIgniter PHP alongside the jQuery - this is in a loop of database results. $this->basecrypt->encode() is a simple CI library to convert an integer (the ID) to Base62:

$('#title-<?php echo $this->basecrypt->encode($row->codeid); ?>').click(function() {
        alert("clicked");
        [...]

And then, further down the page:

<div id="title-<?php echo $this->basecrypt->encode($row->codeid);?>" class="title">

As you can see, this is all generated in the same loop - and viewing the outputted source code shows, for example:

$('#title-1T').click[...] and then <div id="title-1T" [...]

So, jQuery shouldn't have any trouble, right? It was all working fine until we started Base62-ing the IDs. I believe that jQuery can't/won't select our IDs when they contain capital letters.

Now forgive me if I'm wrong - I am, relatively speaking, fairly new to jQuery - but to test my point I changed my $this->basecrypt->encode() into Base36. Before, it was using 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ After, it was using 0123456789abcdefghijklmnopqrstuvwxyz

With no capital letters, jQuery could select (and show the alert for testing purposes) just fine.

So what can I do? Is it safe for me to continue just using numbers and lowcase letters, in Base36 - and if so, what's the maximum integer size this can go up to? If not, what can I do about jQuery's problematic selection process?

Thanks!

Jack

EDIT: Included below is some example code from the page.

This is a part of the script returned in the file ajaxlist.php - it's called from Ajax and appears a couple of seconds after the page loads. I added in alert("clicked"); right near the beginning to see if that would appear - sadly, it doesn't... $(document).ready(function() {

    $('#title-<?php echo $this->basecrypt->encode($row->codeid); ?>').click(function() {
        alert("clicked");
        var form_data = {
            id: <?php echo $this->basecrypt->encode($row->codeid); ?>
        };

        $('.resultselected').removeClass('resultselected');
        $(this).parent().parent().addClass('resultselected');

        $('#col3').fadeOut('slow', function() {
            $.ajax({
                url: "<?php echo site_url('code/viewajax');?>",
                type: 'POST',
                data: form_data,
                success: function(msg) {
                    $('#col3').html(msg);
                    $('#col3').fadeIn('fast');
                }
        });
        });
    });
}); 
</script>

Also returned from the same file, at the same time as the code above (just beneath it) is this:

<div class="result">

    <div class="resulttext">

        <div id="title-<?php echo $this->basecrypt->encode($row->codeid);?>" class="title">
            <?php echo anchor('#',$row->codetitle); ?>
        </div>   [.......]

If this helps anymore, let me know!

---

EDIT 2: ACTUAL OUTPUT RETURNED TO THE BROWSER.

This was taken from Firebug, and is the returned data (Ajax) to the browser:

    <script type="text/javascript">
    $(document).ready(function() {

        $('#title-1T').click(function() {
            alert("clicked");

            var form_data = {
                id: 1T      };

            $('.resultselected').removeClass('resultselected');
            $(this).parent().parent().addClass('resultselected');

            $('#col3').fadeOut('slow', function() {
                $.ajax({
                    url: "http://localhost:8888/code/viewajax",
                    type: 'POST',
                    data: form_data,
                    success: function(msg) {
                        $('#col3').html(msg);
                        $('#col3').fadeIn('fast');
                    }
            });
            });
        }); 
    }); 
    </script>

    <div class="result">

        <div class="resulttext">

<div id="title-1T" class="title">

                <a href="http://localhost:8888/#"><p>This is an example </p></a>        </div>`

            <div class="summary">
                gibberish summary text      </div>

            <div class="bottom">


                <div class="author">
                    by <a href="http://localhost:8888/user/7/author">author</a>         </div>

                <div class="tagbuttoncontainer">
                                        <div class="tagbutton listv">
                                                    <span>tag1</span>
                        </div>  
                                </div>

                <!-- Now insert the rating system -->
                <div class="ratingswrapper">

                    <p>4.0</p> 
                </div>

            </div>

        </div>

    </div>

Come on - you cannot say that shouldn't work... can you?!

Ok I found your problem... you need to put quotes around the variable in the form_data definition (demo):

    var form_data = {
        id: "<?php echo $this->basecrypt->encode($row->codeid); ?>"
    };

I also had to add a return false; so the demo doesn't try to follow the link