In my Rails app, I have a view that allows user to modify the rendered HTML, such as move the buttons around, changing the colors of a DIV etc. How can I persist those changes such that when the view is rendered next time, those changes are reflected?
My first thought was to store the modified HTML into database as a text column. However I really don't like this approach since the HTML can be arbitrarily large, not to mention performance will be very bad. I dug around and so far haven't a clue, which is puzzling to me since I don't think this is that rare of a scenario: WYSIWYG type editor, website builder application should all need to solve this problem. Which makes me wonder if I'm going down the wrong track.
Any insights are greatly appreciated!
To to this you need to give some position numbers to your buttons. After moving those buttons around call the ajax request to store those positions in serialize manner in the database or in the cache.
[button3, button1, button4, button2] or "button1, button4, button3, button2"
By looping this object (convert this object into an array ) you can display those buttons when next you render the view.
Same you can do it with div's color. Give some unique ids to your divs and store those ids with color-code.
I hope this will help you a little-bit.
Sounds like the user has lots of control over the DOM, so it doesn't make sense to store changes on a per-element basis - that'd be impossibly difficult to maintain and hugely inefficient.
The user will be updating both HTML and CSS, and those are essentially just strings, so a good solution may be to render the modified HTML and CSS as strings and store them in MongoDB documents (either together or separately), then reference those Mongo documents when you want to load up the page again.
I think I have found a solution, which is:
create a model called 'Site'
break a page into multiple logical parts, such as logo/header, navigation menu, content etc.
edit the page WYSIWYG-style
save the HTML into DB via this model
when the page needs to be rendered to reflect the changes, pull out the contents from DB and render them 'raw' in the template
Related
I have around 10 tables in my database. Building CRUD’s for these are easy with ie. reverse engineering in Netbeans, and with Netbeans 8 the pages look great thanks to primefaces.
So now I have 4 pages per entity; list, create, edit and view. Create and edit are similar except they bind to a new respective an existing entity. View is similar to edit, except it is readonly. The available buttons change too, of course, and there are probably other minor differences.
What I would like is to keep it down to 2 components per entity; 1 for the list and 1 for an instance. The latter should come in 3 flavours; editmode, createmode and viewmode. These components should be includeable in other pages, preferably both as dialogs and “raw” imports.
Anyone have an idea whether this is possible? Do I need to create my own set of renders, which can ie. render an inputText-component and a selectOneMenu as an outputText? As an example my first try with an inputText was just to write disabled=”true”, which renders the inputtext as non-editable. It becomes too greyish, but I guess that would be fixable by overriding the style. But preferrably it should render as a real outputText would when in viewmode. Maybe some clever use of css could do the job instead of renders.
Maybe the easiest way would be to store the viewmode of the composite component in the componenttree. Is this possible? I guess any component would have to look up in the tree in the render phase, to see how it should render.
For the buttons I could maybe do with just the rendered attribute.
Is it possible to go this route, or has anyone already made a framework for this? Or is it stretching JSF too far?
Form builder behaves unexpectedly when building a form within a table. It closes the form immediately.
Yes, I know that tables are generally bad. But in this case, I'm displaying line items for billing purposes, which is a pretty good use case for tables.
Each row is designed to be its own form that auto-submits on change.
View Source
I'm not sure if this is by design in Rails, or if it's a bug.
I get the whole opinionated software thing, but this behavior is a little extreme.
I promise that there are no bombs in my shoes. The framework should let me do what I want, even if you think it's stupid.
At this point I'm ready to copypasta the raw HTML myself. But, I really shouldn't have to.
What do you guys think (if that's not too gender normative)?
Your tool is acting correctly in this case, you are asking it to create a form under a tr.. when you should encase it in a th like you have for the Service, notes, and cost..
in short you can not have a "<%= form_for" directly under a tr.. move it into a th
I think the HTML generated by Rails would be the one you expect, it is the browser which parses the HTML which is having trouble with it. You can check that by using View Page Source instead of using Inspect Element to view the HTML generated.
My guess is the HTML from the view source would be something along the lines of:
<form class="submitless" action="/tickets/1294/labors/1090" method="post">
<td class="service">
<select>...</select>
...
</td>
</form>
But since this is not valid HTML, the browser might be having a hard time understanding it and is parsing it wrongly.
I am still pretty new to Rails and am working on a basic app and have run into a problem, which I can't seem to get around, sorry if this question has already been answered, but searching didn't yield me any results.
Basically I am creating an app that catalogues all of someones's clothes, Now the main page is the index page of everything they have logged, and each picture is linked to the show page where more information is revealed. I want to use AJAX to bring that show page to the side of the main index page. I am working off of another tutorial to figure this out but have run into a problem. On the initial load of my index page, I need to define a variable for that show page so that it can be rendered using a partial, but I can't use find(params[:id]) since the user hasn't selected anything yet. So my question is how do I set that initial value to either just the first item in the catalogue or not have anything appear, and then when someone does click the link, the sidebar shows the more detailed description of the piece of clothing.
Thanks for any help.
#object = params[:id] ? MyModel.find(params[:id]) : MyModel.first
But I think there's some problem with design of application.
You might have some luck working with the ruby gem 'PJAX'. Here is a screen cast showing you how to get that AJAX sidebar you want. Good luck
It sounds like you can just print the container element as normal, but leave it empty when the page is generated. Optionally, hide it via CSS. Then, when you load its content with AJAX, set it to visible or just populate it as normal.
Alternatively, if you really want to set it to the first item in the catalog (or in any ActiveRecord) you can use .first e.g. Products.first, and use that value to populate its initial contents.
I have some pages which are filled dynamically by content loaded with Ajax. My problem is that each time I go to this page, the old content is still there if it hasn't been replaced by new content...
I've thought about 2 home solutions like:
Creating a "template" page. By calling "pagebeforeshow", I'll copy the code from the template in the target page, and add there the dynamic content...
Each DOM where dynamic content must be put into, I had a class "clearcache" and by calling "pagebeforeshow" I do a $(".clearcache").empty();
I don't know how to deal with that. Have you ever got the same issue?
EDIT:
I bind the "tap" event to store the block-id into localstorage, to load dynamic content in the #PageBlock
Everything works very well (tap event, localstorage for the var, ajax loading). The issue comes really when I go from block to other blocks. The new content overwrite old content instead of beginning from a new "blank" page.
For example I have a list where I append datas I get from Ajax. If I switch to another block, the list is completed and not refreshed..
I could do something like empty the list, and then appending content, but I'd like something better because I have several pages/lists/dom like that...
Thanks for your help ;)
I faced a similar problem where the new contents where not shown on the page when i tried to append it.There is a simple solution where you can just replace append with prepend.
Example:
Replace
$("#divid").append(content)
with
$("#divid") .prepend(content)
I really like the visual effect where a new element seems to push an old element out of the way. Pretty common thing recently.
here is a static example.
http://github.com/
However, I'm trying to do it with recently updated products. Also would like to use scriptaculous if at all possible with periodically_call_remote using ruby on rails.
Without writing the code for you, here are the pieces you need to build:
an action in Rails that returns the new html. This will most likely render :partial
a PrototypeJS Ajax.PeriodicalUpdater to grab the html, and update the div with new items
in the updater's success handler, you want to ease the new elements in - use a scriptaculous effect to show the new html into the div, pushing the other elements out of the way. (not sure how you want to do this - you might have to move the existing elements down to accomodate the new ones, but do it slowly. I recommend you get the first two bullets working and then worry about the effects).
There's no specific need to use periodic_call_remote, it can be done entirely with unobtrusive javascript.