I have music application in which I have simple player in footer. User can choose songs from main page list and play it in footer. Now requirement is even if user moves fro home page to other pages(profile, bookmarks) in application the footer player should not get reloaded and should keep playing audio selected on home page initially.
How do I do that? DO I need to load pages through ajax?
Edit:
I forgot to mention that development is 80% completed and footer reloads on every page load. How much of rework is needed if I have to use Ajax now?
Use PJAX. Reload just the parts of the page that you want: https://github.com/rails/pjax_rails
It's already integrated with Rails and everything you put outside of this block will not be reloaded:
<div data-pjax-container>
<!-- PJAX updates will go here -->
</div>
Here's another solution similar to PJAX and Turbolinks
https://github.com/igor-alexandrov/wiselinks
Some very good answers already, but i just wanted to explain your problem better.
HTTP requests is "stateless", which means that each request are fully independent and their is no way you can know anything about how the page was before you requested a new page. This makes it impossible not to reload the footer on each request, using only HTTP.
You can use cookies to keep information between request, so you could start the player where it stopped before the request, but it will still reload (and stop for a short duration).
You can also have the rest of the page in a iframe, and only change the content of the iframe.
However these solutions is not very good for various reasons, so i would strongly recommend the last and best solution: ajax.
The simples solution is properly pjax as #aledalgrande suggested (or wiselink as suggested by #adbeel). This will i practice make your site a "one-site-application" where you use ajax to replace specific parts of the page instead of the whole page. It should however be fairly simple to integrate, even in a existing rails application.
Since you put jQuery as a tag I suggest you either look at http://api.jquery.com/load/.
You can using plain old HTML and making it easier & faster to deploy since the app is almost 'done'. Later you should implement a better (ajax) option.
Simplified: index.html
<iframe id="mainframe" src="other.html"></iframe>
<footer>
Don't reload me pls :D
</footer>
on page navigation (links) you act only on the mainframe, leaving the footer not reloaded.
NOTE: This is ugly and may will give you problems but might serve you to do minimal modification and having your site live asap.
Then rewriting the whole thing to using ajax could be 'some work required' to 'heavy work required' depending on how the app is already implemented. note that will never be 'few or no work required'.
Related
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
I am using a script for Ajax from Dynamic Drive on my site to load content into my div. It has worked great for me until I created a page where I want links. For some reason I am finding that if I create a page with a single link, the page will not load. I can click on it all I want and the page still will not load. If I have a page that is just purely text content, it loads. Is this a flaw with Ajax, or am I not doing something right? My intention with my site is to have a "Store" section so I can use Amazon Affiliates. I can't even get my page to load even if I have a simple link say pointing to Amazon.com. Unfortunately this Ajax script has been the only successful way I've been able to get my content to load into my main div. For some odd reason links in the links section on my site will appear and that page will load, but not for my "store" page.
My site is: http://veterinarycare.atspace.cc
I'm not asking for a direct code, but just a step in the right direction.
'store.html' gives a 404 Not found... Does this file exist? That is probably your problem... Your links.html page for example has a link to ASPCA and that works fine.
You may also want to look into jQuery, as this is a bit neater for doing ajax and other javascript effects. You could probably get all that javascript mumbo jumbo down to 5 lines or so...
Also remember that your site isn't going to be particularly google friendly with all the content being loaded in via javascript.
I have a content listings page on a site I'm developing that uses ajax to pull items based on filtering picked by the user. (filter by date/ tag/ genre etc)
In order for the page to work for crawlbots and non-javascript users I have a standard listing of content as well, hidden, but with a noscript tag in the header making it display:block
(Have been told this is okay in html5).
Trouble is- the site is doing everything twice now- loading the content via ajax as well as the alternative, only to be hidden with CSS.
I know for sure this isn't best practice, but I'm struggling to think of a solution where the content only loads once. Any thoughts on the matter would be greatly appreciated.
You could display them always with CSS, and then hide them with JS. (Without the use of noscript)
I'm creating a website in wordpress. I have a music player in it as its for a music artist. But I want the player to continue playing while the users move through the website. I dont want to use iframe as i want the url updated so the page can be bookmarked. Or is there any way to update the url and use iframe?
Somebody on the Wordpress forum asked the same question.
The best way (technically) to do this is indeed to use a CMS that supports surfing the site without page-refreshes, so using AJAX, as #jonny suggested.
jango.com seems to do this as does another site I can't remember.
If you load every page via AJAX, there's probably gonna be a drawback if you care about search-ranking .
any way to update the url and use iframe
maybe you need something like this
main.html
<script type="text/javascript">
function change_parent_url(url)
{
document.location=url;
}
</script>
player.html
after each click (how?): parent.change_parent_url (new_url_here);
I am not sure, but I've seen similar, iframe approach on weborama.ru:
look for window.location=, maybe it helps
If you change the URL fragment (the part after the #) on each page change, the URL in the address bar can always be bookmarked. If you do this with a frame (probably the easiest way), every page load would update the URL fragment of the parent document. If an incoming link has this fragment set you open the frame not with the homepage, but with the requested content page.
Hi Masters Of Web Development.
I have a not that simple question this time. I have got a simple external HTML page, that I want to include in my site. The HTML page contains a submit form or something like that, and I wish to send this data from the form, without to reload the whole page. So I decided to put HTML page inside iframe. But, some people said that this is older technology, google doesn't like iframes, etc. So I want to use something like AJAX or JQuery to load that external HTML page, and to send submit form without reloading the whole page with it. :)
Any suggestions on how to make this?
Thanks in advance :)
Do you really need Google to index that iframe form? If that's the only iframe you have throughout the site, it aint going to be a problem in terms of google indexing.
About using the Iframe, if you are not comfortable learning and building ajax-type form, you'll still be fine (like what Frankie commented). Just make sure the form works, usable and compatible with popular browsers.
You want to use the jQuery Forms Plugin. Its very straightforward and easy to turn any normal HTML form into an AJAX form.