Java script no executing in Rails app - ruby-on-rails

I am trying to add a javascript image slider on a basic rails app. I added the JS file to assets/javascripts folder but my javascript is not executing.
I added my html file below. Can anyone one please tell me what am I missing?
<div class="slider">
<!-- Slideshow 3 -->
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
});
});
</script>
<ul class="rslides" id="slider3">
<li>
<div class="banner">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner2">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner1">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
</ul>
<ul id="slider3-pager">
<li><img src="assets/device3.jpg" alt=""></li>
<li><img src="assets/device2.jpg" alt=""></li>
<li><img src="assets/device1.jpg" alt=""></li>
</ul>
<div class="clearfix"> </div>
</div>

Related

Adding Twitter Bootstrap Carousel to rails app

I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). I want to add the bootstrap carousel to my application view ( ie to my application.html.erb)
I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed.
Does somebody have the solution for me ?
PS : I currently use Sass for my bootstrap design.
EDIT 02-11-2013 => Here's my code hope you can find what my mistake is
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
EDIT 2 : And this is how it looks like on Chrome : http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
instead of
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and there is no need to specify "assets/images" for showing the image folder. the 1.jpg is enough!
Does your app/assets/javascripts/application.js contain a reference to bootstrap?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a reference:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/pictures/1.png">
</div>
<div class="item">
<img src="/pictures/2.png">
</div>
<div class="item">
<img src="/pictures/3.png">
</div>
<div class="item">
<img src="/pictures/4.png">
</div>
<div class="item">
<img src="/pictures/WordcloudInsight.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Bootstrap Carousel in Rails suddenly stopped working
check above link, also did you add this + is jquery loading
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>

Add a "Split button" in collapsible-set (JQuery Mobile)

Is there are any way to add the split button (that comes with ListView) to the collapsible; I have tried/tested the below code, but doesn't work!
<div data-role="collapsible-set" data-theme="a" data-content-theme="e" data-split-icon="gear" data-split-theme="e">
<div data-role="collapsible">
<h3> Breakfast </h3>
<p>
<a href="somthing.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
<div data-role="collapsible">
<h3> Lunch</h3>
<p>
<a href="somthingElse.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
</div>
Any Idea or any other solution (workaround) is highly welcome.
Well it needs a little work but here is what I have
Live Example:
http://jsfiddle.net/yPhJp/5/
http://jsfiddle.net/yPhJp/6/ ( Adding verbiage to the collapsible )
JS
$(".splitButtonClicked").on("click", function (event, ui) {
alert('Hello');
return false; // stop collapsible event
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Breakfast</h3>
</a>View Menu
</li>
</ul>
</h2>
</div>
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Lunch</h3>
</a>View Menu
</li>
</ul>
</h2>
</div>
</div>
</div>
</div>
Hope this helps you

JQuery UI tab - Always render html in first div

I am using jquery UI Tab in my asp.net MVC(RAZOR) application. Issue that i found is that each tab click render the html in first div i.e here div with id "tabs-1".
Jquery code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function ($) {
$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
HTML:
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>Overview</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=5" >Specifications</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=1" >Exterior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" >Interior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=3" >Dimensions</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=4" >Feature</a></li>
<li><a href="/Version/Details?versionID=#ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
<li>Color</li>
</ul>
<div id="tabs-1" style="width: 698px;">
This is Tab one
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
</div>
Please guide me.
Thanks,
#paul
Finally i got the solution by matching a title attribute and the container's id like bellow
<li>OverView</li>
<li>Specifications</li>
<div id="tabs-1" style="width: 698px;">This is Tab one</div>
<div id="tabs-2"> </div>
Thanks,
#paul
I think id="example" should be down one level with the class="tabs" div.
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>This is Tab one</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=5" >Specifications</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=1" >Exterior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" >Interior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=3" >Dimensions</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=4" >Feature</a></li>
<li><a href="/Version/Details?versionID=#ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
<li>Color</li>
</ul>
<div id="tabs-1" style="width: 698px;">
Overview
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
</div>
</div>
EDIT:
$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
$('#example')
What is the third line in your jquery supposed to be doing? Is it generating a javascript error that prevents the tabs from functioning correctly?
Your problem is your hrefs in your anchor tags. You have to format them as "#tabs-number".
Here is a jsfiddle showing you it working (completely without any CSS styling since that was not provided in your example either. But each tab being clicked takes you to different tab contents.
http://jsfiddle.net/UBxPJ/
But basically, the change is:
<li>Overview</li>
<li><a href="#tabs-2" >Specifications</a></li>
<li><a href="#tabs-3" >Exterior</a></li>
<li><a href="#tabs-4" >Interior</a></li>
<li><a href="#tabs-5" >Dimensions</a></li>
<li><a href="#tabs-6" >Feature</a></li>
<li><a href="#tabs-7" >Instrument Panel</a></li>
<li>Color</li>

jQuery Mobile: Content doesn't load properly after changePage

My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.

Navbar remian constant for all pages in jquery mobile

I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>

Resources