Home » Featured » Add/Remove Fields Dynamically in jQuery Mobile, Disable Buttons Once Max/Min Reached
Add/Remove Fields Dynamically in jQuery Mobile, Disable Buttons Once Max/Min Reached

Add/Remove Fields Dynamically in jQuery Mobile, Disable Buttons Once Max/Min Reached

I’m in the process of writing a mobile app using PhoneGap and jQuery Mobile.

I’ve done responsive sites for mobile before, but I wanted to try using jQuery Mobile, since it seemed (hah!) to make it so easy to deploy an app that looks native even though it’s really all HTML, CSS and javascript.

In retrospect, it may have been more trouble than it’s worth, with hours and hours spent chasing down undocumented features and bugs, but overall I don’t regret mucking around with it, and I do think it’s pretty cool.

Because I wanted this app to work offline, I’m handling everything through javascript and local database functionality. It will eventually have a web service, but more for syncing than anything else. That means each click in the interface is loading divs that look like screens, even though they all live in the same HTML page.

Because mobile interfaces are small, I wanted to give the user the option to add additional fields without cluttering up the screen real estate for those that didn’t. So, that meant I had to present one field, and then give the user the controls (a plus symbol, an “add more fields” button, etc) to add more. If they hit the add button too many times by accident, I wanted to give them a way to remove extra fields as well. And finally, I wanted to limit the number of fields they could add and provide them with some helpful feedback by changing the text on the (disabled) “add” button once they’ve hit the limit.

This is a modification on Charlie Griefer’s post on how to add and remove fields dynamically using jQuery.

That tutorial is great for straight jQuery, but it doesn’t work for jQuery Mobile, since jQuery Mobile does all kinds of kooky styling in order to give you the easy mobile-esque design.

The problem was that standard jQuery disabling/class manipulations wasn’t working because JQM does some DOM element rewriting to add all of the sexy styles, so it needs a JQM-friendly way to say that a button is disabled. The JQM docs say that “All jQuery Mobile widgets can be disabled in the markup by adding the standard disabled attribute to the element, just like you would with native controls.” With all due respect, I have not found this to be true.

Things that didn’t work:

  • $(‘#btnAdd’).attr(‘disabled’,’disabled’);
  • $(‘#btnAdd’).attr(‘disabled’,’true’);
  • $(‘#btnAdd’).attr(‘disabled’,’false’);
  • $(‘#btnAdd’).removeAttr(‘disabled’);
  • $(‘#btnAdd’).addClass(‘ui-disabled’);
  • $(‘#btnAdd’).removeAttr(‘disabled’);

What finally DID work:

  • $(‘#btnAdd’).removeAttr(‘disabled’).button(‘enable’);
  • $(‘#btnAdd’ ).attr(‘disabled’, ‘disabled’).button(‘disable’);

I also added in the ability to change the text on the add button once the limit has been reached.

This script requires jQuery Mobile and jQuery, of course. This version was tested with JQM 1.0, and jQuery 1.6.4. In my implementation, I am also using PhoneGap 1.2.0, but that shouldn’t matter here.

The code is below, and it’s up on Github if you’ like to fork it, or you can clone it here:

git clone git://gist.github.com/1925906.git gist-1925906

 

Advertisement

Graphic River

Advertisement

Net Tuts

flattr this!

About Alison Gianotto (snipe)

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist, and the CTO at Mass Mosaic in New York City. Tweet at me @snipeyhead or read more...
  • Nathan

    Hi

    I am quite a novice when it comes to jQuery, so please forgive my stupid questions. This is briliant and seems to be exactly what I am looking for. However the form I need to duplicate has 10 different input fields to be duplicated. As soon as I use more than 5 inputs the “add name” functionality stops working. Where am I going wrong here? Any help you could give me would be greatly appreciated.

    • http://www.snipe.net snipe

      This is simply because the hard-coded limit is set to 5 for the example. Look for:

      // business rule: limit the number of fields to 5

      in the code. And then just below it in:

      if (newNum == 5) {

      Change the 5 to whatever number you want to cap at.

  • Ericka

    Thank you so much I was JUST about to walk through each step of the code in JQuery to modify for use with JQMobile. You just saved me a lot of time! Thanks for your support!

    Cheers!

    E