I am considering using ajax requests to pull content dynamically into a page and then binding that content up to the DOM using knockout.
Is there a way to load content dynamically into a page that makes the page look like it's content is being rendered by the server as normal get request?
If not, do most search engines read dynamic content today? For example, if one were to use an ajax call to fill in the title tag of a page - do most modern search engines support that crawl?
Related
I am developing a website in Laravel 5, It has a Jobs page where data loaded through ajax which have many filters. When I open a link and come back to the previous page (Jobs page) by clicking the browser back button, it showing me Json data on the browser window instead of loading the whole page.
Kindly let me know how to solve this issue.
If you're using the same url for the JSON request as you are for the html request then the browser will simply be returning the last response to that url which will be the JSON data.
There are a few different ways to overcome this but essentially you'll have to modify your url so that the browser treats them as different responses.
One way would be to append a query string value to the ajax call e.g. ?json.
A slightly more complex yet more flexible approach would be to create separate controllers for your views and JSON data and then prefix your JSON routes with something like /api e.g.
For the view
example.com/jobs -> Pages/JobsController#index
For the json data
example.com/api/jobs -> Api/JobsController#index
The business web application that I need to build for our company will use an accordion menu (such as the jQuery UI accordion).
I would like to use link jQuery click events to the accordion menu and load the content dynamically with the ajax .load shorthand.
Currently I'm dealing with an internal conversation where someone mentions that Ajax is slower than a regular browser request.
Now my question is: is that true, taken into account that:
The loading time of the accordion-content should be faster (all scripts / css / accordion / header loaded only once at the beginning);
The Ajax request does not influence the performance of any server actions;
Should I really use a browser request - and will it really be faster?
It seems very un-intuitive, using an accordion to use it as a static element that is just displayed on every page refresh.
I built a prototype before, using Ajax Load to load div containers with html and javascript, and it loaded as fast as a normal browser request would.
As for an answer, an ajax request is indeed smaller than a regular request for a page.
You have a few options where you could - pre-fetch the data, store this in an array or object and load it onclick of the slider,
or simply use ajax, this however will create another request which, if you have alot of users could potentially slow down your website.
pre-loading data into your html in hidden divs, or via a js.php directly into an array / object would be the most efficient way depending on the size of the contents.
Do know that ajax loaded content is not indexed by search engines and will be less SEO friendly.
I'll admit that I'm pretty new web development (only been coding for about a year) and especially green when it comes to JS / jQuery.
A specific web page I've built loads different data based on hovering over certain categories: country clubs, resorts, hotels, etc. When I built the site on my local machine, the javascript function was super quick. However, on the live site, it has a long delay before the data swap happens.
The URL is: http://preferredparkingsolutions.com/client_list.html
Which links to a javascript function at: http://preferredparkingsolutions.com/scripts/clientHover.js
Which replaces the display div (#client_list) by pulling data from a text file.
Is there a better / faster way of doing this?
Yes, this could be optimised by loading the content in up-front and caching it. Currently you are doing a HTTP request each for each and every hover - even if the user has hovered over that element before, since the AJAX responses aren't being cached. Doing this would be your quickest win.
However, I can't see any case at all for having the content live externally. Is there any reason you're against having the content physically in the page and just using show/hide methods? There's various benefits to this - SEO, for one thing, since Google will find the content.
this is the external page you are loading http://preferredparkingsolutions.com/client_list.inc.html and the content looks little and looks like its a static page then why not just load every thing upfront and then just hide and show div's ? as Utkanos suggested you will aslo have a SEO benifit and also its HTTP request each for each and every hover. if you still want to load it externally lost load it once and cache it and use the cached version to hide and show divs.
The website I'm working on has a typical e-commerce product page, with the top part of the page containing the title, images and pricing, while the bottom part of the page has the tabs section, with tabs for Features, Specs, Accessories, Reviews and so on.
Naturally, this HTML Document is heavy. I think about splitting the page in two:
The HTML Document will contain only the top part of the page
Then JavaScript will call asynchronously another page, which contains a JSON object with the content of all the tabs; when successful - JavaScript will populate each tab with his content
The question is:
Will the Search Engines crawl the content that is loaded by JavaScript?
if not - then Progressive Rendering = Loss of SEO?
if yes - must I somehow ensure that all the tabs are populated prior to the Load event, or this doesn't matter?
I think that this question could be asked differently:
With SEO in mind, do the Search Engines crawl the HTML Document only, or they crawl the content of the page at time when the Load event takes place?
Any known best practices for this? any useful links?
Please advise.
Crawlers dont use js. Turn off JS in your browser to see what the crawler does. If you have links to these content pages it will crawl to them. If the SEO is important, make sure its in the page.
The search engines crawl the HTML document only as you describe it - don't use the JS solution you propose - diverse but appropriate content of your bottom tabs is important for SEO.
i need a jquery plugin where i want to load the module by default as HTML and upon clicking more link it should load the rest of the content via AJAX and then previous button should be enabled.
Currently when i google i can get lot of plugin which just load either via AJAX or Animation [by hidding the rest of the content]. But for performance issue i don't want to load all the content at one shot and then animation. So i want to load the 5 li's and upon clickiing "More" it should start loading the remaining content but it should also animation.
Could someone help me on this?
-- Bala
My advice to you would be to customize the jCarousel according to your needs. Specifically, when you render the page initially you can include the initial 5 elements of your carousel. Then, in the carousel's onchange event, once you reach the last slide you can use AJAX to pull in the additional images.
Depending on your needs, using jCarousel driven by a flat JavaScript array you could save some load time as the image URLs would be rendered in the original markup, but not downloaded by the browser until they are added to the visible portion of the carousel. No AJAX required. Here's a demo.