On a jQuery Mobile site I have elements of a <ul> being populated by jQuery Templates, filling out <li> items so something like this:
<ul>
</ul>
<button>Fill</button>
<script type="text/x-jquery-tmpl" id="tmpl-items">
<li><input type="checkbox" name="guys" /> ${FirstName} ${LastName}</li>
</script>
<script type="text/javascipt">
$('this-page-id').live('pageinit', function() {
$('button').click(function() {
$('#tmpl-items').tmpl(MyApp.Model)
.appendTo('ul')
});
})
</script>
Everything works, except the checkbox renders as a normal checkbox, not a cool jquery-mobilized checkbox. I know that the trick is to call "refresh" on the widget but I have no idea what widget I should be using - there is no data-role here. Does anybody know?
Can you triggering a create on the ul,like this $('ul').trigger('create');
Related
<%= f.radio_button :newCustomer, "Male",:value=>'NewCustomer',:checked=>true%>
`<%= f.radio_button :customer, "Female",:value=>'Customer'%>`
<div id="first"></div>
<div id="second"></div>
I am new in rails.I have two radiobuttons and two div.When i click NewCustomer i want to hide first div and when i click on the Customer show the hidden div.I want to do this in only Ruby code.Is there any radiobutton click event like in .net
You can achieve it by Javascript / JQuery / Ajax in rails:
Example:
HTML
<input type="radio" name='thing' value='valuable' data-id="female" />
<input type="radio" name='thing' value='valuable' data-id="male" />
<hr />
<div id="female" class="none">Div for Male</div>
<div id="male" class="none">Div for Female</div>
CSS:
.none {display:none;}
JQuery
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
Working Fiddle
Pipeline
To further Gagan's answer, you'll want to include your Javascript in the asset_pipeline:
#app/assets/javascripts/application.js
$(document).on("change", ".radio", function(){
// gagan's code here
});
--
Turbolinks
Something to note is the importance of the javascript "delegation" - when you use Rails applications with Turbolinks.
Because of the way in which Turbolinks will just update the <body> tag of your page, many JS event bindings will actually become invalid, preventing your application from loading correctly.
To fix this, you need to be able to either delegate your DOM events from a "container" element (typically document), or by encapsulating your code in Turbolinks events like so:
#app/assets/javascripts/application.js
var change = function() {
$(".radio").on("change", function(){
//Stuff here
});
};
$(document).on("page:load ready", change);
This may be a little difficult to explain, but I'll try my best. I have a product page with two tabs, full description and video. These are done using jQuery UI Tabs.
Above this section of the page I have a product image with thumbnails...but I want one of the thumbnails to be a link to see the video (which of course is contained in the video tab).
If I load the page as site.com/product#video it does load up the correct tab...but when the tab is not active, and I use a link outside of the #tab div, (ex: Video), it doesn't do anything.
How can I get a link to open the tab if it's not contained in the #tab div?
CODE
This code is outside of the tabs, and needs to open the #video tab
Open Video Tab
Tabs Code
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover">Full Description</li>
<li class="ui-state-default ui-corner-top">Video</li>
</ul>
<div class="product-collateral">
<div class="box-collateral box-description">
<div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
Content
</div>
<div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2 class="video">Video Content</h2>
</div>
</div>
</div>
</div>
What worked for me was this:
Html
Open Description Tab
Open Video Tab
<div id="tabs">
<ul>
<li>
Full description
</li>
<li>
Video content
</li>
</ul>
<div class="product-collateral">
<div class="box-collateral box-description">
<div id="description">
Content
</div>
<div id="video">
<h2 class="video">Video Content</h2>
</div>
</div>
</div>
</div>
Javascript
$(document).ready(function () {
$('#tabs').tabs();
$('.open-tab').click(function (event) {
var tab = $(this).attr('href');
$('#tabs').tabs('select', tab);
});
});
So what this does is provide a link to both the description and video tabs, which are selected when the link is clicked.
From here we can see that when selecting a particular tab, we can use either a zero-based index or the href fragment which points to the tab we wish to display.
This is why the href attributes of the a elements match up with the Ids of the div elements - when one is clicked its href fragment is then used to set the selected tab.
Update for jQuery UI 1.11
As jQuery UI has evolved, so to has the API for setting the active tab. As of jQuery UI 1.11, the following code will select the active tab:
//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);
Now because we now have to provide a zero-based index, the code I initially provided will no longer work.
What we need now is an index that can actually be used. One approach is:
$('.open-tab').click(function (event) {
var index = $("selector-of-clicked-tab").index();
$('#tabs').tabs("option", "active", index);
});
Another is to use HTML5 data- attributes:
Open Description Tab
Open Video Tab
So you can do this when handling the click of these links:
$('.open-tab').click(function (event) {
$('#tabs').tabs("option", "active", $(this).data("tab-index"));
});
use jQuery:
$( "#tabs" ).tabs({ active: tabNumber });
Remember, that the indexation starts from 0
Using jquery, bind a click event to your link that opens the tab you want.
$('#tabopenlink').click(function() {
$('#tabs').tabs({active: tabidx});
});
I use mini plug-in.
(function($) {
$.fn.tabremote = function(options) {
var settings = $.extend({
panel: "#tabs",
to: "data-to",
}, options );
$this=$(this);
$panel=$(settings.panel);
$this.click(function(){
if($(this).attr("href"))
{var tos=$(this).attr("href");}
else
{var tos=$(this).attr(settings.to);}
to=tos.match(/\d/g);
$panel.tabs({active: to-1});
return false;
});
return this;
}
})(jQuery);
Opens the tab using href or any element.
id panel must contain the number of the panel. Example (1-tabs, tabs-2, ...)
Plugin subtracts 1 and open the panel. Tabs (active, (number of id -1))
Use
$("button.href").tabremote({panel:"#tabs",to:"data-href"});
panel:"#tabs" // container panel
to:"data-href" // attribute name with value
function openTabByLink(link) {
$("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}
If you use twitter bootstrap instead of jquery ui, it will be very simple.
Just add data-toggle="tab" and put the link wherever you want in the page:
Open Video Tab
For jQuery UI 1.11
HTML:
<div id="tabs">...</div>
...
Open Video Tab
JS:
$('.open-tab').click(function () {
$("#tabs").tabs('option','active',$('#tabs a.ui-tabs-anchor[href="'+$(this).attr('href')+'"]').index('#tabs a.ui-tabs-anchor'));
});
I'm using backbone jquery mobile and coffee script to develop a simple twitter application. My problem is the jquery mobile styles are failing to render. My View is
class HomeView extends Backbone.View
constructor: ->
super
initialize: ->
#Twitter= new TwitterCollection
template: _.template($('#home').html())
render: ->
#loadResults()
loadResults: ->
#Twitter.fetch({
success: (data) =>
$(#.el).html(#template({data: data.models, _:_}))
error: ->
alert('Error!')
})
This works fine in terms of pulling information from Twitter, however when
$(#.el).html(#template({data: data.models, _:_}))
is within the fetch function, jquerys styles do not render. Can anyone show me how to refresh the styles? Help would be much appreciated!
For reference, the html template is:
<script type="text/template" id="home">
<div data-role="header" data-position="fixed">
<h1>TWITTER DATA</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<% _.each(data, function (row) { %>
<li><%= row.get('text') %></li>
<% }); %>
</ul>
</ul>
</div>
Ok, I fixed it by adding ".listview('refresh').trigger('create');" to the end of
$(#.el).html(#template({data: data.models, _:_}))
When the fix is applied afterwards (after the view page has been rendered and displayed by $.mobile.changePage()) the user gets an unpleasant side-effect: the view flickers due to the change of style applied by jquery mobile.
My solution to the problem was to trigger custom event from the view once the dynamic rendering is complete and bind the $.mobile.changePage() to that event. This causes the output to be "buffered" until complete and then styled altogether.
Here's an example:
In the initialize function of my view I have code waiting for an event to be fired by the model/collection when fetched and a function to render the dynamic part of the html:
window.MyView = Backbone.View.extend({
// some other code here
initialize: function() {
this.listenTo(this.collection, "fetchCompleted:CollectionName", this.renderRows);
},
renderRows: function (eventName) {
$(this.el).find('div[class="content-primary"]').html(this.template_ul({data: this.collection}));
this.trigger( 'view:ready' );
},
//...
... then in the router I have the following code for the changePage():
myViewObject.on( 'view:ready', function() {
$.mobile.changePage($(next.el), {changeHash:false, transition: transition});
});
I am trying to build a JQuery Mobile UI which uses upshot for getting data from the service and then uses Knockout.js to bind the values to a list. I am able to populate the data however, the JQuery mobile styles are not getting rendered.
Here is my code. Any help in this regard would be really appreciated.
<h2>Projects (<span data-bind="text: projects().length"></span>)</h2>
<ul data-inset="true" data-bind="foreach: projects" data-role="listview" data-theme="e" data-dividertheme="c" data-filter="true">
<li>
Project Type : <label data-bind="text: ProjectType"></label>
Description : <label data-bind="text: Description"></label>
</li>
</ul>
<p></p>
#(Html.UpshotContext(bufferChanges: true).DataSource<ProjectServiceController>(x => x.GetProjects()))
<script type="text/javascript">
$(function () {
var dataSource = upshot.dataSources.Projects.refresh();
var ProjectsViewModel = {
projects: dataSource.getEntities()
};
ko.applyBindings(ProjectsViewModel);
});
</script>
The refresh() call is asynchronous, so you can provide a callback function that is executed after the refresh. jQueryMobile docs say that if you add items you need to refresh the listview after the items are created: http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html
Here's an example of how you might do that:
var dataSource = upshot.dataSources.Projects.refresh(function() {
$("ul").listview('refresh');
});
I am trying to do the following:
The object I give to the Viewpage has a list, I do a foreach in the HTML and I create a number of components. Now, I want the IDs of those components to somehow be linked to the object from the List.
(The reason I am trying to do this is because I want to show a button, when they press that button the shown content will change and they should see something else, I will use javascript to achieve this)
Therefor I am trying to make the id of those components dynamic, by for example stating
id="button <%= item.id%>" however this does not seem to work. I have searched alot on google but I haven't found a solution yet which is why I turn to you guys.
I'll link my code as well, I deleted some of the parts that were unnecessary (but added the javascript):
<script type="text/javascript">
function AlterPanel(thePanel) {
var panel = document.getElementById("region"+thePanel);
panel.style.display = 'block';
var button = document.getElementById("button"+thePanel);
button.style.display = 'none';}
</script>
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a id="button<%= team.Number %>" onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div Visible="false" id='region<%= team.Number %>' runat="server">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I eagerly await a reply and thank you in advance.
I guess your Queastion is:
-you have some "button DropDownList" pair, button is visiable, DropDownList is invisible, now if user click the button then DropDownList will showup.
OK, now your View maybe :
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div id="region<%= team.Number %>" style="display:none">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I use JQuery in javascript part like this:
<script type="text/javascript">
function AlterPanel(thePanel) {
$("#region" + thePanel.toString()).css("display", "block");
}
</script>
Don't forget include the following file in View():
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script>
if the answer is not what you want, let mt know and I can help you~ :)