RoR and jQuery issue.

**nuMERICA** · Feb 4, 2009, 16:35

Hey I am having a problem with jQuery and RoR.

I have imported all the assets (js,css) into the public folders and called them in my layout file with <%= stylesheet_link_tag "style","etc.." %> and <%= javascript_include_tag "jquery-1.3.1","etc.." %> and brought in the HTML of the tabs. That doesn't seem to work please see screenshot1.

I have researched many sites and I have not found a solution to my woes. Please help.

**SoulScratch** · Feb 4, 2009, 22:20

More info? How do they not work? What is the output ( view source )?

**nuMERICA** · Feb 5, 2009, 09:04

Hey,

Yeah, I will post output source.

From Rails:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project</title>
		<link href="/stylesheets/style.css?1233790437" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/ui.all.css?1233665098" media="all" rel="stylesheet" type="text/css" />
        <script src="/javascripts/application.js?1233786297" type="text/javascript"></script>
<script src="/javascripts/ui_demos.js?1233665098" type="text/javascript"></script>
<script src="/javascripts/jquery-1.3.1.js?1233770869" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.all.js?1233771259" type="text/javascript"></script> 

</head>
<body>
<div class="topHeader">
<img src="/images/kobelogo.png" class="hLogo"/>
</div>
	<div class="navBar">
<div id="tabs">
<ul>
	<li><a href="#tabs-1">Key Generation</a></li>
	<li><a href="#tabs-2">Manage Lists</a></li>
	<li><a href="#tabs-3">Create Account</a></li>

	<li><a href="#tabs-4">Create Unsub Page</a></li>
	<li><a href="#tabs-5">Reports</a></li>
	<li><a href="#tabs-6">Settings</a></li>
</ul>
	<div id="tabs-1">
	<a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />

	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-2">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />

	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-3">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>

	</div>
	<div id="tabs-4">
	 <a href="#">Create Unsubscribe Page</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>

	<div id="tabs-5">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-6">

	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	</div>
</div>
</div>

From regular HTML:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kobe Mail</title>
<link type="text/css" href="theme/ui.all.css" rel="Stylesheet" />	
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript" src="ui_demos.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">

<body>
<div class="topHeader">
<img src="images/kobelogo.png" class="hLogo"/>
</div>
<div class="navBar">
<div id="tabs">
<ul>
	<li><a href="#tabs-1">Key Generation</a></li>
	<li><a href="#tabs-2">Manage Lists</a></li>
	<li><a href="#tabs-3">Create Account</a></li>
	<li><a href="#tabs-4">Create Unsub Page</a></li>
	<li><a href="#tabs-5">Reports</a></li>
	<li><a href="#tabs-6">Settings</a></li>
</ul>
	<div id="tabs-1">
	<a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-2">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-3">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-4">
	 <a href="#">Create Unsubscribe Page</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-5">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
	<div id="tabs-6">
	 <a href="#">Choice 1</a><br />
	 <a href="#">Choice 2</a><br />
	 <a href="#">Choice 3</a><br />
	 <a href="#">Choice 4</a>
	</div>
</div>
</div>

I am using the regular XHTML 1.0 Transitional doctype for both instances.

They look the same, but of course the regular HTML page works. When I view selection source for choices in the drop down I see this [screenie]:

Code:

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-3">
	 <a href="#">Choice 1</a><br>
	 <a href="#">Choice 2</a><br>
	 <a href="#">Choice 3</a><br>
	 <a href="#">Choice 4</a>
	</div>

I researched some more and it looks like it's not loading because of this.

Virtually all jQuery commands won’t function correctly unless they’re run after the DOM has fully loaded. jQuery’s way of solving this is something called a “document ready block.”

jQuery(document).ready(function() {
// commands go here
})

Is this the reason why it's not working? If it is can some one please tell me how to fix this? I am using the standard "jquery-1.3.1.js" & "jquery.ui.all.js" that come with the package sent from themeroller.

**nuMERICA** · Feb 5, 2009, 09:25

Accordion doesn't work either.

**Mittineague** · Feb 5, 2009, 14:12

Hi nuMERICA, welcome to the forums,

If the functions need to run after the DOM is loaded in, try putting the script tag before the closing body tag in your .erb file(s) eg.

Code Ruby:

.......
    <ul id="navigation">
      <li><%= link_to 'Front page stories', stories_path %></li>
      <li><%= link_to 'Upcoming stories', bin_stories_path %></li>
      <li><%= link_to 'Submit a new story!', new_story_path %></li>
    </ul>
    <%= javascript_include_tag :defaults %>
  </body>
</html>

**nuMERICA** · Feb 5, 2009, 15:05

Thank you for the welcome, Mittineague, and for posting that suggestion.

While troubleshooting the page I decided to host the JS files on my hosted server. It seems to be working! This does not make any sense, why would it not work when the files are local and why would it work when they are hosted on the web.

Doesn't Work

Code:

<&#37;= javascript_include_tag "application","ui_demos","jquery-1.3.1","jquery.ui.all" %>

Doesn't Work

Code:

<script type="text/javascript" src="/javascripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="/javascripts/jquery.ui.all.js"></script>
<script type="text/javascript" src="/javascripts/ui_demos.js"></script>

Works!

Code:

<script type="text/javascript" src="MYDOMAIN/sandbox/jquery-1.3.1.js"></script>
<script type="text/javascript" src="MYDOMAIN/sandbox/jquery.ui.all.js"></script>
<script type="text/javascript" src="MYDOMAIN/sandbox/ui_demos.js"></script>

**SoulScratch** · Feb 5, 2009, 15:11

would it not work when the files are local and

Because the '/' is root relative, meaning it would have to be your localhost/javascripts and not localhost/whatever. I suggest setting this up as a virtualhost in Apache.

**nuMERICA** · Feb 5, 2009, 15:33

It is in my public->javascripts folder. I can access the file when I am on webrick by going to /javascripts/jquery-1.3.1.js [screenie1]. So the soft link to local is correct.

Another thing. When I use the regular <%= javascript_include_tag "application","ui_demos","jquery-1.3.1","jquery.ui.all" %>, the page sees the js, it pulls it up, but it does not parse it for some reason. [screenie2]

The SitePoint Forums have moved.

User Tag List

Thread: RoR and jQuery issue.

Thread Tools

Display

Hybrid View

RoR and jQuery issue.

Bookmarks

Bookmarks

Posting Permissions