Forum:

New to JSF, having trouble with JS in JSF

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Well I decided to learn by making a project, already did some basic stuff, but the thing that I'm having issues with is JS.

As far as I know for not outputscript and outputstylesheet are pretty similar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<h:head>
 	 <h:outputStylesheet library = "css" name = "bootstrap.min.css" /> 
 	 <h:outputStylesheet library = "css" name = "ie10-viewport-bug-workaround.css" /> 
 	 <h:outputStylesheet library = "css" name = "navbar-fixed-top.css" />  	 
 	
 	  <h:outputScript library = "js" name="bootstrap.min.js" target="body"/>
  	  <h:outputScript library = "js" name="ie10-viewport-bug-workaround.js" target= "body"/>
 	
</h:head>
 	   
<h:body>
  <div id="page">
    
    <div id="header">
      <ui:insert name="header" >
        <ui:include src="header.xhtml" />
      </ui:insert>
      
      </div>
      
      <div id="content">
         <ui:insert name="content" >
           <ui:include src="body.xhtml" />
            
         </ui:insert>
          </div>
        
      <div id="footer">
        <ui:insert name="footer" >
          <ui:include src="footer.xhtml" />
        </ui:insert>
      </div>
      
    </div>
    
     
    </h:body>
</html>

My folder structure

WebContent
|-- META-INF
|-- WEB-INF
|-- resources
|-- css

Philip Freeman

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Posted by mistake without finishing, continuing here:

My folder structure

WebContent
|-- META-INF
|-- WEB-INF
|-- resources
|-- css

Philip Freeman

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ok, dunno wtf is going on here, stuff is getting posted each time I'm in middle of typing. Going to come back later after I type this somewhere else. Sorry for spam and this shit I made. If some mod is reading you can delete I wont mind.

Philip Freeman

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sorry for bad language, having a bad day.

Philip Freeman

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Failing to add JS to the page, CSS works.

Folder structure:

WebContent
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | |-- bootstrap.min.css
| | |-- ie10-viewport-bug-workaround.css
|-- navbar-fixed-top.css
| |-- js
|-- bootstrap.min.js
|-- ie10-viewport-bug-workaround.js
index.xhtml

After reading this https://stackoverflow.com/questions/8367421/how-to-reference-css-js-image-resource-in-facelets-template?answertab=votes#tab-top I still do not view my mistake, but I tried all of the
stuff mentioned there, just in case. And why not, I can learn something. But JS still not working. Sorry for noob question and my previous mistakes while posting, I just not noticed that tabing and hiting space is a bad idea.

Tim Holloway

Saloon Keeper

Posts: 28402

210

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Use the View Page Source option on the displayed webpage. Either the JavaScript should be part of the page view OR there should be a URL link to the JavaScript. If it's a link, try typing that link into your browser's navigation bar to make sure that it's resolving.

If it's a link, also make sure that nothing tries to run the Javascript before the page has finished loading, since otherwise stuff may not reliably be there when you need it.

If you're using Firefox, check the Firebug console for Javascript errors and the net trace for "404" or 500-series errors.

Education won't help those who are proudly and willfully ignorant. They'll literally rather die before changing.

Philip Freeman

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt14"><link type="text/css" rel="stylesheet" href="/blog/faces/javax.faces.resource/bootstrap.min.css?ln=css" /><link type="text/css" rel="stylesheet" href="/blog/faces/javax.faces.resource/ie10-viewport-bug-workaround.css?ln=css" /><link type="text/css" rel="stylesheet" href="/blog/faces/javax.faces.resource/navbar-fixed-top.css?ln=css" /></head><body>
  <div id="page">
    
    <div id="header"><html xmlns="http://www.w3.org/1999/xhtml"><body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">SSJava Blog</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Java</a></li>
            <li><a href="#about">Spring</a></li>
            <li><a href="#contact">Selenium</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">more<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">SQL</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>          
        </div>
      </div>
    </nav><script type="text/javascript" src="/blog/faces/javax.faces.resource/bootstrap.min.js?ln=js"></script><script type="text/javascript" src="/blog/faces/javax.faces.resource/ie10-viewport-bug-workaround.js?ln=js"></script></body>
 
</html>

Cechekd links, they seem fine to me, example of a small one

No errors, and as far as I see nothing is trying to run the Javascript before the page has finished loading.

Philip Freeman

Ranch Hand

Posts: 31

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm blind, i forgot

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Sorry, trully stupid of me, no idea how I missed that and failed to notice it for 4 hours.

Get me the mayor's office! I need to tell him about this tiny ad:

New web page for Paul's Rocket Mass Heaters movies

https://coderanch.com/t/785239/web-page-Paul-Rocket-Mass