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
Related
im trying out the HTMX lib and so far i like it alot. something that i cant quite get my head around is handling full page reloads.
Links
<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>
<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>
its quite nice in that it loads the content in my required div, and applies a /#/link into my url bar and browser history.
But when i reload the page on any of the urls /#/profile or /#/feed the page reloads to its default state not including the content thats designated on the /#/profile or /#/feed pages.
If i just use a url of /profile or /feed, i get a 404 error as expected.
Everything is amazing, am i doing something wrong?
For full page loads you would need to either:
Render the content server side
Use htmx with the load trigger to load the content on page load. You can find an example of that here https://htmx.org/attributes/hx-trigger/
In the second case you still need to be able to determine the type of page being loaded server side to render the appropriate div. Something like this:
<div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>
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.
I have a simple comment system when I can dynamically add replies and I am trying to add a UJS way of allowing the user to cancel the reply. I have a text field with id="comment_reply_content" and followed with an
<input id="cancel_reply" data-remote="true" class="btn btn-mini" type="button" value="Cancel">
In my application.js file I added:
$('#cancel_reply').live('ajax:success', function() {
alert('hello');
// $('#comment_reply_content').val('');
});
No matter what I do I can't get this to work. I commented out the actual functional javascript that clears the form etc. but now I have resorted to a simple alert for testing. Placing the alert alone in my application.js works fine. I have *.js files in my controllers which are working to create the new reply forms etc. so I know that UJS is working. I am pretty sure I am just missing something easy here. I have tried changing the live to bind with no success.
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.
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.