Category Archives: Ajax

Setting Checkbox State with jQuery Mobile

Ajax, Javascript, JQuery, jQuery Mobile, Pebblet
May19

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’.

?View Code HTML
<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).

Share

JQuery Plugin: Mobile Page Switcher

Ajax, Javascript, JQuery, Mobile, plugins
May18

After I created the mobile sub-domain for GrasshopperPebbles, I needed a solution that would allow a user to switch to the mobile view at any time. I prefer giving the user the option to switch to a mobile view rather than a device-sniffing approach. So I created simple jQuery Plugin (gpMobilePageSwitcher) that displays an icon and a link to the mobile view. But the plugin doesn’t just take the user to the home page of the mobile sub-domain, it takes the user to the mobile view of the same page they are viewing.

Continue reading →

Share

Mobile Theme Generator for WordPress and Tumblr

Ajax, Django, Javascript, JQuery, Mobile
May18

A few months ago, I downloaded a mobile theme for WordPress in order to create a mobile site for GrasshopperPebbles. While updating the template, I thought about automating the development process so that future releases would be easier. So I decided to create an open source project – the mobile theme generator. The generator displays mobile sites using jQuery Mobile. In fact, the generator itself was developed using Django and jQuery Mobile (the original theme used jQuery Mobile). I did think that it an odd solution to create PHP files using Python, but it turned out to be a great solution.

Continue reading →

Share

jQuery Plugin: gpImageRotate – Create Portfolios, Carousels, Galleries, and more

Ajax, JQuery, plugins
Oct14

A few years ago, I created the jQuery plugin imBannerRotater. I have tweaked this plugin for various projects over the years, but I recently made so many changes to the plugin that I decided to create a new plugin: gpImageRotate. The code in the new plugin is more optimized than the original. And, not only did I enhance the existing functionality, I added 4-5 additional image rotation options. Lastly, one of the major reasons that I decided to create a new plugin is that I am working on a Drupal module based upon the plugin and so I changed the code so that the Drupal module could easily interact with it – so the naming convention for many of the styles is more verbose than the original imBannerRotater plugin.

Continue reading →

Share

jQuery: Dynamic Form Creation/Submission – IE8 Bug

Ajax, JQuery
Jun27

I noticed a problem with IE8 today. I dynamically created a form and submitted it with jQuery. The form did not submit in IE8, but worked in all the other browsers that were tested (Firefox, Chrome, Safari). The code is quite simple:

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var id = jQuery('#product_id').val();
	jQuery('#content').append(
		jQuery('<form></form').attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
			jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	));
});

Again, this worked fine in other browsers. Upon further inspection, I found that the IE8 seemed to strip the quotes from around the form attributes:

?View Code HTML
<form name=frmReturnToProductPages id=frmReturnToProductPages action=/provisioning/product-pages />

To fix the problem, I decided to add the form attributes after appending the form to the page.

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var frm = jQuery('<form></form>').appendTo(jQuery('#content'));
	jQuery(frm).attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
		jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	).submit();
});

I tested this with the IE8 developer tools and the form submitted successfully. Enjoy.

Share

jQuery Plugin: imMultiLineList – A Multi-Line ListBox plugin.

Ajax, JQuery, plugins
Dec29

I have been working on a project where I needed a ListBox that displays multiple lines of information per row. The user must select from a list of offices, but many of the office names are the same and the only way to distinguish one office from the other is by the office address. Because a ListBox does not allow multiple lines in each row, I decided to create the imMultiLineList jQuery plugin. This plugin will turn any div into a multi-line multi-select list. And because I need to interact with the plugin, I decided to create it using an Object Oriented approach.

The imMultiLIneList plugin is fairly simple to use. Multiple items can be added to the list ajaxally using a JSON object, but the plugin will also allow single items to be manually added.

Continue reading →

Share

gpDojoGallery: A Dojo Photo Gallery Widget

Ajax, Dojo, dojo-widgets
Jul27

I added a new photo gallery to galleries.digitalvilliage.com. I created the Photo Gallery widget using Dojo Toolkit about a year ago for a project that I have been working on. I recently updated to give it more options than I needed for my project.

The gpDojoGallery widget can be set to display thumbnail images in the center, left, right, top, or bottom of the page. When the thumbnails are set to the center position, the dojox.image.Lightbox module can be used to display the large image.

The widget receives a JSON object that contains the image information (location, width, height, etc). I store the information using dojo.data.ItemFileReadStore, so it was easy to add a pics-per-page option just be limiting the number items to be read within the store.

?View Code JAVASCRIPT
if (this.picsPerPage) {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery, start: 0, count: this.picsPerPage});
}  else {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery});
}

The gpDojoGallery widget was fairly simple to create, but it has enough options to be a very versatile photo gallery. You can view demos on my digitalvilliage.com site. The widget (and demos) can be downloaded from GitHub.

Share

gpDojoPortfolio: A Dojo Portfolio Widget

Ajax, Dojo, dojo-widgets
Jul20

I’m working on a new project that uses Dojo Toolkit and DJango. I haven’t started on the DJango back-end yet because I first need to create a few Dojo widgets. The first widget that I created is gpDojoPortfolio. As the name suggests, this widget will display a portfolio. Each item in the portfolio slides into view using the dojo.fx module.

Continue reading →

Share

ui.imFeedBack – A JQuery UI Feedback Widget

Ajax, JQuery, UI Widgets
Jul05

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Continue reading →

Share