Spry vs jQuery template

hi all!
i'm starting up a new project where i have to manage lots of json data.
currently, i'm an happy user of Spry, but i'm worried for its future.
so, i'm reading about javascript frameworks template and i found 2 or 3 that look very good: pure, jquery-tmpl, backbone, jqote, mustache...
for a new project, would you use a template engine based on jQuery (and which...), or Spry?
many thanks! :-)
Rob

And If you asked this question on the jQuery forums.. they would say jQuery!
So it all drills down the what you need right now. If you need to use allot data, sort, filter, parse different data formats I would say Spry..
If you are just doing simple templating.. Mustache {{{ <-- triple mustache.
And If you are already jQuery inside your project and need simple templating.. jQuery

Similar Messages

Can't add spry in a template-based page

Hi,
I am working with DW CS3 and building content for a page created from a template. I made sure i clicked in editable place before inserting the spry
but DW keeps feeding back an error message asking to unlock the head tag or adding the spry directly in the template (which i dont want).
How do i unlock the head tag? How would the change affect the template? Is there a possible way around (in case it's any risky)?
Thank you

Lemme rephrase more appropriatly: Is it a safe operation to unlock the head tag in a template?
Then the last but not least question: how do i unlock the head tag.
Thanks

How to use Spry and Jquery on the same page.

I'm using both spry (dataset) and jquery (datepicker) on my page. When I load the jquery script my dataset doesn't work.
I've done some research and found that I need to insert an observer that tells jquery when the spry dataset is finished loading. Found this information at: http://forums.adobe.com/message/2899897. I've tried implementing this into my script but just doesn't seem to work. Below is the script from my site, how would I insert an observer into this script?
<script type="text/javascript">

</script>

Please post any SPRY related question in the SPRY forum.

Spry Accordion(or Template?) error

I did some validation to one of several pages that occasionally have problems when I update the Master template page to my site(they look like this: http://njsustainingfarms.rutgers.edu/agclass1.html) , and the one error I got was for something in my spry accordion menu(which seems to be working fine):
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
It's telling my contentA is null.
Now, I know next to nothing about javascript, so I am pretty much stumped on how to resolve this.
The one other thing I should note is that in design view, it shows that I have a duplicate head region(which is also editable except for the tags), but that is not so in the master template page.
Any help would be much appreciated, as i've been battling with this issue for some time, and i'd like to try to figure it out once and for all.
P.S.- I'd offer to attach the .dwt file, but I can't seem to find out how to do that on this forum.

codeOutsideHTMLIsLocked="false" -->
That says that anything outside of that area can't be modified, right?
Nope. It says anything outside that area is editable, i.e., it's treated as an editable region. This is the default behavior for a DW template and it allows you to place server scripting or javascript code above the <html> tag, or below the </html> tag in any child page.
Unless you are using server scripting, or are very advanced in your use of DW, you should never mess with this default setting.

Spry menu & jquery tweak

Hi!
I have two items I need help tweaking.
1) the page has the jQuery portfolio, and for some reason, just by having this inserted on the page has "blocked" my spry menu drop down for the portfolio links within.
2) I've repeated the jQuery gallery twice on the same page so as to compartmentalize different works...the ability to choose how to view the portfolio samples is not working on the second one, but works for the top one. Don't know why when the exact script has been duplicated?
Can you please help me address these issues so that I may tweak accordingly? Thank you!
http://c2cstudios.com/c2cstudios_11/illustration/index.html

The following is an example of placing two ad-gallery widgets in the one document.
<!DOCTYPE HTML>
<html>
<head>
<link href="jquery.ad-gallery.css" rel="stylesheet">
<style type="text/css">
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    color: #333;
    line-height: 140%;
select, input, textarea {
    font-size: 1em;
body {
    padding: 30px;
    font-size: 70%;
    width: 800px;
h2 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px dotted #dedede;
h3 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
.example {
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
ul {
    list-style-image:url(../jquery.ad-gallery.1.2.4/list-style.gif);
pre {
    font-family: "Lucida Console", "Courier New", Verdana;
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
code {
    font-family: "Lucida Console", "Courier New", Verdana;
    margin: 0;
    padding: 0;
#gallery, #gallery2 {
    padding: 30px;
    background: #e1eef5;
#descriptions, #descriptions2 {
    position: relative;
    height: 50px;
    background: #EEE;
    margin-top: 10px;
    width: 640px;
    padding: 10px;
    overflow: hidden;
     #descriptions .ad-image-description, #descriptions2 .ad-image-description {
          position: absolute;
     #descriptions .ad-image-description .ad-description-title, #descriptions2 .ad-image-description .ad-description-title {
          display: block;
</style>
<title>A demo of AD Gallery - Coffeescripter.com</title>
</head>
<body>
<div id="container">
    <div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/1.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t1.jpg" title="apolo ohno" class="image0">
              </a>
            </li>
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/2.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t2.jpg" title="simone" class="image1">
              </a>
            </li>
         </ul>
        </div>
      </div>
    </div>
    <div id="descriptions"></div>
    <p>Examples of how you can alter the behaviour on the fly;
    Effect: <select id="switch-effect">
      <option value="slide-hori">Slide horizontal</option>
      <option value="slide-vert">Slide vertical</option>
      <option value="resize">Shrink/grow</option>
      <option value="fade">Fade</option>
      <option value="">None</option>
    </select><br>
    </p>
    <div id="gallery2" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/1.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t1.jpg" title="apolo ohno" class="image0">
              </a>
            </li>
            <li>
              <a href="http://c2cstudios.com/c2cstudios_11/jquery/images/2.jpg">
                <img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t2.jpg" title="simone" class="image1">
              </a>
            </li>
         </ul>
        </div>
      </div>
    </div>
    <div id="descriptions2"></div>
    <p>Examples of how you can alter the behaviour on the fly;
    Effect: <select id="switch-effect2">
      <option value="slide-hori">Slide horizontal</option>
      <option value="slide-vert">Slide vertical</option>
      <option value="resize">Shrink/grow</option>
      <option value="fade">Fade</option>
      <option value="">None</option>
    </select><br>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.ad-gallery.js"></script>
<script>
$(function() {
          var galleries = $('#gallery.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
          var galleries2 = $('#gallery2.ad-gallery').adGallery();
    $('#switch-effect2').change(
      function() {
        galleries2[0].settings.effect = $(this).val();
        return false;
</script>
</body>
</html>
Notice that the ID's for the second widget have changed as well as a second constructor and the addition of style rules for the extra ID's. Note also that the selector has changed to target the relevant gallery with the addition of #gallery and #gallery2
Gramps

Spry Menu w/ templates or library items

I LOVE the new spry menu, but I'm frustrated with how to
insert an existing menu onto subsequent pages. I tried to add the
menu to the library but that didn't seem to work. Should I use a
template instead? I can't seem to find documentation on this...am I
missing something? Any advice?

Not sure what that is...tried to look it up in the help
file...is it this?
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
If so, how do I attach it? Also, how do I edit once it's a
library item? I seem to lose that lovely spry interface in the
property manager.
If there is any documentation that you could point me to I'd
be grateful. I'm afraid I'm not finding it.

Spry vs jQuery

I just watched the "Taming the Web" video from 01/12/09 which discusses some jQuery widgets. They look very similar to Spry widgets. What are the advantages / disadvantages of each?

The advantage of many Spry widgets is that they are integrated into Dreamweaver, and Dreamweaver makes it relatively easy to edit them in Design view and the Property inspector.
The advantage of jQuery is that there's a huge community of users, so there are a lot more widgets available. Also many more people have learned to write jQuery, so it's probably easier to get help. The disadvantage of jQuery is that it's harder to visualize what a jQuery widget looks like, except by using Live View or previewing in a browser. Also, with so many people creating stuff in jQuery, it's difficult to tell the good from the bad.

Get generated rows by Spry with jQuery

i have a spry region like this
<table class="widget-elenco">
<tr spry:repeat="pv" spry:even="even" spry:odd="odd">
   <td>{soggetto_id}</td>
   <td>{codice_fiscale}</td>
   <td>{partita_iva}</td>
</tr>
</table>
the problem: i cant' get the generated rows by spry:repeat with jquery
i try with an observer, something like this
var myObserver = function(nType, notifier, data){
if (nType == 'onPostLoad') {
    $(function(){
      $('table.widget-elenco tr').each(function() {
        doSomething()
ds.addObserver(myObserver);
but this not woks :-/
i can to change "onPostLoad" to "onPreLoad" or "onDataChanged"
without solutions :-/
any idea?
many thanks!
Rob

hi gramps :-)
thanks for your reply!
here:
http://qubica.in/manager/soggetti/index.cfm
simple: i would "remove" the anti-estetic "onmouseover/onmouser" function added on a single <tr> for replace with a jquery function:
$(function(){
    $('table.widget-elenco tbody tr').mouseover(function() {
        $(this).addClass('ui-state-highlight');
     }).mouseout(function() {
        $(this).removeClass('ui-state-highlight');
yes, this is not a so important problem... :-) but, in general, the *REAL* question is "how do i get generated rows... using jQuery selector?"
something lijke this:
$(function(){
$('ELEMENTS-IN-SPRY-REGION').each(function() {
    doSomethings();
thanks!
Rob

Spry Menu Bars, Templates and Current Page Indicators

Hello,
If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
Thanks,
Ferg.

Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
First we write a function to initialse the page
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
Next we nee a trigger to activate the function. This is done with a load listener as per
Spry.Utils.addLoadListener(InitPage);
Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
<script src="SpryAssets/SpryDOMUtils.js"></script>
The whole thing will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
Gramps

Using Spry in Templates - please help!

I am trying to use Spry in templates (Dreamweaver CS4) and
cannot do it. Can someone please help me? I know that I can put the
spry widget inthe template but then it will be on every child page
which I don't want. I'm not sure I understand the instructions to
open the head...
-Josh

> I dont understand about opening a head...
I think it has something to do with transcendental
meditation....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"GPaul" <[email protected]> wrote in message
news:glf037$ae7$[email protected]..
> Im not sure I understand your question, however if you
dont want something
> in every child page of a template, then you put it in an
editable section
> on the child pages you do watn, or make that section
editable and take out
> on the pages that you dont want it on.
>
> I dont understand about opening a head...
>
>
> "jl25" <[email protected]> wrote in
message
> news:gldsbb$79$[email protected]..
>>I am trying to use Spry in templates (Dreamweaver
CS4) and cannot do it.
>>Can
>> someone please help me? I know that I can put the
spry widget inthe
>> template
>> but then it will be on every child page which I
don't want. I'm not sure
>> I
>> understand the instructions to open the head...
>>
>> -Josh
>>
>
>

Using jQuery plugin with spry framework

I am trying to integrate jQuery countdown plugin to my old spry pages:
http://keith-wood.name/countdown.html
However, it seems that spry kills jQuery plugin.
I am sure the jQuery countdown plugin works well without loading spry js.
Please tell me hot to use both spry and jQuery on the same page.
Thanks

It is quite possible that the two will clash.
But I have a problem in helping you because the page that you quoted does not contain Spry nor is there a Spry.js file.
Please explain what it is that you want to do.
Gramps

JQuery Mobile template: Error Loading Page

Hello Apex community,
My name is Robert and this my first post on this forum. I've been developing with Oracle Apex for over a year now.
I've recently started developing for mobile devices with Oracle Apex 4.2.
However i stumble on serveral problems including the one I will describe here:
The problem is best described by this screenshot:
[ http://roberthantink.com/img/Error_loading_page.JPG]
Whenever I log into my JQuery template based application which uses 'Application Express Accounts' as authentication.
I get the following Error: "Error Loading Page".
When inspecting with a development tool I only get this warning:
"The page at https://apex***********.com/nbb/f?p=100:LOGIN_JQM_SMARTPHONE:5788626446201 displayed insecure content from http://apex*******.com/nbb/f?p=100:101:0:::::."
Page 101 is de login page and after the login it should redirect to Home which is page 1. This is all default.
The weird thing is I can log into the application if I am on our company's local network.
And I can also log into the workspace from outside our network, but I cannot get in the Application.
I've also made a 'Sample Database Application' which I can log into from anywhere.
I've searched this forum and of course the internet and could not find anything on this subject.
I hope my explanation is clear enough and that someone could help me out.
Edited by: Robert Hantink on 5-dec-2012 11:09
Edited by: Robert Hantink on 5-dec-2012 11:10

So here is the update.
I've checked my themes/templates/pages for hardcoded HTTP/HTTPS and didn't find anything.
I also inspected and compared the website from inside our network and outside and could not find anything out of the ordinary.
Because this problem only occurses when i use the JQuery Mobile template I also compared the JQuery template with a Normal template.
The only thing i noticed besides the different scripts that are found in the <head>tag, is the <base> tag :
<base href="http://*****************.com:8080/nbb/f?p=100:10:13950022358106::NO:::">
This tag is only used in the mobile template.
I have also used the firebug network function and i noticed that when the site is used from outside our network that there is no response to a POST.
I've uploaded some screenshots to make things clear.
This is what happens from inside our network when i click on the SUBMIT-button "test" :
http://roberthantink.com/img/intern1.JPG
http://roberthantink.com/img/intern2.JPG
Everything just works and the answer to the POST is a html site.
However if i do the same thing from outside our network this is what happens:
http://roberthantink.com/img/extern1.JPG
http://roberthantink.com/img/extern2.JPG
The next thing I'm about to check is our webcache and our firewall.
Because the current port that is used is 443 and maybe we need 8080 and 8181 as well.
Hope this gives you more of an insight of what is going on.
Let me know if you need more information.
Thanks a million so far!!!

Standard jQuery tabs and an interactive report as a "tab" sub-region

Hi all,
I have a standard, simple implementation of jQuery tabs following the exact instructions by Patrick via this thread:
Re: New themes in APEX 4 not working with JQuery tabs
As one of the "tabs" (sub-regions), I want an interactive report. I use "no template".
Problem is that when the IR is in a tab, the pop-up column menus and such are no longer aligned, e.g. I click one of the column headers of the IR and the pop-up menu shows up much lower on the screen than it should -- sometimes off the screen if I have another region above. Can anyone assist? Maybe it's a DIV tag conflict between the jQuery template and the built-in IR?
Here is my example app:
http://apex.oracle.com/pls/apex/f?p=19782:1
Also another issue I've never seen quite resolved -- on "tab2" in the above app, you see what happens when you actually use a template in the sub-region. It breaks off the encompassing parent tab.
Sorry, if I was more savvy in the display options, I could probably solve all this -- so I'm hoping somebody else is or has already solved it and can share. Thanks so much!
David

If anyone is interested, I finally found the answer to this issue. It's all here:
http://www.apex-blog.com/oracle-apex/using-jquery-to-fix-broken-apex-interactive-report-drop-down-menus-150.html
Very special thanks to Stephen Blair (who owns the blog above) for the simple solution! Thanks Stephen!
David

Spry menu problem - CS6 Dreamweaver

I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.

Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.

Need help inserting spry correctly

ok im trying to build a website about video games which will include things like cheats, tips, guides, etc. for thousands of games so im gonna have a lot of pages so using a template is my only choice. Wehn making the template i created an editable region in the middle of the page. When i go to create a page from the template and try to insert a spry tabbed panel inside this editable region it tells me that its locked by the template blah blah blah. If it's an editable region i do not understand why it won't let me insert the spry menu. Also i have inserted a spry vertical menu as a navigation bar in the template that i want to repeat on all pages of the site and update on all pages when i update the template. Keep in mind that i am a novice and im sure this is my own fault.

I recommend doing some experiments with Spry menus and templates on pages that don't involve your actual project. Then when you have the techniques sorted out, you can proceed to apply them to your pages. A very minor typo can wreak havoc on a page, template, Spry, or otherwise, so tread carefully.
If you have not investigated tutorials for both Spry Menus and Templates (not together...), you will find many right here on the Adobe site.
Here are a few links for you to pursue:
This is the LiveDocs detailed description of the MenuBar widget:
http://livedocs.adobe.com/en_US/Spry/SDG/WS1D362749-60B5-40e1-84DB-E6C5A5B2D259.html
This is Mark Fletcher's basic template tutorial:
http://www.adobe.com/devnet/dreamweaver/articles/dw_templates.html
Best,
Beth

Spry vs jQuery template

Similar Messages

Maybe you are looking for