Loading data from database by Ajax - Ruby on Rails app - ruby-on-rails

Sometimes at websites all comments or other data from DB is hidden by default. When user click at link like "Display comments" all comments from database are dynamically selected and placed under the content. It must be great for mysql performance, because content is generated only when user excatly need it. I would like to implement this stuff at my app.
I've got one idea to do this so far. Remote action with #comments = Content.comments and next page.insert_html at RJS template. Is it good idea or maybe I should choose different way?

The decision is purely based on the application that you are developing. For example if in case of stack overflow it does not make sense to show only the question and show answer link. But in case of a blog post it may be fine.
In the above situation, I don't think there will be a good improvement in performance by removing the comments of the content on show page. We can achieve the same functionality by making use of javascript methods. Hide the content on page load and show in on client request.

Related

Controller-View Interactions in Rails

I'm endeavoring to learn rails and am doing so by completing some super basic projects. The current thing I'm working on is a higher-lower game - the user guesses a number, and the server checks the guess against a randomly generated secret number, and responds if the guess is 'higher' or 'lower' than the actual number.
I've got most of the game complete, but I've realized I have no idea how to actually implement notifying the user if the guess was too high or too low. Other view changes in the game are handled by rendering a whole other page, but for this one I wish to display new text in the current page.
This question isn't really to solve my problem per se, I'm just trying to get pointed in the right general direction with controller-view interactions such as these.
Currently the only way I can think to do this is
Logic in the View
Make the data of whether the user guessed higher or lower available by using an instance variable, then use ruby in the html.erb view to determine what text to display based off this.
This seems ... dumb, and in violation of things I've learned about MVC in the past. Any other suggestions would be appreciated.
The cleanest way to do this in the "Rails" way would be to have a new path in your controller, for example show_result, and render a javascript view (show_result.js.erb). Then use a simple line of javascript to update the current DOM. Remember to set your form submission or your link to :remote => true and you're good to go.

Rails - manipulating data in popup

