This seems like a question that would have already been asked, but I couldn't find quite what I was looking for, so I'll just go ahead and ask.
I'm trying to use angular.js to make an instant search function on my site. I want users to be able to search through Posts (by title and content, ideally) instantaneously, so after hearing about angular's ability to do this, I gave it a shot.
I have this going on in my posts.js.coffee file:
#PostListCtrl = ($scope, $http) ->
$http.get("posts.json").success (data) ->
$scope.posts = data
And this going on in the JSON doc it references (just to make sure it was working -- which it is).
data =
[
name: "Blog ex"
content: "This is my example post."
,
name: "Test posting"
content: "A different ex post"
,
name: "Test3"
content: "This has some unusual, unique vocabulary."
]
Now all I have left to do is get Rails to save an object (with name/content attributes) in the above JSON file each time a new Post is created, so that the search actually runs through meaningful data. I'm new to Rails/JSON/computer stuff and don't have a clue how to do this. I'm guessing it's in the posts controller, maybe in one of those respond_to blocks, but if anyone could point me to the right way to do this, I'd appreciate it.
If all you want is an instant search, or autocomplete functionality, you should not use Angular.js or any other JS MVC frameworks. Instead, consider using jQuery as #charliefl suggested, it's easy. A simple Ajax call will do it.
JS MVC frameworks are heavy, and you need to design the architecture from the bottom to suit them. Not worthy for such a single functionality.
To make this function work in jQuery, basically:
Listen the event on search box, say typing one or more characters
Catch the characters and use jQuery Ajax to send a POST request to a method in PostsController in Rails, say "search"
Make this method respond to JSON.
Update DOM according to server response.
Related
I am attempting to build a small proof-of-concept web application using the web2py framework. I'm so close, but my basic lack of knowledge of what's going on means I'm just hacking at it with pure guesswork rather than understanding what's going on. I was hoping someone on here could explain where I am going wrong...
The functionality I'm after is that the data needed to create the draggable items is held in a database table (and will ultimately form a hierarchy) with as little information held in the HTML as possible.
There's a fair bit of information for just about everything in this stack, so much so that I'm drowning in it, I don't know where to start. I suppose I should begin with what I've got so far...
The HTML:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
...
<script>
$(document).ready(function(){
$.ajax( {
type: "POST",
url: 'dragndrop.py',
success: function( response ) {
$("#draggable7").html(response);
}
} )
});
</script>
<div id="draggable7"></div>
The dragndrop.py script:
## My main draggable spawner
selected = [row.id for row in db(db.t_user_shop_layouts.id==7).select()]
return ''.join([DIV('draggable'.join(k), _class='draggable ui-widget-content', _snap=".ui-widget-header", _snapMode= "inner", _grid= [ 80, 80 ], _style='position: relative;') for k in selected])
And, just for completeness, the model web2py script (although the column I'm interested in is the "id" column, which is auto-generated):
db.define_table('t_shop_layout_items',
Field('f_item_display_name_string', type='string', notnull=True,
label=T('Item Display Name String')),
Field('f_item_icon_file', type='upload',
label=T('Item Icon File')),
Field('f_item_parent_id', type='integer',
label=T('Item Parent Id')),
auth.signature,
format='%(f_item_display_name_string)s',
migrate=settings.migrate)
I'm forcing the db call to only pick up one row at the moment (id == 7) just to get the ball rolling, but eventually what I'd like to do is have the (db.id == db.f_item_parent_id) items shown first. Then when double-click, any (db.f_item_parent_id == this.id) children get spawned using helpers. Then I'm going to get an 80x80 grid size target to land on to set shop layout, and save to db. But all this paragraph is for later, I'm just giving you an idea of where I'm going with it.
Finally, some great tutorials that have helped me along the way, but were either not web2py (PHP seems popular for this) or not dynamically spawning (but hard-coded in the HTML, or what-have-you. If I've missed something obvious, please let me know:
An excellent fiddle: http://jsfiddle.net/robertrozas/qLhke/25/ and its stack overflow beginnings Jquery drag drop form hidden value inserting into php mysql
The web2py documentation: http://web2py.com/books/default/chapter/34/11/jquery-and-ajax
OK, hope that's enough! Any help would be appreciated!
In web2py, you do not create .py files and then use them as URLs. Instead, you create functions in controllers and have URLs of the form /appname/controller/function. See the documentation on dispatching. It is also best to use the built-in URL() function to generate URLs. Also, this should probably be a GET request rather than POST.
You might also want to look into web2py's built-in ajax() function as well as Ajax components.
Regarding your data model, if the f_item_parent_id field is a self reference, then you should define it as a reference field (i.e., type='reference t_shop_layout_items').
More generally, before proceeding further, it will probably be very helpful if you read more of the documentation, particularly chapters 4, 5, 11, and possibly 12.
I have been banging my head over this for the past 3 days (No kidding!!!)....It seems like a very simple thing but I am just unable to do it. So I'm putting the question out here, and am open to any method which would work.
BACKGROUND : An advanced search form on submission used to generate an URL too large for the server. So the form had to be submitted via POST. So far, so good. Form submitted successfully, and the result was displayed. Only remaining problem was pagination.
As it's a POST call, it ruled out will pagination. While will-pagination merges param page to the existing params, but the problem is that it shows on url which results in the same error.
QUESTION: So is there any way, if the user clicks a link NEXT, I can
a) Update the page param
b) Keep the existing params
c) While not changing the URL
d) Transfer control back to the action in controller?
The only solution so far suggested was have a hidden form, repopulate it's value and submit again. The form's pretty complex, so if there is a cleaner way I'd like to know.
I see what you want from your comment. So editing my reply accordingly. You want the information as to which column is being selected in the sort to be available to the controller without having that information available in the url string, and you want to use GET for this not POST
The challenge you have is that you want to preserve state between requests and you need a mechanism for doing this. POST preserves that information by sending it in the body of the POST request. GET does this by allowing you to populate the query string. The other method for preserving state is to use a cookie.
You can manipulate the url with javascript on the page. There are tutorials online for that.
But if you just want a simple controller hack as you say in your comment then the simplest one I can think of is to allow the user to make the GET request to the url with the query params in it, then handle this request in two steps - step one saves the query information to the cookie, step two redirects them to the url with that query string data stripped, and you look on the cookie to see if it has those fields before building your data for that page. It's hacky but it works.
def sort
session[:sort] = params[:sort]
redirect_to url_without_the_query_string
end
There is also the new html 5 feature:
window.history.replaceState(“Replace”, “Page Title”, “/mypage”);
from this stackoverflow answer here: How to remove query string from url using javascript
However I'm not sure I'd recommend messing with the url after load like that (I don't know enough about that solution so I'd recommend you read that answer and see if that fits). So, if you MUST lose that data from the url string, because you need to somehow pass it between requests you either have to use POST, or use the session cookie/redirect method I describe above.
Does your html <form> have an action attribute? If not, add one that points to the page.
If you want to preserve the current GET params so that results from the POST can use , you will also need to modify the javascript triggered on the heading links so that as well as (or instead of) modifying the query string, they write the same data to hidden form fields (which of course then get posted in the body of the request). Your JS library may already include helpful functions for that.
In this railscast our good friend Mr. Bates walks through a solution to creating an app that can search, sort, and paginate a set of data. When going through AJAX searching he provides a solution that will display results of the search the moment a user enters input into the search box. Here is his solution:
$('#products_search input').keyup(function () {
$.get($('#products_search').attr('action'), ↵
$('#products_search').serialize(), null, 'script');
return false;
});
However he states "Note that this is only a quick demo and isn’t the best way to do this. There are several jQuery plugins that you can use if you do something like this in a production app." I'm looking for an explanation on why he believes this isn't suitable for production. Thanks in advance!
There are two major issues I see with this solution. The first is that you are making an HTTP (AJAX) request every time a key is pressed, which will not be the most efficient way of doing this. The second is that you are basically calling eval in the response, and eval is bad as it can lead to malicious users executing code you don't want to be executed.
Some suggestions on improving:
Use a proper JSON parser and pass the data back as JSON. (you can use $.getJSON)
Throttle the request - don't do it on every keyUp, maybe start a timer and only submit the request if no keys have been pressed in the last second, meaning it won't make lots of calls for people who type fast.
Cache the response. If you have already searched for something, then there is no point fetching the data twice. Keep a note (in a JS Object) of previous calls in this session and their results.
I am trying to build a simple jQuery UI template and populate it with data stored in the localStorage.
I need to set the local storage with a list of guests and have the user edit the list. When clicking update, the changes are sent back to the server.
<ul id="guests">
<li>
Name: ${name} <br />
Phone: ${phone} <br />
Email: ${email}
</li>
</ul>
I am really new at this and have no idea what to do. I am just interested in setting the local storage when the page loads and populating the template.
Can someone please provide a short tutorial?
I thought this is a simple question... Can someone please let me know in case it is not possible at all? Thanks!
you say you want to save the data to localStorage, but also that you want to send modified data to the server.
I would suggest that you divide this problem up into (Part 1) learning how to save locally to localStorage and rendering that content with templating and then (Part 2) learning how to store on a server. I can help you with Part 1, since quite frankly I'm still learning about Part 2 myself.
Okay so, two subtasks:
using localStorage to persist data
using jQuery templates to render data
Using localStorage
You haven't specified where your data is coming from, so I'll assume you have some JSON. For simplicity I'll just use this data:
(You might be wondering why I added content that isn't plain ASCII -- it's just a habit of mine, I believe in testing with realistic text from the get-go. When we finally render this data, it should look right in your browser.)
var philosophers = [
{
"phone": "1-800-123-1937",
"name": "H\u00e9l\u00e8ne Cixous",
"email": "helene#stanford.edu"
},
{
"phone": "1-800-000-0000",
"name": "\u041c\u0438\u0445\u0430\u0438\u0301\u043b \u0411\u0430\u043a\u0443\u0301\u043d\u0438\u043d",
"email": "mikhail#ispitondns.com"
},
{
"phone": "1-800-770-0830",
"name": "Jayar\u0101\u015bi Bha\u1e6d\u1e6da",
"email": "jay#ancientindia.edu"
}
]
So we need to get this into localStorage, just to have some data to start with.
The trick about localStorage is that you can't just directly store JSON objects. You can only store strings. There are some libraries out there designed to improve on this situation, but we'll just convert our objects ourselves. To do that we'll use JSON:
localStorage.philosophers = JSON.stringify(philosophers)
Unsurprisingly, JSON.stringify turns JSON objects into a string, and that can be set directly as an "attribute" of localStorage.
(If you're using an old browser, then you might not have the native JSON object -- there's a library you can include for that too.)
Okay, so now we have some contact data stashed in localStorage with the label of philosophers. (Hey, you never know when you might need to call a philosopher!)
To get that data back out and into a Javascript object we can do something with, we use another JSON method, JSON.parse.
philosophers = JSON.parse(localStorage.philosophers)
This is all pretty artificial, since we've got the philosophers data in the first place, then we stringify it, and then we store it, and then we take it right back out, and then we parse it, and then we're back where we started. But in reality such data will come from some other source -- perhaps an external file or a web service or whatever.
Using templates to render objects
Since you used what looks like jQuery template syntax in your template, I'm going to assume that's the library you're using. The jQuery docs show us how we can render a variable containing some objects (like what we have in our philosophers variable) with a template, here's the key bit of those docs:
// Convert the markup string into a named template
$.template( "summaryTemplate", "<li>${Name}</li>" );
function renderList() {
// Render the movies data using the named template: "summaryTemplate"
$.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}
Here's one way you can get your template to work (there are other, arguably cleaner methods, but jQuery templates are a topic unto themselves):
var myTemplate = "<li>Name: ${name}<br/>Phone: ${phone}<br/>Email: ${email}</li>";
$.template("contactLi", myTemplate);
That creates a template and stores it in a variable named contentLi. (Note that $.template wants that given variable name given as a string, which strikes me as weird. I find the way jQuery templates names and defines these methods confusing, which is one of the reasons I prefer Mustache for templating. Shrug.)
Also, note that we don't have the ul included in the template, because that's not going to be repeated for each rendered object. Rather, we're going to add the ul as a hook in the markup, and render the assembled template repeatedly as a child of that. Which just takes a single line with jQuery templates, rather nice:
$.tmpl( "contactLi", philosophers ).appendTo( "#guests" );
So there you go, a rendered list.
I know this doesn't answer your whole question but there's a lot here to start with.
Here's an example you can try out, it ends up rendering something like:
Name: Hélène Cixous
Phone: 1-800-123-1937
Email: helene#stanford.edu
Name: Михаи́л Баку́нин
Phone: 1-800-000-0000
Email: mikhail#ispitondns.com
Name: Jayarāśi Bhaṭṭa
Phone: 1-800-770-0830
Email: jay#ancientindia.edu
(Hehe, boy, SO's syntax highlighting doesn't handle that Unicode text very well!)
try AmplifyJS -- can extract your data as json the same way you would as $.getJSON
I am in the process of building a super simple CMS to handle smaller "static" page type projects (e.g. - small sites for friends). I have different "page types" that I would like to add. I built something similar in Coldfusion previously. Looked something like this:
table content_type:
content_type_code varchar(10)
content_type_name
table content:
content_id
content_type_code varchar(10)
content_name
content_desc
content_url
I would create a content type called "blog" or "photo" and each time a content was added, it'd get assigned the content_type_code. Then in /blog/ I'd query for all content that had a content_type_code of "blog".
Now that I'm using Ruby/RoR I am trying to think about things differently. I was thinking a better way might be to use nested pages with awesome_nested_set (https://github.com/collectiveidea/awesome_nested_set). But I'm not sure if that's the best solution.
Then I could create a page called "blog" and add to that many pages. So essentially the top level would take place of the "content_type" from my previous example.
Can someone steer me in the right direction on what the best method would be? I'm a newb looking for a kick in the right direction.
EDIT
I should add that the only real thing that I would change between the different "types" of content would be the layout and where they are displayed ("photo" content at /photos/, "blog" content at /blog/).
I try to recap:
You want to build a CMS
Your CMS manages a single web site
A web site is made of content
There are differenti type of contents, and I am assuming every type of content has its own behaviour
Contents are organized in a tree
Here is the plan I suggest you:
Create the Content resource; use the scaffold to have something already working, adding few field (title and body in example)
Add validations to your new model
Write a couple of unit tests against your validation (quite useless, just to see how it works)
Install awesome_nested_set and manage to make it working with your model
Work on the UI to make it quite easy to create new content, move content around, edit a single content
Now its time to implement the content types; STI is the Rails way, but I have to warn you it can be really hard. I suggest you to reiterate 1, 2, 3, 5 to create new models for Photo and BlogPost
Once you will be there, you will have hundreds of ideas to implement. Have fun :)
Instead of using content_type I would rather let the user choose a model on a selection page, like "photo" or "blog" and load an editing page based on that selection. So the user wants a new 'blog'-entry they get redirected to blog/new or 'photo' for photo/new. It's the easiest way to go in terms of usability and your controlling backend and you don't have redundant data (for example an empty photo url which is not necessary in a blog-type) in your database.