0

I've searched high and low and cannot find anything for this particular use-case for Zurb Foundation framework.

Working on a small JSF project that I am testing Foundation 5.1.1 with, however I'm having issues getting the Foundation attributes (data-topbar, reveal-modal, etc) to work. Instead it results in the following error. The project is running on a local port via Glassfish 4:

 An Error Occurred:

Error Parsing /includes/content/content.xhtml: Error Traced[line: 18] Attribute name "data-reveal" associated with an element type "div" must be followed by the ' = ' character.

The code block I using to access the modal is:

            <div class="medium-8 columns pw">
                 <p class="panel callout">This is a <a href="#" data-reveal-id="myModal">modal</a></p>
            </div>
            <div id="myModal" class="reveal-modal" data-reveal>
                <h2>Test Header.</h2>
                <p class="lead">Your couch.  It is mine.</p>
                <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
                <a class="close-reveal-modal">X</a>
            </div>

Has anyone else run across this error before?

StealthMode
  • 11
  • 5
  • Clearly data-reveal is an attribute that is not properly defined on myModal – kolossus Feb 27 '14 at 20:56
  • data-reveal is an attribute defined within the Foundation framework (http://foundation.zurb.com/docs/components/reveal.html). If I remove that attribute, the page displays but the modal does not fire – StealthMode Feb 27 '14 at 21:04
  • I don't think you understand. Look properly at the div again. Any attribute defined on an element in markup must follow the Key-value notation, i.e. Key="value". `data-reveal` is just sitting there, neither a key, nor a value, hence the invalid markup. Whatever that thing is, I don't see a browser agreeing with it – kolossus Feb 27 '14 at 21:07
  • Ah, I follow what you're saying! Yes, it does just sit there but according to the Foundation docs that attribute is required to fire that modal. Same format applies for a number of other attributes within the framework. Is there a way to include that attribute in the markup without offending the key-value format expected? – StealthMode Feb 27 '14 at 21:12
  • I stand corrected; I just tried the popup and the markup in the source does indicate that it's a standalone attribute – kolossus Feb 27 '14 at 21:13
  • You probably should place all that text in another location (a backing bean or properties file) and reference it in an `. This way, JSF will not try to make sense of what's in there. It's ugly but it works – kolossus Feb 27 '14 at 22:09
  • That does sound ugly, but I'll give it a shot. – StealthMode Mar 01 '14 at 13:37
  • I've created a separate .xhtml file for the modal and link to fire the modal, but the link doesn't display to fire the modal. I must be doing something wrong here, my apologies as I am fairly new to the JSF world. I'm referencing the file with – StealthMode Mar 01 '14 at 15:22
  • 1
    Got it working - used ui:include instead of h:outputText, and set the data-reveal attribute to true – StealthMode Mar 03 '14 at 12:22
  • @StealthMode thanks mate, setting the attribute to true did the job for a few other foundation attributes as well. – Fabii May 08 '14 at 18:20

1 Answers1

-1

On Mojarra 2.2.12, you can render empty attribute and 2.2.10 for Myfaces.

Bug on Mojarra. Bug on Myfaces.

What I suggest you is to take a JSF component with the JSF 2.2 passthrough feature. If you want to refresh it with AJAX, you must use a component.

Example : 

xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
<h:panelGroup id="myModal" p:data-reveal="data-reveal" 
        styleClass="reveal-modal" layout="block">
Jonathan Laterreur
  • 1
  • 1
  • No, a plain data-reveal attribute without a value would still fail. And all this was on a **non jsf** tag, so I doubt passthrough would work. And as mentioned in the form, assigning a value to the attribute already made it work – Kukeltje Jan 16 '16 at 23:07
  • A non JSF tag is still parsed by Facelets. Passthrough will work if it has a value. – Jonathan Laterreur Jan 18 '16 at 13:57