SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. Feb 4, 2009, 16:35 #1
    nuMERICA
    nuMERICA is offline
    SitePoint Member
    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.
    Attached Images Attached Images
  2. Feb 4, 2009, 22:20 #2
    SoulScratch
    SoulScratch is offline
    Guru in training bronze trophy SoulScratch's Avatar
    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 )?
    Cross browser css bugs

    Dan Schulz you will be missed
  3. Feb 5, 2009, 09:04 #3
    nuMERICA
    nuMERICA is offline
    SitePoint Member
    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>
    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.
    Attached Images Attached Images
  4. Feb 5, 2009, 09:25 #4
    nuMERICA
    nuMERICA is offline
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Accordion doesn't work either.
  5. Feb 5, 2009, 14:12 #5
    Mittineague
    Mittineague is offline
    Programming Team silver trophybronze trophy
     Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,053
    Mentioned
    187 Post(s)
    Tagged
    2 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.
    ► STOP using mysql - migrating to procedural mysqli !!
    ► How to be a Great Online Community Member
    ► Member of the Month for July 2014 - Patche
    ► Free SitePoint book - Thinking Web: Voices Of The Community
    ► On Our Radar This Week: ---
  6. Feb 5, 2009, 15:05 #6
    nuMERICA
    nuMERICA is offline
    SitePoint Member
    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:
    <&#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>
  7. Feb 5, 2009, 15:11 #7
    SoulScratch
    SoulScratch is offline
    Guru in training bronze trophy SoulScratch's Avatar
    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
    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.
    Cross browser css bugs

    Dan Schulz you will be missed
  8. Feb 5, 2009, 15:33 #8
    nuMERICA
    nuMERICA is offline
    SitePoint Member
    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]
    Attached Images Attached Images

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules