You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage.<\/p>\n
$(\"#mainNav\").load(\"\/store #mainNav\")<\/code><\/pre>\nThe first param is the URL (only works for same-domain requests!) and the second (well, technically it’s still part of the first, separated by a space) is a jQuery selector of the part to load. Not passing the second selector param will load the entire page. There is an optional third parameter, a callback function, which will run when the load is complete.<\/p>\n","protected":false},"excerpt":{"rendered":"
Use Case You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage. jQuery $(“#mainNav”).load(“\/store #mainNav”) The first param is […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":148806,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/05-dom-ready\/","url_meta":{"origin":4142,"position":0},"title":"#05: All About DOM Ready","date":"September 2, 2013","format":false,"excerpt":"We've talked a good bit about selectors. A jQuery selector like $(\"h1\") will select all elements on the page. But what about... when it doesn't? Here's an example of when that selector would fail: Learning jQuery Hello, World! Will that element be red? Nope. WTF right? The reason it doesn't\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7720,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/load-jquery-only-if-not-present\/","url_meta":{"origin":4142,"position":1},"title":"Load jQuery Only If Not Present","date":"October 19, 2010","format":false,"excerpt":"Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don't want to load it again, but if\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191206,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-prefix-properties\/","url_meta":{"origin":4142,"position":2},"title":"Mixin to Prefix Properties","date":"December 19, 2014","format":false,"excerpt":"In case you're interested in handling your own CSS vendor prefixing (rather than, say, Autoprefixer or Compass), here is a mixin to help with that. Rather than just appending every known prefix to everything, you pass it the prefixes you want to use, so you have more fine grained control\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3512,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/modern-event-handling\/","url_meta":{"origin":4142,"position":3},"title":"Modern Event Handling","date":"August 22, 2009","format":false,"excerpt":"This is better than doing the traditional \"window.onload\" event, as it can attach multiple event handlers to a single event and they all get called.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20791,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/034-ajaxing-in-a-blog-post\/","url_meta":{"origin":4142,"position":4},"title":"#034 – Ajaxing in a Blog Post","date":"March 26, 2013","format":false,"excerpt":"We end up with a really simple test which loads in an article from the blog to display if there is room: \/\/ Load additional content if enough room enquire .register(\"(min-width: 700px)\", { match: function() { $(\"#home-article\").load(\"\/blog\/ #main-article\"); } }) .listen(); jQuery makes Ajax super easy, and even easier with\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191217,"url":"https:\/\/css-tricks.com\/snippets\/sass\/str-replace-function\/","url_meta":{"origin":4142,"position":5},"title":"Str-replace Function","date":"December 19, 2014","format":false,"excerpt":"Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one. \/\/\/ Replace `$search` with `$replace` in `$string` \/\/\/ @author Kitty Giraudel \/\/\/ @param {String} $string - Initial\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4142"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4142"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4142\/revisions"}],"predecessor-version":[{"id":4144,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4142\/revisions\/4144"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4142"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}