I have a very sketchy idea of how pjax works and therefore a very sketchy implementation of it on my site. I have this code at the beginning of all my jquery
$('li a').pjax('#container');
and the thing that you would click looks like this
<li><div id="sortmain" class="catagories">main</div></li>
so when I click that li it loads the main.html into the container div. But it is glitchy and pretty slow. How can I improve this? Also, because main.html is a real document when I refresh the page it only shows what main.html outputs, how do I fix that?
I can't tell why it is slow or glitchy without looking at your site.
If you want main.html to be a full-page (so that refresh works without server-side processing) you can use the fragment option in pjax:
$('li a').pjax("#container", { fragment: "#container" });
This will update the #container div with PJAX (if pushState is available) and on older browsers your site will just work the way it used to.
Related
link to bellow website is working perfectly fine,
https://soalsrv1.soaltech.com/jobs.nsf/xp_jobs_kupplin.xsp
but each time I use it in an embeded form like this:
<iframe src="https://soalsrv1.soaltech.com/jobs.nsf/xp_jobs_kupplin.xsp#" width="100%" height="600"> </iframe>
it doesn't work with iframe but I need to add this as iframe to my website if any one knows the solution 'll be really Thankful :)
Sometimes iframes doesn't work on Wordpress, I've tried many times to put an Iframe of a simple Youtube video on an article page and it never appeared, I've read that Wordpress blocks them for security reasons but I think that with some payable plugin you can make it :/
I have Easy Fancybox with Ajax Load More + Next Page Addon (Same company). My issue is Easy Fancybox does not recognize content after the first page break and so it loads images without the light box.
Example: http://boyonamountain.com/?p=118&preview=1&_ppp=fe18270bb4
Now, I have been researching for hours now and it seems there are some work arounds with requiring a call back.
Problem is, I am a designer and this is my personal site so I only have HTML/CSS knowledge.
I found this: how to bind fancybox to dynamic added element?
tried adding the code from that to the repeat template part of Ajax Load More,
I also tried to add it to the function.php, all to no avail.
Would someone be willing to help me trouble shoot this? Thank you all so much!
I'm also using easy fancybox and you just have to bind an event to the post-load easy fancy box handler;
I chose the focusin event that really happens after the loading of my completed form :
<script type="text/javascript">
jQuery( document ).on( 'focusin', easy_fancybox_handler );
</script>
You have to tell the plugin that content is loaded, choosing the good event.
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'.
My site is http://armandwho.com/site
I'm using the Adv. Ajax Page Loader Plugin in order to keep my background vid & music uninterrupted while browsing.
I'm having trouble with the "LOOK" page. When navigating to it from the homepage (1st link), the gallery doesn't load at all. However, when you refresh or go directly to the page URL it works.
Within the plugin, there is an area for jQuery reload codes, which I think will load the needed scripts that don't get loaded when using the nav.
Can anyone make sense of what script I might need to "reload" to get my gallery working with this Ajax plugin?
Help is supremely appreciated!
Joe
I loved the music, so I decided to look into the problem a bit.
I stepped through the code for the plugin as it tried to load the page and came across this line:
//Nothing like good old pure JavaScript...
document.getElementById(AAPL_content).innerHTML = output;
..which is a problem because the javascript in the script tags isn't going to be run. You could change it to:
//Nothing like good old pure JavaScript...
jQuery(document.getElementById(AAPL_content)).html(output);
..and jQuery will handle the dirty work.
I have a question that is similar to this question here:
Prevent scrolling on HTML5 <video> element on iOS
Basically, I've used document.ontouchmove & e.preventDefault() to disable the scrolling on a page destined for the ipad/iphone. No worries, that works great and there's a bunch of fixed elements that play nicely. One of the things that is embedded in the site is the iframe-embed code from Vimeo. My problem comes from the fact that, since the iframe content comes from a different domain and is in a different document, my document.ontouchmove & e.preventDefault() script is ignored within the iframe. The default page scrolling behaviour returns when the iframe is touched, and the page starts acting weird as elements that aren't supposed to move, do.
I don't think there's any way to apply javascript from the parent page through to the contents of the iframe, but does anyone know of a way to prevent all native scrolling as a general effect? (or maybe zero-out the scrolling as it happens?)
I might have to go to a more traditional, non-ajax-y view for this particular page in my site, but that ruins the overall look-and-feel.
The site hasn't gone live yet, so I can't post the address, but I can post code snippits on request.
TIA