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.
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 need to track visits of page that loads via Ajax. I'm currently using the latest HTML5 Boilerplate Google Analytics snippet (as of September 2017):
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
For example, the page that I'm calling via Ajax shows as an overlay popup and does not update the URL in the address bar. It comes from a directory like this:
www.mysite.com/ajaxpages/popup.html
Do I need to place the entire Analytics snippet on the popup.html page? Do I have to update it? Google's documentation says I need to update my code to something like:
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
It seems fairly simple but I'm not exactly sure how I need to update the tracking code I'm using.
You do not need to put the entire analytics snippet in the popup page. In the function that loads the Ajax popup locate the bit that checks for the ajax success event and paste your second snippet in there; this will set a page path (so every subsequent call will use the new url) and the pageview call will send the updated information.
I am currently working on a Ajax based mobile website project and am not able to get Omniture to work correctly. Here is a brief detail of the problem.
Assume a mobile site which has multiple pages, like example.com/a, example.com/b, example.com/c, example.com/d, example.com/e, example.com/f, etc.
Each page of the site, has Omniture's code, like:
<html><head></head><body>
<script type="text/javascript" src="//domain-and-path-to-omniture-code-files/s_code.js">
<script type="text/javascript">
s.pageName = "blah";
// some other ... s.blahBlah ... properties here...
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code);
</script>
<div id="content">SOME CONTENT</div>
</body>
User opens the browser and opens one url/page, like example.com/a
The page (example.com/a) has multiple links to the content on the same page, like #topic1, #topic2, #topic3, etc. and also has links to other static pages of the site, like example.com/b, example.com/c, example.com/d, etc.
I use jQuery to control click events on these links.
When user clicks on a named link, like #topic1, #topic2, etc., the page is animated/smooth-scrolled to the target element/content-section; and Omniture's "s.tl()" function is triggered, to track/capture the click event with relevant/required details.
## THIS IS THE PROBLEM AREA ## When user clicks on a link to a different static page, like example.com/b, example.com/c, etc., instead of allowing the browser to do a full page-load, the Ajax version of the target page is loaded into the content holder (by Ajax version, I mean to say that the page only has bare-minimum markup/content and not the entire html/head/common-css/js includes/etc).
Now the problem is that, when the page is loaded normally, Omniture captures it correctly as a "Load" event, but when it's loaded via JavaScript/Ajax, Omniture captures it as a "Click" event!
The Ajax/version of the page, does not include Omniture library "s_code.js" JS again (for obvious reasons, its already there on the parent/main page). Along with the required content, this page only has a script-tag, which sets required "s.blahBlah" values for the new page and the call to "s.t();".
I also tried to keep the Omniture code separate, in a common JS file, which is already loaded with the parent page, and only set the required "s.blahBlah" values in the Ajax call/function (which is also in a global/already loaded JS file), but still Omniture captures it as a "Click" event.
// s.tl(); ... gets captured as a click event
// s.t(); ... on normal page load... gets captured as a load event
// s.t(); ... after DOM-ready/page loaded via Ajax... gets captures as a click event
Any ideas! How can I make Omniture capture a load event? Is there a function like "s.l()" or something to trigger Omniture's "Load" event on demand.
The problem was not Omniture capturing it incorrectly, it was the tool "Omnibug", which I use to see the requests.
Omnibug 0.5.448 logs all "s.t()" calls made before page load event as Omniture "Load" event and any "s.t()" call made afterwards is captured as "Click" event.
Apparently, I was not the only one facing this issue. Others had already reported this to the developer of Omnibug (https://github.com/simpsora/omnibug/issues/4) and a fix has been made by him/a new version Omnibug 0.5.500 has been released.
The new version of Omnibug 0.5.500 captures all "s.t()" calls as "Load" events correctly and all "s.tl()" calls as "Click" event.
Thanks!
I'm adding a facebook share button to each post on a Wordpress (Using Facebook Share Button New plugin), it works ok for each post/page except when i'm loading them trough ajax, the result it's a normal Facebook like button but the popup (to write a comment) appears inside the button it is not expanded.
To check go to: http://iwanttobeher.com/ and then click on any face at the bottom of the page, then test the like button and you'll see what happens.
I don't know what to do, i tried to FB.XFBML.parse() after loading the content but the result is the same.
Switching to HTML5 didn't help in our case. What did was to remove the FB object just prior to new content being inserted into the page via Ajax:
delete FB;
wrapper.html(response.data);
We reload full pages via Ajax and so new page content recreates the FB object and re-initializes XFBML anyway. Not sure if this workaround would work if we reloaded only parts of the page though.
The original answer is here.
I've managed to fix it by changing the implementation to HTML5 instead Iframe or XFBML using Facebook's tool to generate like buttons: https://developers.facebook.com/docs/reference/plugins/like/
I have a problem:
I want to play a video from a full screen web app, not using html embed, but using an image banner which redirects to the video url (for example url: http://example.com/media/vid.mp4),
because this can't be done using hrefs, i'm just calling a javascript event:
HTML:
<img src='http://example.com/media/banner01.jpg' id='play_video' />
JavaScript:
<script>
$("#play_video").click(function(){
window.location = "http://example.com/media/vid.mp4";
});
</script>
But because it's just an AJAX page, once video finishes playing, the user is back to the 1st page, however, I have a unique url for each page (for social networking), but how can I inject it to the browser's history, or perhaps some other method of playing the video?
I've been through a similar thing recently, and have found jQuery.address to be a great solution. It handles changing the URL in an AJAXy way, lovely.
Of course, if your users are running in standalone full-screen mode, you'll need to implement some controls for navigating the site without the usual browser chrome.