Setting Checkbox State with jQuery Mobile

Ajax, Javascript, JQuery, jQuery Mobile, Pebblet

I used jQuery Mobile to create the UI for the Mobile Theme Generator. One of the processes that had to be frequently coded was setting the state of the jQuery Mobile checkbox. Because of the many classes associated with displaying a mobile checkbox, the code was more involved that I first anticipated.

To set checkbox state to ‘on’:

?View Code JAVASCRIPT
var c = $('#mycheckbox');
$(c).attr({'checked': true, 'data-icon': 'checkbox-on'}).siblings('label').removeClass('ui-checkbox-off').addClass('ui-checkbox-on');
c = $(c).siblings('label').children('span').children('span')[1];
$(c).removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');

I first set the “checked” attribute to true and also set the “data-icon” attribute to ‘checkbox-on’.
I changed the class for the checkbox label from ‘ui-checkbox-off’ to ‘ui-checkbox-on’.
I then get the sibling label for the checkbox so that I can get the second ‘grand-child’ of the label. I change the class of the span from ‘ui-icon-checkbox-off’ to ‘ui-icon-checkbox-on’.

<div class="ui-checkbox">
    <label for="mycheckbox" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-off ui-btn-up-a">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">Menu Items Mini:</span>
            <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">&nbsp;</span>
        </span>
    </label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" data-mini="true">
</div>

That’s it. Of course, to turn it back off, I just to change to classes back (and removed the ‘checked’ attribute).

Checkout My New Site - T-shirts For Geeks

Javascript: Testing For Undefined

Javascript, Pebblet

While working on a project, I wanted to test whether a variable was undefined in Javascript. Because Firebug displayed ‘undefined’ in the console, I assumed that I could treat it as a string.

?View Code JAVASCRIPT
if (variable == 'undefined') {
// do something
}

Now I knew that this wouldn’t work, but I tried it anyway. ‘undefined’ an object, not a string, so I could not treat it as a string.

After a minute of searching, I found the undefined solution:

?View Code JAVASCRIPT
if (typeof(variable) == 'undefined') {
// do something
}

Using the typeof operator, Javascript is able to determine whether a variable/object is ‘undefined’.

Checkout My New Site - T-shirts For Geeks

WordPress Editor: Writing Code

Pebblet, Wordpress

When creating posts using WordPress, I often switch between the Visual and HTML editors. I write a lot of code in my posts (using the pre tag and the CodeBox plugin).

Unfortunately, when I switch back to the Visual editor, WordPress changes my code. Although, the code is wrapped in a pre tag, the visual editor will still change or remove code. For instance, If I add ‘ < script > ‘ to my page, I had to resort to writing < script >, so the visual editor does not change it.

It recently occurred to me that if I create a post with a lot of code, rather than trying to trick the Visual editor, I remain in the HTML editor and never switch back into the Visual editor before I publish.

I hope this helps someone else writing code using WordPress.

Checkout My New Site - T-shirts For Geeks

CakePHP and Ajax: Missing View

CakePHP, Pebblet

If you are using an Ajax Framework with CakePHP and receive the error message “Missing View”, then you need to add the following to your controller method:

function someMethod() {
     $this->autoRender = false;
}

Also, if you have debug turned on, you will receive a Parse error when JSON data is returned back. CakePHP set the debug level to 2 by default. You can turn it off in the app/config/core.php file by setting the debug level to 0. YOu probably don’t want to do this in the development environment. A better solution is to add the following to your controller method:

function someMethod() {
     $this->autoRender = false;
     if ( $this->RequestHandler->isAjax() ) {
          Configure::write ( 'debug', 0 );
     }
}

This let’s CakePHP know that it is an Ajax request. If you use this method, make sure that you add the RequestHandler Component to your controller.

class MyController extends AppController {
        var $components = array('RequestHandler');
}

Checkout My New Site - T-shirts For Geeks

Periods (dot) Converted in PHP Variables

Pebblet, PHP

I just ran into a problem when I was attempting to pass a PHP POST variable that contained a period. I’m not sure why I have never run into this situation in the past. PHP will automatically convert a period into an underscore. I submitted a form  with a field with the name ‘co.uk’. I then checked for the existence of the post variable in a PHP class (if  $_POST[‘co.uk’]). It did not exist. I then checked (if $_POST[‘co_uk’]) and was able to get the value. Interesting.

Checkout My New Site - T-shirts For Geeks

CodeIgniter: 500 Internal Server Error

Codeigniter, Pebblet

I just finished a project using CodeIgniter. I ftp’d the files to the host provider’s servers. When I attempted to view the website, I received a ‘500 Internal Server Error’. Viewing the error logs, I found: SoftException in Application.cpp:252: File “/home/arrowcol/public_html/index.php” is writeable by group. I looked at the permissions of the index.php file and found that it was set to 0666, so I changed it to 0755 and the site is now up and running.

Checkout My New Site - T-shirts For Geeks