SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: RoR and jQuery issue.
Hybrid View
-
Feb 4, 2009, 16:35 #1
- Join Date
- Feb 2009
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
RoR and jQuery issue.
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.
-
Feb 4, 2009, 22:20 #2
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
More info? How do they not work? What is the output ( view source )?
-
Feb 5, 2009, 09:04 #3
- Join Date
- Feb 2009
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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]:
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>
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
})
-
Feb 5, 2009, 09:25 #4
- Join Date
- Feb 2009
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Accordion doesn't work either.
-
Feb 5, 2009, 14:12 #5
- Join Date
- Jul 2005
- Location
- West Springfield, Massachusetts
- Posts
- 17,290
- Mentioned
- 198 Post(s)
- Tagged
- 3 Thread(s)
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.
Big Change Coming Soon - if you want your PMs save them now!
What you need to do to prepare for our migration to Discourse
A New SitePoint Forum Experience: Our Move to Discourse
-
Feb 5, 2009, 15:05 #6
- Join Date
- Feb 2009
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:<%= javascript_include_tag "application","ui_demos","jquery-1.3.1","jquery.ui.all" %>
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>
-
Feb 5, 2009, 15:11 #7
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
would it not work when the files are local and
-
Feb 5, 2009, 15:33 #8
- Join Date
- Feb 2009
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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]
Bookmarks