• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Loading content with jQuery AJAX

Loading content with jQuery AJAX

With jQuery it is simple to load content with AJAX and inject it into the current web page using the .load() function. This post shows a basic example doing this. Future posts will look at some other ways of loading content and making AJAX requests with jQuery. Make sure to sign up to my RSS feed (see after the end of this post for details) so you don’t miss out!

If you had some HTML that looks like this:

<p id="foo">Existing content that will be replaced.</p>

Then you could load some content using AJAX with jQuery to replace the text between the <p> tags like this (note that you have to of course included the jQuery library in your webpage):

$('#foo').load('/path/to/foo.html');

The text returned from /path/to/foo.html would be injected into the webpage into the <p id="foo"> tag replacing the existing content. You could just as easily load it into an empty <div> placeholder using the same Javascript above:

<div id="foo"></div>

Note that if an error occurs, such as not being able to connect to the server to get the web page, or the file requested does not exist, then nothing will appear to have happened and no error will be reported using the above example. I will look at how to do this in a later post in this series of jQuery posts.

Also note that the content loaded in this way should not be a regular webpage – just the content you actually want to load. If you load a full webpage with <html> <script> etc tags in it, unexpected consequences could happen which could lead to the resulting page being unusable.

It is possible to load an entire webpage and just inject part of the DOM into your current webpage. I will show how to do this in the next jQuery/Javascript post on Sunday.

Check Out These Related posts:

  1. Prevent an AJAX request firing twice with jQuery
  2. Loading content with jQuery AJAX – using a loading image
  3. Loading content with jQuery AJAX – selecting the element to inject
  4. Loading content with jQuery AJAX and dealing with failures

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap