Rails Displaying Recommendations - Facebook/Linkedin style - javascript

I'm writing a Rails 3.2.1 app and I would like to display suggested items to a user in the following way:
Currently, I have an array of suggested items, and I want to display 5 suggestions at a time. I would like the user to be able to
click on the item to link to something.
click on the close button (and "X") to
if the user rejects the recommendation by clicking on the close button, we display
another suggestion in the same place on the list of 5 displayed suggestions. So the a new suggestion takes the place of the rejected one.
Any ideas on how I can do it? I have tried searching on the web but I can't seem to find a useful direction. Any help would be much appreciated!

Well, you could 'store' the decision of the user in session/cookie/database depending on how persistent you want the decision to be.
After the user rejects a suggestion you could just reload the suggestions taking the decision into account.
E.g.
Suggestions.where(["id NOT IN (?)", User.rejected_suggestions])
(Assuming you have an m-to-n-relation between User and Suggestions called rejected_suggestions)
And the way it is displayed is just javascript.
You could use for example jQuery and fade the rejected suggestion into hiding and let the new one slide in.
http://api.jquery.com/fadeOut/
http://api.jquery.com/slideDown/
And for reloading and storing the decision just use an ajax call.
Alternatively:
Load a few more suggestions (than 5) and only use JS to fade them out and slide new ones into the view - and when all suggestions have been rejected just display something like: 'We are sorry, there are no suggestions for you at the moment.'

Related

One Modal, Ajax, and constantly updating data

I have reached a point in my project where I cannot figure out how to use Ajax to keep going. I am new to using it, but I'd like to think that I have a basic understanding of how it works.
I run a site where I take form data and post it into a database, then send it to a webpage where it displays in bubbles. Users can then click these bubbles and pop open a modal which has more detailed information than what is presented in the small bubbles initially displayed.
I've hit a wall where I don't know how to open a modal and have it live update with new information without closing, no matter what the bubble they click is (which can have different types based on different form information sent).
And to be clear, by bubble I just mean a compact div that when clicked opens the modal.
I've looked everywhere for solutions to this, trying my best to apply knowledge from other projects to what I'm trying to accomplish with to no avail. Suggestions are appreciated!
I'd suggest you to look at the load method this should be enough for what you're trying to do.
If you want a live update of your modal you have two ways to go about this:
Implement polling in AJAX. Send an AJAX request every X seconds to the server and have it update the <div>'s in your modal.
Use WebSockets. This is far more complex, and solution 1. is probably good enough.
This Stack Overflow post should help get you started: jQuery, simple polling example

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

Getting content from current tab (AjaxTabbedPanel)

I'm doing some tests on a wicket prototype here, and I got stuck on this little issue.
I have an AjaxTabbedPanel within a page, with 5 tabs. It's working ok so far but I'd like to add some behavior BEFORE the new tab request has been processed (e.g do some validation and storing something on session before the tab changes).
AjaxTabbedPanel let me override the onAjaxUpdate(final AjaxRequestTarget target) but this one takes place AFTER the new tab has been set. I'd need something like "beforeAjaxRequest".
Is there any way of doing this without changing things around too much? (Sticking with AjaxTabbedPanel, no JS, etc). You might think "why don't you load the whole page at once and navigate with JS tabs", but I'm trying to work on a native wicket tab solution for now (there are reasons for that).
Thanks in advance!
Try overriding the newLink(String linkId, final int index); method. Thats what an AjaxTabbedPanel does when it extends TabbedPanel to add the ajax behaviour http://www.jarvana.com/jarvana/view/wicket/wicket-extensions/1.2/wicket-extensions-1.2-sources.jar!/wicket/extensions/ajax/markup/html/tabs/AjaxTabbedPanel.java?format=ok.
You could set up the newlink so it uses the same code as the ajaxtabbedpanel but adds a validation clause so when a user clicks it, it validates first and then decides whether to change the tab and update.
Hope that helps.

Fetching product details on mouseover

I want to integrate a function into my website, whereby if a user hovers their mouse on the name of a product, a box appears which will show the details of this product. For this I would preferably like to use either CSS or Javascript, I am not really sure how I would go about doing this though. Can anyone offer me some guidance please? I am currently using the JQuery UI with essentially the same code as the shopping cart code seen here :
http://jqueryui.com/demos/droppable/#shopping-cart
Thnk you very much for the help.
If you want to be fancy and use jquery, here is a list of popup plugins that you can browse.
If the product information isn't too complicated I would suggest using CSS as it is simpler. Also, you probably want to have the data already loaded, so the user doesn't have to wait a round trip to your server every time they mouse over a product. Here is a simple CSS popup tutorial.

Display notification messages to users at specific intervals (Ruby on Rails)

I am working on an application with basic authentication functionality. When a user registers, I would like to display a javascript lightbox message containing a brief introduction to the application. Additionally, I would like to display notifications when a user logs in after a set time span (1 week, 1 month, etc). I'm not sure flash notifications will suffice as I plan on having slightly complex html in the messages, with forms/links/etc. I can think of a number of hacky ways to accomplish this, but none of them seem elegant and robust.
Any ideas?
You can just keep track of the login count and when it's their first login just activate the lightbox.
if current_user.sign_in_acount == 1
# render welcome lightbox
end
if current_user.created_at > 1.week.ago && not_notified?
# render notification lightbox
end
There won't really be an out of the box solution or anything and since you have two different types of scenarios for messages(time vs. login count) it's something you can just do for the small amount of times you are going to have to do it.
Maybe append a special parameter at the end of the URL after the user registers, and have JavaScript check for it? So after registration, send user to /whatever_page?just_registered, and have some JS code to check that.
if(window.location.search.test(/just_registered/)){
// pop up lightbox
}
Or you can just do a temporary cookie, set it, let Javascript check it, show the lightbox and delete it right away. You can do something similar with the display notification thing.

Categories