We are embedding a Forex charting google gadget to display stock data into a web page.
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100840413740199312943/stock-charts.xml&teh names;up_stockList=CSCO&up_chart_period=1&synd=open&w=280&h=140&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
The user can change language on the site (by clicking a flag image), which sends an ajax request that returns the body content of the page in the appropriate language (including the link to the gadget).
The problem we have is that the page updates fine but the chart gadget disappears.
Should setting the innerHTML re-load the gadget, or do we have to exec it somehow when the page is returned?
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
I'm new to firefox and I used JPM to make a firefox addon and submitted it to Mozilla. One reason they gave for rejecting it was the use of iframe elements without a type attribute.
Here are the two situations that an iframe will be loaded.
Whenever a page is loaded a content script will be injected to that page and that content script will insert an iframe that acts as the extension's menu. I set the type attribute using jquery append.
$("body").append("<iframe type='content'></iframe>")
Whenever a user clicks a button appended to a youtube video it will load the video through an iframe and display that video on the page with some additional viewing features. The type attribute is being set using vanilla javascript myIframe.type = 'content'
Is there something I am completely missing or is how I am setting the type attribute correct?
in mywebsit, when users click on each subject(url:http://mywebsite/subject/id(1234567)). title and description were showed and content of this subject loaded by ajax.
I add this url (http://mywebsite/subject/id(1234567)) in Fetch as Google (in the google/webmaster) and click on Fetch an Render. Fetch and Render in Googlebot , show ajax content for Rendering tab (the result for "This is how Googlebot saw the page:" show content that was loaded by ajax) but not show in Fetch tab. In Fetch tab exist only source html of my page with out ajax content.
This mean that googlebot crawling will index ajax content of my website?
The answer was no: you have to use ajax crawling scheme as described https://developers.google.com/webmasters/ajax-crawling/
But yesterday Google changed the rules of the game:
http://googlewebmastercentral.blogspot.com/2015/10/deprecating-our-ajax-crawling-scheme.html
Google states "we are generally able to render and understand your web pages like modern browsers."
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I am just wondering how facebook manage requests to "my profile page" and "home page" and some other pages that seem to reload just some content.
For example when I am on "my profile page" on facebook, i Hit the home button and the top bar button and chat panel on right side remain intact (they are not reloaded). I have monitored XMLHTTPRequest in webkit console and no ajax is generated, so its not Ajax (i think). Otherwise, if FULL http requests are generated when clicking those links, I thought the full page must be reloaded, I am right? So I have no clue how is this handled. Can you give me a hand please?
Thanks :)
It's a type of performance optimization called "quickling", they also use a "pagecache" strategy to reduce the data from server. In the lower level, it depends on javascript perform as a LinkController, which delegate a hyper-link click event and then send an ajax (or use iframe) to request the pagelet data from server, the response will be a json-formed data structure, then javascript will insert the content of current page. Uri in your address bar can be dealled with the hash change event in old browsers and H5's History API (pushState) to manage the history record of browser.