I know the page reload concept via ajax without page refresh.
But facebook pages reload through normal page load. but sidebar's not loading just reload content area.
How is it possible?
Advance Thanks friends
Facebook uses bigpipe
The general idea is to decompose web pages into small chunks called pagelets, and pipeline them through several execution stages inside web servers and browsers. It is implemented entirely in PHP and JavaScript.
Clicking and taking some action on a webpage initialize/executes a pagelet, response generates from iframe or from ajax as well. Read the response and show it to a small chunk, this will not refresh the page.
I believe they are using the new history.pushState functionality in HTML5.
Related
I am planing a simple website layout: Header with navigation, sidebar and a content block.
The whole site should be a single-page application because I am using a Cesium Visualization and a page reload would delete the current JS objects that are displayed in the Viewer.
Therefore I would like to reload the content container using AJAX to display my different "pages" and therefore keep all the JS Objects in the browser.
My question is:
Do you know a way to add a url-based navigation to this architecture?
For example: I am on the index page /index/ and enter the new url /content1/. The new url reloads the content container using AJAX and keeps the rest as it is. Therefore I would also be able to use the forward and backwards buttons of the browser.
May this be possible with ASP.net MVC routing?
I am pretty new to this so I hope I discribed my problem well enough.
Thanks a lot!
Try Pjax which uses ajax to load content dynamically via ajax
and pushState to maintain url history i.e is a HTML5 api. You shall find more details in the link below
https://github.com/defunkt/jquery-pjax
If you are familiar with angularjs then using ngRoute is a better alternative to Pjax as it has an effective url management through the routing service, please check the below link for more details on ngRoute
https://docs.angularjs.org/api/ngRoute/service/$route
I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)
I used the Browser State/ajaxify gist (https://github.com/browserstate) on a Wordpress-based website to dynamically load content. The problem I'm running into is that now my Google DFP ads aren't loading when the content is dynamically loaded.
The ads worked normally before, so I'm not sure exactly what the issue is. Am I overlooking something simple, or are there extra steps that need to be taken?
The problem is the javascript that load ads from dfp read your page when it's ready. But with your ajax loading mechanism, you never inform this javascript that it need to re-read the page and load newly inserted tags.
So you have to catch the new content insertion event and fire the loading method that the dfp javascript provide.
I have an ASP mobile site and I am using jQuery mobile. I have problem using recaptcha on my contact page. it disappears when the captcha is wrong. It works fine when i am not using jQuery mobile. Any help pls? i am using jQuery validate plugin too.
Thanks
I was experiencing a similar issue - my team used jQuery mobile's ajax page linking to navigate to our sign-in page which used reCaptcha. The ajax call would cause the page to load, at which point the reCaptcha form would render and hide all other content. Refreshing the page would load everything properly.
My fix to this was to remove the ajax linking to the page. From the jQUery mobile manual:
Linking without Ajax Links that point to other domains or that have
rel="external", data-ajax="false" or target attributes will not be
loaded with Ajax. Instead, these links will cause a full page refresh
with no animated transition. Both attributes (rel="external" and
data-ajax="false") have the same effect, but a different semantic
meaning: rel="external" should be used when linking to another site or
domain, while data-ajax="false" is useful for simply opting a page
within your domain from being loaded via Ajax. Because of security
restrictions, the framework always opts links to external domains out
of the Ajax behavior.
In version 1.1, we've added support for using data-ajax="false" on a
parent container which allows you to excluded a large number of links
from the Ajax navigation system. This avoids the need to add this
attribute to every link in a container.
Note: When building a jQuery Mobile application where the Ajax
navigation system is disabled globally or frequently disabled on
individual links, we recommend disabling the $.mobile.pushStateEnabled
global configuration option to avoid inconsistent navigation behavior
in some browsers.
This fixed our loading issue, but now we experience another issue: when navigating from the sign-up page back to our landing page, and back to the sign-up page jQuery mobile causes the browser to reload the landing page. Still working on fixing this.
Edit:
After thoroughly reviewing my code I noticed that the page I was calling had html, head and body tags, pulled jquery.mobile-1.0.min.js and jquery-1.6.4.min.js twice, and was included in a template.
Once I removed the extra html, head and body tags (as well as the js includes), the page displayed properly.
When I use Server.Transfer the browser keeps the Previous Page on the URL bar. Also, when I try to view the source code of the page, shows the previous page code. I need to see the current page code. Any help?
Thank you
In IE8 the developer toolbar allows you to view the original and current DOM of the page. In Firefox, you can use the Web Developer plugin to allow you to view the current page source.
If you use Response.Redirect() instead of Server.Transfer you have less of these problems though at the cost of having more round trips to your server.