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)
Related
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
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.
Using MVC2 I have an AJAX form which is posting to a bound model. The ActionResult is returned as Content and is inserted into an element on the page by the magic of AJAX forms. All is well.
Now I need a button that will print the returned Content. I've tried returning the result wrapped in a full HTML doc with javascript along the lines of window.print(), but of course this won't execute and even if it did I don't want the whole window.
What is the best way to have my ContentResult printed instead of updated in an element?
I've used jqPrint for this same scenario. It basically either copies the content into an iframe and calls print() on that.
I tried using jqPrint which works for the most part but it was causing problems in IE, I was printing a model dialog.
I ended up using a print style sheet:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
I basically hided all the content of the page except for my dialog, div or whatever it is you are trying to hide.
This was the solution with the most consistent results across browsers.
I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an "edit" link/button next to every item, to toggle inline edits.
I did follow the tutorial at this link
http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]
However it is based on the form edit fields always being visible
I'd like to show a static list with field values, but let the user activate an edit field by clicking "edit" (e.g. button)
I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST - which does not send real data).
Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.
Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!
I found out how to do it, and it turned out to be real simple!
I created two partial views.
One for rendering each static item. I used used Ajax.ActionLink with InsertionMode "replace", and set the parent of the item as the target
The second for rendering the form. Here I used Ajax.Beginform with similar options.
On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.
I'm happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)
It sounds like you need an inline editing plugin for jQuery. I would try jEditable. I have not used it myself but appears to have extensive docs.
this entry might help: code + video + explanation ;)
http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/
-covo
I have an ASP.NET MVC page which contains a table, where every row takes some time to load. So I'm calling Response.Flush() after every row is rendered.
IE9 behaves the way it should: displays rows one by one. FF4 on the other hand, displays the page only when it finished loading completely, even though I can see in FireBug's Network tab that the rows are being received one by one.
Is there something I could be doing wrong on the server-side? If not, is there something I can do to my Firefox, so that it displays the page the way I want?
I would try using AJAX to fill the table. Maybe a row per call, maybe whole set at once.
Consider closing your document with </html> and add the extra rows in script; <script> tags may (in practice) follow </html>. Not a real AJAX solution, not strictly correct, but potentially a lot easier on your serverside.
A similar, but more correct solution would be to insert the script just before the </body>.
See also When does reflow happen in a DOM environment?