Databases
StackOverflow2013
Postsdbo
POjQuery having trouble selecting things in different cases
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery having trouble selecting things in different cases
    text
    copied!<p><em>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!</em></p> <p>Hi folks!</p> <p>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.</p> <p>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, <em>should</em> be, irrelevant to the problem].</p> <p>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. <code>$this-&gt;basecrypt-&gt;encode()</code> is a simple CI library to convert an integer (the ID) to Base62:</p> <pre><code>$('#title-&lt;?php echo $this-&gt;basecrypt-&gt;encode($row-&gt;codeid); ?&gt;').click(function() { alert("clicked"); [...] </code></pre> <p>And then, further down the page:</p> <pre><code>&lt;div id="title-&lt;?php echo $this-&gt;basecrypt-&gt;encode($row-&gt;codeid);?&gt;" class="title"&gt; </code></pre> <p>As you can see, this is all generated in the same loop - and viewing the outputted source code shows, for example:</p> <p><code>$('#title-1T').click[...]</code> and then <code>&lt;div id="title-1T" [...]</code></p> <p>So, jQuery shouldn't have any trouble, right? It was all working fine until we started Base62-ing the IDs. <strong>I believe that jQuery can't/won't select our IDs when they contain capital letters</strong>.</p> <p>Now forgive me if I'm wrong - I am, relatively speaking, fairly new to jQuery - but to test my point I changed my <code>$this-&gt;basecrypt-&gt;encode()</code> into Base36. Before, it was using <code>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</code> After, it was using <code>0123456789abcdefghijklmnopqrstuvwxyz</code></p> <p><strong>With no capital letters, jQuery could select (and show the alert for testing purposes) just fine.</strong></p> <p>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?</p> <p>Thanks!</p> <p>Jack</p> <p><strong>EDIT:</strong> Included below is some example code from the page.</p> <p>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 <code>alert("clicked");</code> right near the beginning to see if that would appear - sadly, it doesn't... $(document).ready(function() {</p> <pre><code> $('#title-&lt;?php echo $this-&gt;basecrypt-&gt;encode($row-&gt;codeid); ?&gt;').click(function() { alert("clicked"); var form_data = { id: &lt;?php echo $this-&gt;basecrypt-&gt;encode($row-&gt;codeid); ?&gt; }; $('.resultselected').removeClass('resultselected'); $(this).parent().parent().addClass('resultselected'); $('#col3').fadeOut('slow', function() { $.ajax({ url: "&lt;?php echo site_url('code/viewajax');?&gt;", type: 'POST', data: form_data, success: function(msg) { $('#col3').html(msg); $('#col3').fadeIn('fast'); } }); }); }); }); &lt;/script&gt; </code></pre> <p>Also returned from the same file, at the same time as the code above (just beneath it) is this:</p> <pre><code>&lt;div class="result"&gt; &lt;div class="resulttext"&gt; &lt;div id="title-&lt;?php echo $this-&gt;basecrypt-&gt;encode($row-&gt;codeid);?&gt;" class="title"&gt; &lt;?php echo anchor('#',$row-&gt;codetitle); ?&gt; &lt;/div&gt; [.......] </code></pre> <p>If this helps anymore, let me know!</p> <hr> <p><strong>EDIT 2:</strong> ACTUAL OUTPUT RETURNED TO THE BROWSER.</p> <p>This was taken from Firebug, and is the returned data (Ajax) to the browser:</p> <pre><code> &lt;script type="text/javascript"&gt; $(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'); } }); }); }); }); &lt;/script&gt; &lt;div class="result"&gt; &lt;div class="resulttext"&gt; &lt;div id="title-1T" class="title"&gt; &lt;a href="http://localhost:8888/#"&gt;&lt;p&gt;This is an example &lt;/p&gt;&lt;/a&gt; &lt;/div&gt;` &lt;div class="summary"&gt; gibberish summary text &lt;/div&gt; &lt;div class="bottom"&gt; &lt;div class="author"&gt; by &lt;a href="http://localhost:8888/user/7/author"&gt;author&lt;/a&gt; &lt;/div&gt; &lt;div class="tagbuttoncontainer"&gt; &lt;div class="tagbutton listv"&gt; &lt;span&gt;tag1&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Now insert the rating system --&gt; &lt;div class="ratingswrapper"&gt; &lt;p&gt;4.0&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Come on - you cannot say that shouldn't work... can you?!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload