Thu
19
May '11

Updating jQuery and jQuery Mobile in Dreamweaver CS5.5

Holy Javascript Libraries, Batman! In case you’re keeping score, Adobe began shipping Dreamweaver CS5.5 less than two weeks ago with support for jQuery and jQuery Mobile. But, the versions included in Dreamweaver, jQuery 1.5 and jQuery Mobile 1.0a3, are already out of date! Because before you could even get your copy installed, the jQuery team released a significant upgrade to the core jQuery library – version 1.6. Along the way, the jQuery Mobile framework has also been updated to version 1.0a4, which includes several important bug fixes. So, if you are a Dreamweaver user and you want to develop jQuery Mobile sites and applications with these updated versions of the libraries, what are you supposed to do? Update your libraries, of course… here’s how…

Before proceeding, you’ll obviously want to go grab the updated libraries themselves. For the core jQuery library, I suggest using the minified version. Because images are also part of jQuery Mobile, I recommend grabbing the zipped version of the framework. After you download and unzip the folder, you’ll find a full version of the css and js files. I recommend using the minified versions, so go ahead and delete the full versions of the files (ie, they don’t have “.min” in their names).

Arguably one of the most powerful features of Dreamweaver is its extensibility. In fact, the application itself is built around the very technologies that it itself writes, namely HTML, CSS and Javascript. All of these pieces are located in the Configuration folder that you can find where Dreamweaver is installed on your computer. For me, since I’m a Mac user, it’s at Applications>Adobe Dreamweaver CS5.5>Configuration. There are tons of other folders in the Configuration folder, but the one that holds the files that we are interested in is the Third Party Source Code folder.

Inside this folder, you’ll find the jquery-mobile folder. If you want to backup the folder, feel free. None of the sites that you have worked on previously are reliant on these files, as Dreamweaver makes a local copy in each site you create (if you are not using the CDN versions of the Mobile Starter Pages – which we will talk about later). Replace the two jquery-mobile files (css and js) with your newly downloaded files. Replace the entire images folder as well. Finally, replace the jquery-1.5.min.js file with your jquery-1.6.1.min.js file (or whatever you named it).

One last step and your update is complete. When you choose to create a new file from the New Document dialog, Dreamweaver makes a copy of the selected file from the Configuration folder and places it in your site file. The Mobile Starter layouts (New Document > Page from Sample > Mobile Starters) are located in Configuration > BuiltIn > Mobile Starters. There are 3 pages – two of which reference the files that you have now deleted, jQueryMobileLocalMultiPage.htm and jQueryMobilePhoneGapMultiPage.htm.

Open each of these files in Dreamweaver. You’ll see in the head of the document links to the two old jQuery Javascript files and the old CSS file. Simply update these links to point to your new files and save the document. Test that everything worked properly by closing the file, then creating a new page from the Sample that you just changed. Make sure to save the file into a site to make sure that Dreamweaver copies the proper files into the site.

Finally, if you want to change the CDN version, it points to the jquery repository online, simply update jQueryMobileMultiPage.htm to point to the location of the CDN versions of the files.

Happy mobile coding!

45 Comments »

