Question

I have a template that grabs values from a database and displays the data using template tags. The values returned are 0 & 1 and I can;t really control that so I am trying to get some jquery to change the values so 0 = ‘no’ and 1 = ‘yes’

I have got this code working here http://jsfiddle.net/a9cvx/236/

Using this

$(document).ready(function() {
    $("body").html($("body").html().replace(/0/g,'<b>abcde-fghi</b>'));
    $("body").html($("body").html().replace(/1/g,'<b>yes</b>'));
)};

Here is my template code.

...
<tr>
   <td>Reboot VM</td>
   <td>{{ col.t_rebootvm }}</td>
   <td>waiting</td>
</tr>
....

so {{ col.t_rebootvm }} comes from the database and would equal 0 or 1.

I can see my jquery js file is within the page source code when the html is loaded.
But when I use this jquery code in my template, the values do not change. Is this because the template is being rendered and the value 0 or 1 isn’t available on load? Is this something else?

Many thanks – Oli

Answer 1

Replacing strings in an entire HTML document is not a good practice. You will loose events and most likely replace things that you dont want. It could also be pretty slow.

You should at least try to be more specific in your selector, something like:

$(function() {
     $('td').each(function() {
         var html = $(this).html();
         $(this).html( 
             html.replace(/0/,'<b>no</b>')
                 .replace(/1/,'<b>yes</b>')
         );
     });
});

http://jsfiddle.net/prF9k/

Don’t forget to put you DOM logic inside a DomReady callback as well (I used $(function(){...). The reason why your fiddle works anyway, is because jsFiddle adds the script below the HTML so it will not be necessary to wrap it in a domReady callback. However, if you script is in the HEAD of the document you will need to do so.