Sails.js load object in all views - javascript

I have a simple website with a main menu. The menu has categories like "T-Shirts, Shoes and Accessories...". But its dynamic. All of these categories are in a Model "Category" and the words can be different.
So, how can I have this menu rendered on every page without passing data to the view on every controller like:
Category.find(function(err, categories){
res.view({categories: categories});
});
Thanks!

Define your header in a separate file call it as header.html and include it in layout.ejs using
<% include ../includes/header.html %>
And show appropriate menus on each page depending on the condition whether it should be displayed to normal user or admin by adding roles field to category collection.

If you want it on all pages, it might be easiest to write a customer middleware function in config/http.js that adds categories to the local variables.
See sails docs - adding-or-overriding-http-middleware

Related

Auto filter in searchbox in Rails App

I've a City model and there is 81 cities in this model, only db field is name.
I want the user to be able to select a city from a dropdown in the navbar, but also the user should be able to filter these cities quickly by typing a few letters at the beginning. The exact example that I want to do is in this site: www.dabble.co
I dont know which way should I follow to do this. Any idea is wellcome.
If you're using JQuery there is http://selectize.github.io/selectize.js/, which has an example for the country select bar.
You want to make a collection of your cities accessible in the controller, which renders your form.
E.g.
def new
#cities = City.all
end
You can easily add the corresponding <select> form tag with the following helper:
<%= select_tag("cities",
options_from_collection_for_select(#cities, 'id', 'name'),
id: "selectize_cities" # sets the id of the select tag
)%>
Depending on your Javascript+Rails setup, after requiring the all components of selectize.js you can add to your javascript file
$("#selectize_cities").selectize();
If you want to manually implement this (without jQuery), one way could be to pass the data into a div tag in the html view and access it with Javascript
<%= div.tag(id: "selfmade", data_cities: #cities.to_json)%> #tag helper
const cities = JSON.parse(document.querySelector("#lol").getAttribute('data_cities')); //plain js
There is also a Railscasts on youtube "simple search form" which should help you move further!

Dynamic route code does nothing

This is my twiddle to be more clear :
https://ember-twiddle.com/1454b9f4a64c197879d13f756401e561?openFiles=router.js%2C
I am trying to make a dynamic route. When I click a picture it should go to its detail page with different URL and different content. Like, when I click on the first pic it should go to localhost:4200/pic/1 or localhost:4200/1.
I'm trying to do the URL dynamic but I can't so far, when I click a picture it does nothing. What am I doing wrong?
Also, at the beginning I created routes and templates for every picture but with bigger data it won't be possible. How am I gonna handle this?
I got it working by:
Not using Ember-data....I'm not sure how to make that work in Ember Twiddle. I just used a plain array of objects.
I passed in the model to the route in the link-to
Here is what the template looked like with the pic model passed to the route in the link-to:
{{outlet}}
{{#each model as |pic|}}
<div>{{#link-to "pic" pic}}
<img src={{pic.image}} width="300">
{{/link-to}}</div>
{{/each}}
See my working twiddle here: https://ember-twiddle.com/4b2b6467199622ae740259622c76ba9b
While using {{link-to}} helper for dynamic routes you must include the dynamic attributes also.
{{#each model as |pic|}}
<div>{{#link-to 'pic' pic}}<img src={{pic.image}} width="300">{{/link-to}}</div>
{{/each}}{{outlet}}
Here the pic model is passed to the link-to helper.
But this wont work if you are directly accessing the page for a specific pic.
Also rename your models/images.js to pics.js. You must also remove the id attribute from pics model as Ember.js do not allow to set id manually.
You are need to pass the parameter with link-to like
{{#link-to 'pic' pics}}
because you are accessing the id in the pic route from params.id but not send any parameter.
twiddle

How to dynamically render views based off model in Ember JS

In my program I have a front display that the user sees when they first login. They have the option to sort the various sections of this front display to their liking. Each of these boxes has a model in the database and then also a model that links to the box for that specific user and the sort order to display the boxes in.
What I need to do is go through each box in order(already figured out) and either render a view(I can work with this) or render an entire controller(probably harder) to the page.
I've had moderate success with something along these lines
In the template
{{#each model.character.overviewBoxesSettings }}
{{ view App.OverviewCustomView contentBinding="this" }}
{{/each}}
In the view
App.OverviewCustomView = Ember.View.extend({
templateName:function(){
return this.get('content').get('overviewBox').get('viewName');
}.property('content.overviewBox.viewName').cacheable(),
_templateChanged: function() {
this.rerender();
}.observes('templateName')
});
Now this actually works, but the issue is that the views seem to persist when I change route. Also when I switch back to the front route it creates another set of the views.
Any ideas on how to solve this would be appreciated.

Get elements of a query-set with a jquery get function. Django

In my django app I would like to display a text when a user clicks on a button, without refreshing the page. When the user clicks again, I would like an other text to be displayed, still without refreshing the page.
The informations (texts) I wan't to display are in a query set, named "information".
So I would like to know how to accomplish that.
Here is the way I try to do it:
I create a view where I store my query set:
def get_information (request):
information= Information.objects.filter(object1__id= X)
Then I create a jquery get function (in the template of the page where the user clicks) in order to get informations on this list:
function get_info(){
$.get('/mysite/get_information', {'information':information}, function(data) {
$('.information').html(data);
});
};
And then I render it in my template with a submit button and a onclick="get_info".
But I don't know how to make the request get a different information at each request, in order that the user does not get the same information twice.
Thank you a lot for your help.
Take a look in to Django Pagination. You could create the Paginator object in your view and then you can display message from the queryset based on the request from the client side. Let me know in case of any issues.

Rails nested form, create and then update new associated models without page reload

Relevant info
I have a User model with plenty of attributes and several has_many associations.
I have a BIG form to edit existing user info, including nested fields.
I have divided the form into several forms in different divs and show only one form at a time. (i.e. tabs in UI)
User can save info by clicking Save button, which submits currently visible part of form via Ajax. No page reload. Just updating a status box with rjs.
I use Ryan Bates example to dynamically add fields for nested models.
Problem
If a user adds fields for associated models using js
and submits form n times
n new associated models are created
this happens because js-added fields have no hidden_field for id attribute and every time form is summited, parameters do not include id for that specific nested record. i.e. first time it is ok, after second ajax post request (reminder - page does not reload) that record should be updated, but instead new record is being created because there were no id parameter passed for this already existing record.
Question
Should I make dirty hacks in controller to find out if new records should be saved and if they are - update dynamically added form in view by adding hidden field with newly saved record id value. The question is - how do I do it gently, writing the most maintainable and robust code possible?
At the moment update action is dead simple, with ideas of dirty hacks commented
def update
#user = current_user
respond_to do |wants|
wants.js {
#analyze parameters to find out which
#nested model is going to be saved (not updated)?
#also save identifier of nested record in view i.e. {...."324324234" => {:a => 1, :b => 2, .... etc}}
#user.update_attributes(params[:user])
# check if the record of the model was saved and take it's id;
# use identifier 324324234 to find nested form and insert hidden
# field with record id using rjs
}
end
end
I hope I have defined my problem clearly. I would really like to avoid such hacks and write pretty code. I also wouldn't like to reload the page or part of it with ajax. Any suggestions?

Categories

Resources