Just like in Gmail, I want to create a div which when loaded with ajax would output a #foo in the address bar to track what content would be loaded.
If you go to https://mail.google.com/mail/?shva=1#sent gmail, if signed in, will take you straight to your sent box.
I want to do the same. For example. I have a div that loads a list of recipes. Once a recipe on the list has been clicked content gets loaded from db in the same div and the address bar would say http://site.com/#recipe-permalink. If this link gets passed to a friend and the friend goes to http://site.com/#recipe-permalink the div would load appropriate content with that recipe.
Also is there a way to control more than one div? For example if url is http://site.com/#recipe-permalink#blue app would load recipe in one div and appropriate content in another div for #blue (what ever it may be).
Is there a way to make cells or apotomo have this functionality?
Are there any SEO concerns with doing this as well? Would the crawlers be able to pick up content through #foo links?
Probably not a full answer to your question but I believe this episode of railscasts would be interesting to you.
http://railscasts.com/episodes/246-ajax-history-state
Related
I would like to make my show page content editable by double clicking on the content and after I update that content, then that updated content would also be save in the database. I am working on Ruby on Rails. Any suggestions, how can make my content editable.
Rails 7 has Hotwire
This can also be accomplished with AJAX and UJS
Basically, when a user clicks on an area you want to be content-editable, you would replace that static section of the DOM with a form and a field. Then either clicking a submit button or clicking away would trigger a remote PATCH or PUT call to update the database and you'd again replace that section of the DOM with a static section containing the newly edited data.
There are quite a few good tutorials out there on this subject.
https://gorails.com/episodes/inline-editing-turbo-frames
https://www.driftingruby.com/episodes/inline-editing-records
https://bhserna.com/inline-crud-hotwire.html
https://dev.to/mikerogers0/inline-editing-with-turboframetag-hotwire-rails-284
https://akshaykhot.com/turbo-frames/
And even some gems for you to use:
https://www.ruby-toolbox.com/categories/rails_in_place_editing
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'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.
I currently have 2 page types in my Orchard CMS setup. One is for the front page, one for a detail page. On the front page, I have removed the body from being displayed, so that it just shows 2 HTML widgets.
Is there a way so that when someone edits this page, they don't get a body section?
A placement file might also do the trick: placement also works for the admin ui... That could enable you to make it show or not without requiring two different content types.
You can remove the Body Part from the page content type you use for the front page. This way people who edit this page won't see the editor for body content and the body won't be rendered at all.
HTH
I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.
After the user clicked the category I want to change the browser's address bar url from
www.mysite.com/products
to something like
www.mysite.com/products/{selectedCat}
without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?
With HTML5 you can modify the url without reloading:
If you want to make a new post in the browser's history (i.e. back button will work)
window.history.pushState('Object', 'Title', '/new-url');
If you just want to change the url without being able to go back
window.history.replaceState('Object', 'Title', '/another-new-url');
The object can be used for ajax navigation:
window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');
window.onpopstate = function (e) {
var id = e.state.id;
load_item(id);
};
Read more here: http://www.w3.org/TR/html5-author/history.html
A fallback sollution: https://github.com/browserstate/history.js
To add to what the guys have already said edit the window.location.hash property to match the URL you want in your onclick function.
window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
I believe directly manipulating the address bar to a completely different url without moving to that url isn't allowed for security reasons, if you are happy with it being
www.mysite.com/products/#{selectedCat}
i.e. an anchor style link within the same page then look into the various history/"back button" scripts that are now present in most javascript libraries.
The mention of update panel leads me to guess you are using asp.net, in that case the asp.net ajax history control is a good place to start
I don't think this is possible (at least changing to a totally different address), as it would be an unintuitive misuse of the address bar, and could promote phishing attacks.
This cannot be done the way you're saying it. The method suggested by somej.net is the closest you can get. It's actually very common practice in the AJAX age. Even Gmail uses this.
"window.location.hash"
as suggested by sanchothefat should be the one and only way of doing it. Because all the places that I have seen this feature, it's all the time after the # in URL.