[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Load partial page contents with jQuery

Posted on 2008-10-09
9
Medium Priority
?
1,344 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:garyhesse
  • 6
  • 3
9 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22684142

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

Open in new window

0
 

Author Comment

by:garyhesse
ID: 22684167
I will give that a try in the morning and will let you know of the results.
Thanks for your contribution.
0
 

Author Comment

by:garyhesse
ID: 22687792
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 16

Accepted Solution

by:
sh0e earned 2000 total points
ID: 22688291
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
 

Author Comment

by:garyhesse
ID: 22688539
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22692180
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
 

Author Comment

by:garyhesse
ID: 22696232
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
 

Author Comment

by:garyhesse
ID: 22703738
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
 

Author Closing Comment

by:garyhesse
ID: 31504861
The additional jQuery work, clearing up the messy HTML source, saved me hours. Thanks.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 11 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question