JavaScript

How to Retrieve and Display Specific Parts of Another Page Using jQuery’s .load()

 

In this article, I will introduce a method to pinpoint and retrieve only specific parts of another page using jQuery’s .load() function and display the retrieved information.

Contents
  1. CSS Description for the Button and Display Area to Retrieve and Display Specific Parts of Another Page Using .load()
  2. JavaScript Description to Retrieve and Display Specific Parts of Another Page Using jQuery’s .load()
  3. HTML Description for the Button and Display Area to Retrieve and Display Specific Parts of Another Page Using .load()
  4. Demo Page to Retrieve and Display Specific Parts of Another Page Using jQuery’s .load()

CSS Description for the Button and Display Area to Retrieve and Display Specific Parts of Another Page Using .load()

Note: The CSS description for the button (#idLoadBtn) and the display area (#idLoadLlink) to retrieve and display specific parts of another page. Please change as needed.

<style type="text/css">
<!--
#idLoadBtn{
	cursor:pointer;
	margin:auto;
	width:120px;
	text-align:center;
	padding:12px;
	background-color:#FF4242;
	color:#FFFFFF;
	border:solid 1px #FF4242;
	-moz-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242 5px 5px 5px #FF4242;
	-webkit-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242, 5px 5px 5px #FF4242;
	font-size:18px;
}
#idLoadBtn:hover{
	cursor:pointer;
	margin:auto;
	width:120px;
	text-align:center;
	padding:12px;
	background-color:#FFFFFF;
	color:#FF8686;
	border:solid 1px #FF8686;
	-moz-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686 3px 3px 3px #FF8686;
	-webkit-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686, 3px 3px 3px #FF8686;
	font-size:18px;
}
#idLoadLlink{
	cursor:pointer;
	margin:auto;
	width:700px;
	border:solid 1px #FF4242;
	color:#FF4242;
}
#idLoadLlink a{
	color:#FF4242;
	line-height:1.4em;
}
-->
</style>

JavaScript Description to Retrieve and Display Specific Parts of Another Page Using jQuery’s .load()

Note: Clicking the button (#idLoadBtn) retrieves the specified part of another page URL using .load() and outputs the retrieved content to the display area (#idLoadLlink).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idLoadBtn").click(function(){
		$("#idLoadLlink").load("/ #categories-2 ul li");
	});
});
</script>

HTML Description for the Button and Display Area to Retrieve and Display Specific Parts of Another Page Using .load()

Note: The button (id=”idLoadBtn”) and display area (id=”idLoadLlink”) to retrieve and display specific parts of another page. Please change as needed.

<div id="idLoadBtn">Click</div>


<div id="idLoadLlink">
The retrieved information will be displayed in this area.
</div>
<!--/idLoadLlink-->

Demo Page to Retrieve and Display Specific Parts of Another Page Using jQuery’s .load()

Demo Page to Retrieve and Display Specific Parts of Another Page Using jQuery’s .load()

I don’t think you can specify URLs from different domains (cross-domain), but I will test this in the future.

　
Note: If you reuse this, please do so at your own risk. Do not reuse the Google Analytics tags within the demo page tags.

load
RELATED POST