Recently, I've found this template from codyhouse which I decided to play with it a little in a sample rails app.
Looking into the code, I found that the page transition from the side navigation bar is happening via jquery load function.
From what I understand, whenever view, say user/show, gets loaded in rails, the contents written in the specified url, which in this case would be the contents in my user/show.html.erb file, gets embedded in the application.html.erb file.
As this is the case, I was wondering if there would be a way to "swap" contents being embedded into the application.html.erb file perhaps via jquery load function. For instance, without having to reload the whole view, replace the user/show.html.erb contents loaded in the page with the contents of user/signup.html.erb. Or is it not possible as it deviates from the concept of the MVC model?
Related
I know there are several questions concerning this, but I still think that it's there are a few areas that could use some clarification since the Turbolinks way of doing it (1 js file to rule them all) apparently goes straight out the window when starting to include content that is dynamically loaded via Ajax.
So, regarding content that is dynamically loaded via Ajax inside _partial.html.erb's and thus not initially recognised by the DOM and unable bind any JS to new elements that are loaded;
I have a sneaky suspicion that the "Rails way" of dynamically binding JavaScript events to new elements is to put any JavaScript inside the js.erb file that dynamically renders the partial (?) But it somehow feels unintuitive to split all the javascript into so many different small files. I am currently including most of my JS inline each _partial.html.erb file which is giving me a massive headache when it comes to binding and unbinding events (which also btw feels really messy not to mention unintuitive).
Also, are js.erb files that are NOT in the asset pipeline, minified in production? Or are you supposed to put each js.erb file inside the Asset Pipeline for it to be minified?
-- Or am I missing/misunderstanding something?
I'm currently working on a project which has ROR in backend, I need to add a noscript tag to every page in the system to show a banner to the user.
Does ROR provide an easy way to add a piece of html to every page?
Add it to the application layout file /app/views/layouts/application.html.erb. That file gets loaded for every view unless you have disabled this layout or have used a different layout.
If you have multiple layouts then place the <noscript>...</noscript> in a partial and render the partial in all the layouts.
I am using a simple layout demo in my rails3 application
simple layout demo
in this demo there are 5 panel north,south,east,west,center
when I load my project this all panel show in each and every page.
instead of I want to some specific panel in different different page
give some idea how can i do that
Is the code from the simple layout demo all in your /app/views/layouts/application.html.rb? If so, rails will render everything from that file in every view. Since the jQuery code that does all of the stuff in that demo is in that same file, there may be no easy way to make that work with rails. The only thing I could think to do would be to have different .js files for different pages. each of these separate files would have jQuery code that creates the layout for that page, and is linked to that page using content_for and javascript_include_tag. I'm writing an app that uses jQuery UI and this is how I've had to do it. I created sub folders in my /public/javascripts directory that I named after my models to make it easier to keep all the .js files sorted.
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.
Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
Thanks.
I haven't used it yet, but I think that this is what you are looking for
Listen
This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings.
Intead of bound, handlers for events, are registered along with matching selectors.
And they'll still work for new added content.
This is achieved, using Event delegation, so the plugin will only work for events that bubble
You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.
I have a flash media player (similar to lala.com) that needs to continue to stream while people click around. I don't want to use an iframe.
So, I need to dynamically load all site pages with ajax no matter what link people click on.
I've got this working with Rails and JQuery for a single page. With this method I have to place a file.js.erb file for whatever controller is called. Example: example.com/home is called and I have to have an index.js.erb in the views home dir to respond to this.
I used:
http://railscasts.com/episodes/174-pagination-with-ajax
to get this to work on one page, but it wouldn't be DRY at all to copy .js.erb files to every controller.
Is there something I can do with the main application_controller or even with routes.rb?
I found a way to do this. You can load whatever pages you want via the jquery load method.
$('#result').load('ajax/test.html #container');
They will then be placed in the div with the #result id.
You can also specify a page fragment with #container so you only load the part you want.
This allows all your controllers to stay in tact etc with no extra js.
This is really going to impact your visibility to search engines. I also think it will mean you need to think about the flow of your controllers. Rather than having controllers responding with views that represent a page, controllers will respond with snippets of HTML/JSON/etc that get injected into the home page. Your home page acts as a coordinator, loading the content in and out. Perfectly fine to have js.erb files in each view folder ... as they should be returning content specific to an individual controller.