How to update jQuery Mobile in Dreamweaver CS6

Adobe_Dreamweaver_CS6_IconSince the release of Adobe’s Dreamweaver CS6 the jQuery and jQuery Mobile libraries have been updated. This means that when you create a new Mobile Starter page, you’ll get outdated libraries by default.

With a bit of hacking we can change this to the most current version though. Let me show you how it worked for me – many thanks to Greg’s article on how to do this in Dreamweaver CS5.5.

Why would I want to upgrade?

jQuery mobile was great even in beta, and it was great in its release of Dreamweaver CS6 (which shipped with version 1.0). Many visual effects have been improved, the page transition effects look a lot smoother, and god knows how many other improvements there have been over the last 6 months.

It’s a strength of Dreamweaver to be able to adapt to such change – keep an eye out for future releases of the libraries, it’s a fast paced world out there.

Let’s get started

Dreamweaver CS6 stores its libraries in a folder called Third Party Source Code which on a Mac you’ll find under

Notice the folder called jquery-mobile. I suggest you leave it there and copy the new libraries into a new folder in the same location. I’ll call mine jquery-mobile-1.2.0 (the current version at the time of writing). Grab the latest minified version from

You’ll also need a new copy of jQuery because jQuery Mobile relies on the jQuery library. Grab it from here:

BEWARE: the latest stable jQuery release is often not compatible with the latest jQuery Mobile release! At the time of writing, the latest jQuery is 1.9.0 – but the version that’s COMPATIBLE with jQuery Mobile 1.2.0 is jQuery 1.8.2.

I know this is confusing… that’s why I thought I’d take some notes. Here’s a list of files that I have in place now:

Screen Shot 2013-01-25 at 23.48.36

Amending the Dreamweaver Page Templates

Once you’ve got a copy of all fresh libraries in the right location you need to amend the Mobile Starter templates Dreamweaver provides. Those are in

There are three templates here in a folder called Mobile Starters, two for pages including local libraries, and one with links to the CDN versions:

Screen Shot 2013-01-25 at 23.48.19

Open the two local files and amend the links so that they point to your new libraries. You can do the same with the CDN template of course.

Once they’re saved, you can create a new Mobile Starter page just as before and make use of all the updated jQuery Mobile goodness.

Yikes – now all my jQuery Icons are gone ;-(

Yes that is unfortunate. The reason for this is that Dreamweaver used to have them in the same  directory as jQuery Mobile was living – however jQuery Mobile now has data icons in a separate folder called images (see above). So jQuery expects those images to be in a folder called “images”, but Dreamweaver CS6 copies them into the jquery-mobile folder (without a subfolder).

Since I really don’t know how to teach Dreamweaver how to do this, the easiest thing is to just manually create an images folder  and move the files across. Then all is good again with the world.

Happy hacking!

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

24 thoughts on “How to update jQuery Mobile in Dreamweaver CS6

  1. This is all great information but can you be a little more descriptive at the end. I have the problem when I open up the jQuery mobile swatches it shows no themes. You say to manually create an image folder and move the files across. I don’t know what you mean by move the files “across”.

    1. I just figured out the issue with no themes or icons showing up in the jquery mobile swatches panel. After and assuming you updated the files properly you must go to the jQuerySwatch file located in the configuration file and update the html file. Look for the line that refers to the jQuery library and update with the version you just updated ie: Third Party Source Code/jquery-mobile/jquery-1.8.2.min.js” to Third Party Source Code/jquery-mobile/jquery-1.9.0.min.js”.

    2. Hi Matt,

      glad it’s all worked out for you. I think I’ve spotted my mistake there, I hadn’t changed all the references that I should have. Like you said, it’s all working fine now, including the swatches.

  2. Great tutorial… It works nicely for when you create a new page from sample. Do you know how to fix the insert->jQuery mobile->Page so that it knows about the updated scripts as well? When I use that, it still references the old version 1.0 scripts.

    Dave

  3. Thank you for the tutorial. I have been putting this off for a few months and decided to tackle it. Your tutorial made it easy.

    Like Dave, I am also not seeing the updates and still see ref to old 1.0 scripts/css. Restarted and still the same. Anyone else had this problem and solved?

    Thanks again.

    1. Terry, how are you creating a new jQuery Mobile page? I start from fresh (ie File – New – Page from Sample – Mobile Starters – jQuery Mobile (local or CDN)). Now I get a HTML page with the correctly referenced files for the new version. You can add more “pages” by going to Insert – jQuery Mobile – Page (Dreamweaver will place the code inside the existing file for a new page).

      However if you’ve already got a standard HTML page (without jQuery references in the head) and try to use that option, you’ll be presented with a dialogue that offers to add those references, pointing to the old version. I’m not sure where DW saves those I’m afraid. But then, I’ve never had to use this option, as usually the jQuery references are setup already.

      1. Thanks for replying Jay.

        I made the changes as tutorial shows. Then go to file->new-page from sample->mobile starters and then no matter which version I choose still see ref to old versions.

        Beats me what is up. I have tripled verified that the .htm files have really been changed but still see ref to old versions.

        Thought maybe there was some type of cache but did not find anything. See other people having same issue after searching Google, so maybe I have not totally lost it, lol.

        I shall not give up and when found will share here. Betting it is something so simple will be embarrassed:)

        Thanks again for your help.

        Terry

        1. That is bizarre indeed… I’m sure you haven’t lost it 😉

          Are you on Mac or Windows? I’ve tested this on a Mac and it worked fine – but I haven’t tested it on a Windows. Maybe that explains it?

        2. I am old, old school and on Windows so that may explain the whole thing.

          Going to try on a Windows laptop in day or two and see if same thing happens. If so we can then darn near say it is a Windows thing,

          Thank you Jay,

          Terry

  4. Had responded to your question about mac or win and either did not submit or something else happened.

    I am on win.

    Still have not found a solution but after reading around I am not alone. Seems to be a common problem. There must be some hidden area in win machines, lol.

    For the life of me I cannot understand why the adobe folks would not make it simple to upgrade jquery. Seems it would be a very simple process to build-in.

    Thanks again Jay for your help,

    Terry

  5. i cant seem to save over the builtin folder files. its in Read only mode. I’ve tried changing permissions and nothing is working. Am I doing something wrong? I am on a windows machine.

    1. Hi Mary,

      sadly I can’t speak for Windows – I’ve only tried this on Mac. But I agree – it sounds like a file permission problem. You can usually tweak those in Windows by right-clicking on the culprit and selecting Properties (you may need Admin privileges to make them writeable). Good luck!

    2. I’m a Windows user too. You need to save the .htm files to a non-system folder (e.g. your desktop) first, then paste over the files in C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Mobile Starters. You will then see a prompt asking you to allow administrator access in order to overwrite the files 🙂

  6. WHAT ABOUT FOR WINDOWS ?

    PLEASE HELP IN GREAT PROBLEM AS I AM UNABLE TO USE PANEL IN DREAMWEAVER CS6 USING EITHER CDN OR LOCAL……………………….

    1. Pass I’m afraid – the last version of Dreamweaver I used was CS4 many years ago, and jquery was not part of that release. Sorry 🙁

    1. You may have to ask the jQuery community about that. I imagine that because it’s a JavaScript library, jQuery isn’t called via HTML, and hence no HTML files are part of the library. A PHP library for example would also not necessarily include HTML files.

    2. Jquery is not HTML. It only “expands” HTML so it can do other things and in this case assist you in building mobile ready sites.

Add your voice!