TinyMCE content missing in FireFox 11

You might have encountered this issue if you are still using an older version of TinyMCE. Older versions of TinyMCE are not showing the  content inside the editor in FireFox 11. The editor is working fine in FF10.x. I'm not sure exactly which versions of TinyMCE has this issue. This is the case if you are still using earlier minor versions of Joomla 1.5 for your website. The TinyMCE version comes with Joomla 1.5 early versions does not work properly in FireFox 11.

However if you have ever encounter this problem, try replacing the older version with the latest one of TinyMCE. This will fix the issue at best case (at least it did for me). Of course you might need to check some other places if the update does not work such as JavaScript errors. If you are using Joomla, download the latest version of Joomla and replace the tinymce editor plugin with the one in new Joomla version.

I wish you the best with that ;-)

Please share your experience in comments section below.

How to fix the Ripple Emulator white screen

You might also have experienced this issue. The Ripple Emulator sometimes loads with a white blank screen after installing or updated to a newer version. This is a quick tip to solve this issue.
Open the Ripple configuration file. You may find it at C:\Users\Username\AppData\Roaming\Research In Motion\Ripple. Open it in notepad or any plain text editor. Find the following line.
windowContent=index.html
Replace with this:
windowContent=http://developer.blackberry.com/html5/update/rippleui
The issue may be solved. However I expect that RIM would remove this Ripple installer related bug in future.
Reference:
http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Ripple-no-work/td-p/1401819/page/3

Refresh jQuery Mobile listview after adding dynamic items in BlackBerry

I had a list that needs to be updated with new items from an AJAX response. List items contain some radio buttons and controlgroups that needs to be rendered as jQuery Mobile components. So I had to use .trigger("create") on the listview just before I refresh the listview. Let me show you the HTML bit.

<div data-role="collapsible" id="approve_tr_itinerary_details_wrapper">
<h3>
Itinerary Details</h3>
<ul data-role="listview" id="approve_tr_itinerary_details">
<li>No itinerary details</li>
</ul>
</div>
<div data-role="collapsible" id="approve_tr_travel_options_wrapper">
<h3>
Travel Options</h3>
<ul data-role="listview" id="approve_tr_travel_options">
<li>No travel options</li>
</ul>
</div>

And how I did the new item creation and appending them to the list.

$.each(items, function(index, item) {
 $("#approve_tr_travel_options").append(
 '<li data-role="list-divider">' + (index+1) + '</li>' +
 '<li>' +
 '<span class="tra-info-label tra-width-40">Name:</span>' +
 '<span class="tra-info-text">' + item.name + '</span>' +
 '</li>' +
 '<li>' +
 '<span class="tra-info-label tra-width-40">Cost:</span>' +
 '<span class="tra-info-text">' + item.cost + '</span>' +
 '</li>' +
 '<li>' +
 '<span class="tra-info-label tra-width-40">Valid though (Date / Time):</span>' +
 '<span class="tra-info-text">' + item.exp_date + '</span>' +
 '</li>' +
 '<li>' +
 '<fieldset data-role="controlgroup">' +
 '<input id="approve_tr_travel_option_' + (index+1) + '_1" name="approve_tr_travel_option_' + (index+1) + '" type="radio" value="1" />' +
 '<label for="approve_tr_travel_option_' + (index+1) + '_1">Preferred</label>' +
 '<input id="approve_tr_travel_option_' + (index+1) + '_2" name="approve_tr_travel_option_' + (index+1) + '" type="radio" value="2" />' +
 '<label for="approve_tr_travel_option_' + (index+1) + '_2">Alternate</label>' +
 '</fieldset>' +
 '</li>'
 );
});

Note the controlgroup and input elements. These need to be converted to jQuery Mobile components. So I used .trigger("create") which did a great job on the BlackBerry (also in the Ripple emulator) but not in the Chrome. Let me show the code I used just after adding new elements to the list.

$("#approve_tr_travel_options").trigger("create");

Chrome needs the listviews to be refreshed to render the newly added items as list items. What works for Chrome is,

$("#approve_tr_travel_options").trigger("create").listview("refresh");

However this method doesn't work on BlackBerry. Which was driving me crazy for two days. After messing with the code for few hours I found a solution for this issue, which can be used to render the listviews in both Chrome and BlcakBerry. Instead of refreshing the listview just below where you add new items do that in the pagebeforeshow event handler. Just see the code below.

$("#approve").live("pagebeforeshow", function(event, data) {
 $(this).find('ul').listview('refresh');
});

The listview will be refreshed just before the page is shown to the user. So what you do when you want to load set of items to a listview in the next page in a page transition is, load the set of list items first with AJAX and append them to the listview and trigger the create event (.trigger("create")) on the list and call the refresh just before you show the page to the user. Hope this helps someone to save some time without going crazy on the same issue, just like me!!

Getting Started

Blogger has changed its look and feel. Surely it made me come back to the platform and write something on my newly created blog.The blog name is n terms, which might seems little strange for many people out there. The letter n is used in mathematics to denote multiple (more than one) terms or occurrences of something. Since I have some mathematical background, the name n terms came in to my mind while looking for a suitable name to introduce myself to the blogging world.

I use n terms having some basic idea in mind. It means that I would talk about many terms or may subjects in my personal blog. Most of them would be related to the computer programming (mostly web development). This is inevitable with a person who spends more than twelve hours a day with HTML, CSS and Javascript.

Hope you don't mind it and pay your attention to the rest of the posts.