I'm new in Rails, I have a Meal model which has many Products. Meals are assign to User (maybe this is important for a concept). In meals/new.html.erb I want to create new Meal as follow:
Click the button "Display Products"
On the same page (meals/new.html.erb) open modal (pop-up) with all products assigned to current user ( I have help method for current-user). It should be displayad like a list or grid with checboxes for example.
Then user can check few products and click "Confirm".
After that in meals/new.html should be appeared list of chosen products with additional input to fill their quantity.
So I have two problem here.
How should I display modal? Is needed any Ajax (I'm not so familiar with this technology)
How can I pass products between view and modal?
Could you help me a little to achieve these goals?
Regarding your first problem, displaying the modal is fairly straight forward. Essentially you will create a div with the proper bootstrap classes to be hidden when the page is loaded, and then create a button that makes it visible. I would recommend either reading over the W3Schools entry on modals, or from the appropriate part of the bootstrap javascript documentation.
Regarding your second question, this depends on exactly what you mean. The modal is part of the view, so if you're only trying to put information that is currently on the modal back onto the "page" behind it, you can do so fairly simply with javascript (copying content out of one element into another, or updating states of inputs). If, on the other hand, you're trying to use the modal to retrieve information from the server (for instance if you wanted to show a list of possible options, and then display detailed information about the selected items from the database) that would require Ajax.
If you have any snippets of code that aren't functioning as you expect, feel free to add your View to the question. In cases like this, usually the best way for us to provide help is for you to take an early crack at this, post the relevant code, and then seek answers for the things that behave unexpectedly.
I hope that helps.

Ember search engine

I am creating an Ember app that has a search engine built into it say for houses. My results change a lot as houses are found / added or removed / sold. Therefore my search results change all the time.
I also have pages for each house which has a similar houses section on it that shows always changing similar houses to this one.
I am trying to find the best way to make this app crawlable to search engines.
I could like discourse use noscript tages for each page but as all my houses pages can hold different information and structure depending on the agent/ seller this would be a lot more work basically duplicating what the client is doing!
I could go down the phantomjs route and cache all my pages and serve via the escapedfragment_ method but i am thinking this would be a resource intensive approach with content changing so much. Also with my house pages having similar houses on them that can change depending on the user / location etc, i am not sure how to cache these sections.
Another method i am toying with is to convert my page / section templates into a serverside template so i can render it on the server. For example when a customer creates a house page via my ember app in the format they require they click publish and i convert the rendered html into serverside template with placeholders etc for data.
Anyone help with this ? Any ideas / suggestions / advice would be great!
I think you've kind of answered your own question. This is all about trade offs and finding the solution that is best for your particular case. There is no silver bullet. Personally I go with something close to the noscript route, but instead of putting things inside noscript tags, I put them in regular divs with a class of no-ember, which are visible by default. Then when the document is ready I test to see if the client supports push state. If so, I initialize my Ember app and hide the no-ember divs. If not, then all of the no-ember divs are visible so that the client can see/use the content like normal.

Rails Ajax Or Javascript?

I was wondering which way would be the best for my following problem. and maybe sample on how to do it also
I have the following models: customer, music, books.
What I would like to do is when a customer wants to go into the edit page then automatically customer general information such as name, password show up! But on an other tab by pressing music which his another model then music information comes up in the same. Sorta like facebook and twitter edit page do it.
Now each of the form are rendered by the following code line at the moment
<%= render 'general'%>
but how do i include them in the link and should i just use javascript and toggle them or use ajax ??
Thanks
Well, this has little to do with Ajax, since all information you need aparently would already been loaded by you main customer object.
What i understand you want is something like the tabs javascript plugin of twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#tabs
You put the different content (music/books/etc) in different divs and when the tab is clicked, the content changes and the user gets a better experience.
Take a look at the link, it is super easy to set up this plugin on your project.

How can I support user edited content in a complex web application?

I'm building a web site (using ASP.NET, MVC 3, Razor) and I'm not using an off the shelf CMS. This is because I evaluated a lot of existing CMS's, and found them all to have a massive learning curve, tons of features I didn't need, and they force you into a page oriented model. By "page oriented model", I mean that you can specify a general page layout and stylesheets, but the object that the user can edit is a whole page, which displays, for example, in a central panel, and maybe you can customize the sidebars as well.
But this site is very design centric, and needs to be much more fluid and granular than this. By "design-centric", I mean that the site was built in Photoshop by a graphic designer, and there is heavy use of images and complex styling to map the design to HTML/css/js. Also, every page on the site is totally different. There are also UI elements such as accordion panels, in which we need the user to be able to edit the content of each panel, but certainly not the jQuery+HTML that powers the accordion. The users are subject matter experts but very non-technical.
So I'll have a page with lots of complex layout and styling, which I don't want the user to access, but within this there will be, say, a div containing text that I would like the user to be able to edit.
How can I best accomplish this?
So far, I'm implementing this by having snippets, which are little units of html, stored in external files, that the user can edit. In run mode, these are loaded and displayed inline (with a little "Edit This Content" button if you're logged in and have permissions). If you click the Edit button, you get a little WYSIWYG editing screen, where you can edit and save changes. So I can control all the messy stuff, and put in little placeholders for user editable content. But this isn't entirely simple for me, and I'm wondering if there's a better way.
Don't mean to necro this, but it seems to be the most relevant question to what I'm currently researching. I recently built something similar as you described above, but I'm pulling data from a database instead of static files. For each page (like /about or /contact) in the Controller I pull data for that page from the DB in the form of a Json string key/value pair. Key is the placeholder tag, Value is the.. value. After deserializing, I simply populate a list and assign it to a ViewBag, then in the CSHTML I ViewBag.List.Keyname to grab the text.
I have a small admin control panel which allows me to modify the text in the database. Having little hover-overs like you do is a great idea though!
Well, I stuck with my original plan:
So far, I'm implementing this by having snippets, which are little
units of html, stored in external files, that the user can edit. In
run mode, these are loaded and displayed inline (with a little "Edit
This Content" button if you're logged in and have permissions). If you
click the Edit button, you get a little WYSIWYG editing screen, where
you can edit and save changes. So I can control all the messy stuff,
and put in little placeholders for user editable content. But this
isn't entirely simple for me, and I'm wondering if there's a better
way.
It works reasonably well for now.

Resources