In my Rails app, there is a div in the User's profile that I want to load different data into depending on which link is clicked. Exactly how Facebook loads different data on the right depending on which link (info, wall, photos, friends) is clicked on the left. I notice two things in particular that I would like to recreate:
All of the data doesn't load on the profile (at least it doesn't show in the source code). So it doesn't seem like a show/hide scenario.
The page doesn't refresh but the URL does change.
I'm new to programming, but am curious as to how I can recreate this behavior. Here is the div I'm talking about in my Profiles#show action:
<div id="info">
<div id="infoContainer">
<ul id="questions">
<li>
<%= link_to 'About' %>
</li>
</ul>
<ul id="settingsLinks">
<li>Lists</li>
<li>
<%= link_to 'Pics' %>
</li>
</ul>
</div>
<%= render :partial => 'show_about' %>
</div><!-- end info -->
As you see, I want the "About" to show by default. But I want to load the others into the div (replacing "About") if the Lists or Pics link is clicked. Can anyone help?
I ended up using jQuery UI tabs as my solution with AJAX. I had everything together code-wise but forgot to include the stylesheet. So anyone looking to implement jQuery UI Tables, remember to either download and include a jQuery UI Stylesheet, or include the elements you need in your base css file.
Related
I cannot find any answer on this seemingly easy question. In my rails5 app some links do use turbolinks for loading new page. But some just launch full page reload.
There is no js attached to that links, turbolinks is not disabled on that links.
This link uses turbolinks:
= link_to qm_input_path('hour') do ...
<a class="navbar-brand" href="/qimen/hour/input"> ...
In the action it has
render layout: 'input'
And this link doesn't:
= link_to qm_chart_path(#foo, #bar), class: 'btn btn-default pull-right next' do ...
<a class="btn btn-default pull-right next" href="/qimen/hour/chart/foo/bar"> ...
In the action it has
render layout: guess_layout
So, nothing explicitly blocking turbolinks to work.
Why?
The issue is that the hrefs in your links contain periods (.).
Turbolinks will only handle links that it considers to be HTML. That is, those that have no extension (e.g. /post/1234), or those which have an html/htm/xhtml after the last period (e.g. /post/1234.html). In your case, the links which are performing a full page load end with something like: /30.335098600000038. Turbolinks will not consider this to be an HTML resource and so will not handle it.
To solve this, I'd recommend using query strings for parameters that may contain periods. For example to tidy up one of your links, you could try:
qimen/hour/chart?time=2017-06-03T15:27:48+03:00&city=St.%20Petersburg&longitude=30.335098600000038
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
Hi all I am having my _layout as follows
<div id="primary_nav">
<ul>
<li class="left active" id="nav_discussion" runat="server">
<a title="Go to Forums" href="#Url.Action("Index", "Home")">Forums</a>
</li>
<li class="left" id="nav_members" runat="server">
<atitle="Go to Member List" href="#Url.Action("Members", "Home")">Members</a>
</li>
</ul>
</div>
This I used as a layout or master page for every view I created, now what I required is When I moved to ...Home/Members I would like to set Members tab as active like
I would recommend you writing a custom helper for that. I have illustrated an example of how this could be achieved here: https://stackoverflow.com/a/6323032/29407
You could of course write some spaghetti code in your _Layout (as you have already started) and test the current controller and action using the RouteData and test whether it equals to the specified value and apply some custom CSS class to make it active. I prefer not to show an example of that because I consider it really bad practice. Encapsulating your menu items in a reusable helper is what I would do.
I would suggest u to on clicking members use Jquery to remove class "left active" from forms and add it to Members .. that would be an easy solution!!!
I'm having real troubles passing form data from a posting page made up of User Controls.
I posted this question before, here, Getting form field names on Submit when form is user control but the answers have not solved my problem, or I have mis-understood them.
Let me try explaining what I am doing more clearly.
I have a page which displays a form to the user. The form is made of several sections, but for simplicity we'll say there are two. Each of these sections is a User Control, thus the actual markup for newSale.aspx is just:
<%# Page Language="VB" MasterPageFile="~/MasterPage.master" CodeFile="newSale.aspx.vb" Inherits="newSale_Default"%>
<%# Register TagPrefix="controls" TagName="customerForm" Src="~/Controls/customerForm.ascx" %>
<%# Register TagPrefix="controls" TagName="itemList" Src="~/Controls/itemList.ascx" %>
<asp:content id="content1" ContentPlaceHolderID="mainContent" runat="server">
<div class="content">
<form id="newSale" method="post" action="saveSale.aspx">
<h1>--- New Sale ---</h1>
<div class="section" id="customerSection">
<controls:customerForm ID='customerForm1' showBankDetails="false" runat='server' />
</div>
<div class="section" id="saleSection">
<controls:itemList ID='itemList1' showShipping="false" showDeposit="false" runat='server' />
<div class="row submitRow">
<div id="submitSale">Submit</div>
</div>
</div>
</form>
</div>
</asp:content>
So you see my two main Controls tags with the IDs "customerForm1" and "itemList1" respectively.
The submit button is deliberately a clickable div and submission is done by jQuery, thus:
$('#submitSale').live('click', function () { $('#newSale').submit(); });
As the User Controls are rendered into the browser, the IDs and Names of the elements are messed about (I understand the reason why) by ASP.NET, so taking one field as an example:
A field named "name" contained within the customerForm control becomes m$mainContent$customerForm1$name
'm' - being the ID of my MasterPage
'mainContent' - being the ID of the PlaceHolder
'customerForm1' - being the ID of the User Control and
'name' being the element's actual name.
I wish to submit this form to a separate file (saveSale.aspx) as per the action attribute of my Form tag declared above.
Within the Code-Behind of saveSale.aspx I need to save the data passed from the form into a dataBase and return it in the aspx file as an HTML page.
How do I reliably get the value of the submitted form fields in saveSale.aspx(.vb)?
<%= request.form("m$mainContent$customerForm1$name") %>
Works, but naturally is a pain to use, especially when I want to replicate this to other purposes.
m.mainContent.customerForm1.name.selectedValue()
tells me that 'm' is not declared
and from the other replies to my previous question I have tried registering the controls at the top of the (saveSale.aspx) page, and explicitly posting the Control into the page again with
<controls:customerForm ID='customerForm1' showBankDetails="false" runat='server' />
Which doesn't work, but even if it did, it makes no sense anyway as I don't want to use the Control anymore, I just want to get the data from it.
I do apologise if I'm being dumb here, but I have tried so many different variations of code and Googled ideas, but I can't seem to make this work in any scalable fashion beyond the Request.Form example above.
I am using .NET 2.0 so can't use the Static Client feature that I've seen mentioned for .NET 4.0
Also, please, I am using VB.NET, so if you can help, please help with a VB example.
Many thanks.
I am using the rails 3 gem nested_forms and would like to change how the default blueprint for insertion is generated. I can not figure out how/where this code would comes from, and how/where I would add code to modify it.
I am currently using a partial for my form:
/app/views/units/_unit.html.haml
%tr
%td=f.text_field :units
%td=f.text_field :dispatched
%td=f.text_field :onscene
%td=f.text_area :actions
The code snippet that calls the partial:
/app/vies/reports/_form.html.haml
...
%table.units
%th Unit
%th Dispatched%th On Scene
%th Actions
=f.fields_for :units
%p= f.link_to_add "Add a unit", :units
...
I have all of the core functionality working, except for the template. That is auto created at run time by the gem. This template results in very simple HTML markup being used for the template.
Which is similar to the following:
<div id="units_fields_blueprint" style="display:none">
<p class="fields">
<input id="report_units_attributes_new_units_unit" name="report[units_attributes][new_units][unit]" size="30" type="text">
<input id="report_units_attributes_new_units_dispatched_1i" name="report[units_attributes][new_units][dispatched(1i)]" type="hidden" value="2011">
...
</p>
</div>
I would like the blueprint to have the tabular format that is in the partial, I just don't know how to get there.
Any help would be appreciated.
A partial which contains only a table row, such as listed above will not be valid markup when placed within the blueprint div.
The following code is not valid markup.
<div>
<tr>
<td>Content</td>
</tr>
</div>
Certain browsers (chrome for example) will attempt to correct this bad markup, which is done by stripping out the tr and td markup.
To get this type of code to work with nested_form would be complex requiring that the blueprint be created in a javascript string, and would require a modification to the builder to stop automatically surrounding inserted code in a block of code.
These changes are addressed in issue #73 for nested_form which refers to a branch created by the github user elmatou.
Another option to get a similar look and feel is to use divs and spans and create a grid structure using CSS. This is a CSS intensive process, but allows nested_form to be used without requiring alteration.