45 Responses to “Updating jQuery and jQuery Mobile in Dreamweaver CS5.5”

  1. Joe Marini Says:

    Man, I wonder who the total stud was that built out Dreamweaver extensibility.

  2. Greg Says:

    Stud? I heard he was more of a tool! :-P

  3. Alex Begg Says:

    Right now, there is already a jQuery 1.6.1, this article only mentions jQuery 1.6. Maybe it would be better to link to the a page on the jQuery website where they can download the minified version, instead of linking directly to the javascript file?

  4. Alex Begg Says:

    Excuse me, correction. You did mention jquery-1.6.1.min.js in the article (4th paragraph), but in the second paragraph you are instead linking directly to jquery-1.6.min.js

  5. Dave Black Says:

    I mostly went to the University of Greg Rewis! -Thanks a lot.

  6. Christian Zumbrunnen1 Says:

    Thanks for this info. I just found out, that in the dialog, that appears, if one inserts a jQuery page into a document (from the panel) there is a possibility to change the source of the folder where the jQuery files are loaded.

  7. Raymond Camden Says:

    So I just tried this. When I made a new site, it didn’t copy the files over. It referenced them via a file. Technically it still works, but it should have copied them into the site, right?

  8. Raymond Camden Says:

    Sorry – ignore me. I had to save it to the site first. Duh.

  9. Anselm H. Says:

    Hi,

    what exactly is the difference between the DWCS5.5/Configurations and the DWCS5.5/de-DE/Configurations settings?
    Where’s the priority set? Or do I need to update both of them every time?

  10. Greg Says:

    The files in de-DE are just language specific items and do not contain anything that you manually need to update.

  11. David Hill Says:

    Hmmmmm … I just followed your directive exactly and when I create a new “local” page and save, all of the new files go over just fine, but when I change themes or navigate, the “back” button is not there. I wonder what I am doing wrong? Any ideas? By the way, your directions are perfectly clear, so that is not the issue. Thanks in advance.

  12. David Hill Says:

    PS: themes seem to have no effect with the new files. Thanks again.

  13. Greg Says:

    Apparently the jQuery Mobile team has “removed” the default Back button. The reasoning that I received was “your browser already has a back button”. Of course, if you are using jQuery Mobile in connection with PhoneGap to build a native app, you’ll NEED a back button. Thankfully, this is easy to implement (although perhaps worthy of a blog post): http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/docs-headers.html

  14. David Hill Says:

    You are wonderful … thanks for the quick reply. I thought I was doing something wrong! Bottom line though: I LOVE jQuery Mobile.

  15. Ignacio Galdames Says:

    so, i guess that every time there is an update y should dig in into dreamweaver cs5.5? or is there a way of.. i dont know.. simply updating the app or updating an extension or so?

    greetings, nice max 2011 from mobile to web app in 60 sec presentation.

  16. Paris Says:

    Brilliant, many thanks for posting. Quick, easy and worked perfectly. And thanks for the Back button post. New to jquery and the info was just what I needed, even though I didn’t know it. Now back to DW, but first a beer.

  17. Ambros Says:

    Hello, i can`t save the files jQueryMobileLocalMultiPage.htm in Dreamweaver. It is write protect i think. I can`t delete the write protect from the folder.

    What can i do? Thank you!

  18. adhi Says:

    Hi,
    thanks lots its work :)
    i try to use dreamweaver+phonegap+jqmobile
    but app performance so slow, very slow ..
    can you advice me?

    regards

  19. Peter Andreas Says:

    This has become a note to self… forget about Google when it comes to navigating the oddities of DreamWeaver… just head straight to the “Garbage Dumb aka. AssortedGarbage” and pick up the solution…

    You are one and you do it: ROCK !

  20. Mario Says:

    Hi Greg,

    Really enjoyed your presentation and Stephanie’s at the New Web meeting the other week! Thanks for the config tips. I was wondering what to do since they just rolled out jquery mobile 1.0.

    How about the phonegap.js? They’re up to 1.2.0. I looked to see if it had a version number inside the code. I could just swap it out but I don’t know if that’ll create problems compiling. Any advice?

  21. Mikel Says:

    Thanks for this post, it is very helpful!

    Any idea if it is the ~same~ sort of process to update Phonegap?

  22. Dean Says:

    A little off the jQuery topic but still relevant to extensions. Any idea of when or how the Phonegap integration with Phonegap 1.2 and latest Xcode will be fixed? At present I can’t get past Dreamweaver and get a successful build and emulate for either Android or iOS (although I have found something to try for Android which I will do shortly).

    Thanks

  23. Yatrik Says:

    hey, you need to check your website on Chrome 16.0.*. It is missing background colour and can’t read anything :(

  24. Nathan Says:

    Hi,

    Also cannot save over the jQueryMobileLocalMultiPage.htm files. Tried changing permissions / read only etc. but got nowhere – am I being stupid?

  25. Nathan Says:

    Nevermind – just realised I had to change the code within the COPIES of the htm files – not the originals…

    Thanks for the info.

    P.S. The Background behind this post (that enables you to see the text) is not shown in IE9.

  26. Andrew W Says:

    I’ve updated jQuery, jQuery mobile, and PhoneGap to their latest versions (as of this writing jQuery 1.7.1 and jQuery-Mobile 1.0 and PhoneGap 1.3.0) however there seems to be a conflict somewhere.
    I create a new PhoneGap app from a template and when I go to input a jQuery Mobile slider, the slider does not respond to any mouse/keyboard input. I commented out each of the lines in the new document and it fixes the sliding but then loses the theme in the mobile-1.0.css file so there must be a conflict between the two files. Any ideas how to fix this issue?

  27. Andrew W Says:

    As a test, I reverted to the jQuery and jQuery Mobile js/css files that were initially installed with Dreamweaver and it seems to have fixed the issue so there’s clearly a conflict between the two files when updating them.

  28. Max Says:

    These versions are out of date.

    Latest stable version (all files):
    http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.zip

  29. Trevor T Says:

    JQuery Mobile 1.0 is only tested against JQuery 1.6.4. JQuery 1.7.x will be supported in JQuery Mobile 1.1. I don’t believe PhoneGap has any dependencies with JQuery or JQuery Mobile, so you should be ok with it, but you never know until you test.

  30. Sascha K Says:

    If have an update for your great tutorial, not sure anybody already mentioned this in the comments. Also i’m not sure if this aplies also to CS5.5, because i use CS6.
    Here it is: If you use a localized version of Dreamweaver, you also have to update the files in the Configuration folder (both Third Party Source Code and BuiltIn) in your “Country Code Folder”. For Germany/German this is de_DE. Otherwise the templates won’t update.

  31. Neil F Says:

    I have updated my Dreamweaver CS6 to jquery 1.7.2 and jquery mobile to 1.1.1. Following all the great directions above, it updated without a hitch and corrected many bugs I found after deploying my app. One big problem remains. The new Jquery Mobile Swatches dialog which worked great in 1.6.4 and 1.0 no longer works. Any help would be greatly appreciated.

  32. Mike Ferrari Says:

    Excellent work my fellow internetter! You shall be rewarded…tomorrow!

    Thank you.

  33. Mike Ferrari Says:

    CS5.5
    Windows XP
    US ENGLISH

    Yes Sascha K., thanks for pointing this out on May 9th, 2012 at 1:30 am. We do have to update multiple locations on the files.

    I had to replace the files here:
    C:\Documents and Settings\Mike\Application Data\Adobe\Dreamweaver CS5.5\en_US\Configuration\Third Party Source Code\jquery-mobile

    and I had to update the template files here:

    C:\Documents and Settings\Mike.BLUESKY\Application Data\Adobe\Dreamweaver CS5.5\en_US\Configuration\BuiltIn\Mobile Starters

    After that, works perfectly.

  34. anil Says:

    Any tools are their to develop html5 mobile pages,
    Just like Drag and drop
    plz tell me the tools

  35. Takfly Says:

    Cheers, this worked a treat.. Ignore the DOUCHE BAGS that can’t wait to pounce on anything on the net with their “recommendations”… Some people are more interested in criticising other peoples work than making any real effort themselves.

    Again nice work and thank you!

  36. David Norris Says:

    Neil – I had the same issue with the Swatches but I found the fix. In addition to the instructions above you must also update the file JQuerySwatch.html located in C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\jQuerySwatch\. Look for the line that refers to the jQuery library and update as follows – script src=”../Third Party Source Code/jquery-mobile/jquery-1.8.2.min.js”.

    Refresh the swatch and your swatches should be back.

  37. Young K Says:

    Brilliant. It just hit the spot. Thanks for the info.

  38. Ian Says:

    Been having a lot of problems updating the Dreamweaver CS6 this morning as I couldn’t find a jquery-1.8.2.min.js file to put into the Third Party Source file – none of the downloads included it (am I being dense here?) so resolved it by linking to the file at jquerymobile -

    “http://code.jquery.com/jquery-1.8.2.min.js”

    Couldn’t think of anything else to do, if anyone can tell me another way I’d be grateful

    Ian

  39. Ian Says:

    Not to worry – got it from the query site

  40. wmwerner Says:

    Thank you for this !
    There should be any advise like this in DW-Help.

    Maybe a Tool? – Because Windows 7 makes problems changing certain config.files

  41. How to update jQuery Mobile in Dreamweaver CS6 — The WP Guru Says:

    [...] 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 [...]

  42. Amy Says:

    I am new to jquery. I really like your work. I think some of the information in this blog might be outdated can you confirm? If so can you please update it accordingly. I really do need the information and would be most thankful to you for doing so. Thanks so much
    Have a happy day.

  43. Dave Says:

    This works great for when you create a page from the mobile samples. But, how do you fix it so that the insert->jQuery Mobile->Page uses the updated scripts as well? When I try it, the dialog box that pops up still refers to the older scripts.

  44. Ohm Says:

    I just update to jquery mobile 1.3.2.min.css

    When i saved file from Dreamweaver it say

    The file ‘data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==’ does not exist so it can not be copied

    How to fix this?

  45. Ashish Pandey Says:

    Hi..
    I have updated my jquery mobile files as per the steps you gave..
    it got updated successfully..
    but..
    now i face a small problem..
    there used to come icons when i was using older version of jquery mobile but after updating i dont see any icons..
    can you help me out with this issue..
    thanx a lot..

Leave a Reply