Load partial page contents with jQuery

I'd like to replace the contents of a div on one page with a form found on a second page, when the first page loads. I'll then want to apply CSS formatting locally to the form.

I'm guessing this is pretty straightforward jQuery code but I'm not familiar enough with it yet to figure it out. Your help is appreciated.
<!-- MASTER PAGE -->
<html>...
<div id="content"></div>
...</html>
 
<!-- SOURCE PAGE -->
<html>
<body class="q-bground">...
<form name="queryform" ACTION="http://www..." METHOD="POST" target="_parent">...</form>
...</body>
</html>

Open in new window

garyhesseAsked:
Who is Participating?
 
sh0eConnect With a Mentor Commented:
Tested it.  Seems to work for me.
Make sure you are using the latest version of jQuery.  And could you provide some of the content so I can see what may be wrong?  I only really need to see the main tag placement (<div>s <form>)
<!-- testit.html -->
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
	$('#content').load("testit2.html form",function(){
		$('#content form').css('color','blue');
	});
});
</script>
<div id="content">Load Here</div>
</html>
 
<!-- testit2.html -->
<html>
<body class="q-bground">...
<form name="queryform" ACTION="http://www..." METHOD="POST" target="_parent" style="{color:red}">My Form</form>
</body>
</html>

Open in new window

0
 
sh0eCommented:

//in master page
$('#content').load("/url/to/source/page form");
 
$('#content form').css('left','100px');

Open in new window

0
 
garyhesseAuthor Commented:
I will give that a try in the morning and will let you know of the results.
Thanks for your contribution.
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
garyhesseAuthor Commented:
I tested the offered solution today. I can successfully load the entire source file (e.g., $('#content').load("proxy3.php"), but when I attempt to limit it to the enclosed form ($('#content').load("proxy3.php form") I get nothing in return.
0
 
garyhesseAuthor Commented:
I've attached the files I'm working with.

The source file is a proxy, pulling content from a subsite of my company. It can be viewed successfully on its own in a browser.

The target file is pretty much what you listed in your response, but I attached it for your benefit. I had to rename the files since EE won't allow HTML or PHP extensions. Rename to homeframe.html and proxy3.php to return to my file names.
jqtest.zip
0
 
sh0eCommented:
The HTML of the content seems to confuse the parsers I tested it with, including jQuery.
The form tag placement, and one of the comments seem to be the main culprits.

Table and form are misnested.  Most parsers seem to automatically enclose form inside the <tr>.
<table>
  <tr><form><tr>
  <tr><input/></tr>
</table>
         </form>

This comment is invalid because of  "--"
<!--HomeSeller Input Form--Generated -->

Of course, you can't just tell your company to fix the HTML, so I made a hackish substring() solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$.get("proxy3.php", function(data){
		$('#content').append(data.substring(data.indexOf('<FORM'),data.indexOf('</form>')));
	});
});
</script>
</head>
<body>
  <div id="content"></div>
</body>
</html>

Open in new window

0
 
garyhesseAuthor Commented:
Looks promising. I'll try it when I'm back in the office on Monday. If this works, I'll increase the point total. Thanks for the help.
0
 
garyhesseAuthor Commented:
Your solution went above and beyond what was asked to come up with a solution that took into account some bad data I had to work with.  Many thanks.
0
 
garyhesseAuthor Commented:
The additional jQuery work, clearing up the messy HTML source, saved me hours. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.