| SitePoint Sponsor |
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.
More info? How do they not work? What is the output ( view source )?
Hey,
Yeah, I will post output source.
From Rails:
From regular HTML: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>
I am using the regular XHTML 1.0 Transitional doctype for both instances.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>
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]:
I researched some more and it looks like it's not loading because of this.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>
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.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
})
Accordion doesn't work either.
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>
Last edited by Mittineague; Feb 5, 2009 at 15:36.
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
Doesn't WorkCode:<%= javascript_include_tag "application","ui_demos","jquery-1.3.1","jquery.ui.all" %>
Works!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>
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>
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.would it not work when the files are local and
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]
Posting Permissions
Dan Schulz you will be missed 
Bookmarks