wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Loading a page into a <div> of some other page using jquery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Loading a page into a <div> of some other page using jquery" Watch "Loading a page into a <div> of some other page using jquery" New topic
Author

Loading a page into a <div> of some other page using jquery

Prasanna Raghavendar
Greenhorn

Joined: Sep 15, 2011
Posts: 19
Hi,

I have 3 pages welcome.jsp, creator.jsp and admin.jsp
When a button labelled "create" is clicked in admin.jsp, i should load the creator.jsp into the <div id="holder"> of welcome.jsp How should i do this?
If the div tag is in the same page i know that i could use like
$('#holder').load('creator.jsp');
But since the div is in a different page, how should i do this?

Thanks
Prasanna
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61103
    
  66

How are both pages loaded at the same time?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Prasanna Raghavendar
Greenhorn

Joined: Sep 15, 2011
Posts: 19
welcome.jsp is my home page which has an accordian menu for creator.jsp and admin.jsp. When a menu item is clicked, the corresponding page loads on the div element of welcome.jsp(according to my page design, the div element is on the right part of the page). in the admin.jsp(loaded on the div) has a button which should invoke creator.jsp on the div element.

In my admin.jsp i have something like this

<td align="center"><input type="image" name="createNewApp"
value="Create New App" onclick="createNewApp()"
style="width: 160px; height: 40px;"
src="images/CreateNewApp_Btn.png">
</td>

And script like
function createNewApp(){
$('#holder').load('creator.jsp');
}
I want this function to load creator.jsp into the div tag of welcome.jsp
The id "#holder" is in the welcome page... so my jQuery code would not work.. so how should i proceed?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61103
    
  66

So they are not two separate pages, but are simply fragments loaded into the same page?
Prasanna Raghavendar
Greenhorn

Joined: Sep 15, 2011
Posts: 19

[code = jQuery]
$('#holder').load('creator.jsp');
[/code]

'holder' is the id of a div element that lies on a different page. How should i refer to that so that i can load creator.jsp into the div element with id 'holder'?

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61103
    
  66

You need to clarify what you mean by "page"? Are you taking about the HTML page that ends up at the browser, or multiple JSP "pages" (which aren't really "pages at all) which end up creating the single HTML page?

When it comes to jQuery (and anything else on the client), what happens at the JSP layer is completely moot. All that matters is the HTML that is delivered to the browser.
Prasanna Raghavendar
Greenhorn

Joined: Sep 15, 2011
Posts: 19
I mean the jsp... i want to load creator.jsp into the div element of welcome.jsp upon clicking a button in admin.jsp.
Something like



PS: Above load() of the jQuery is written inside admin.jsp.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61103
    
  66

Again, what's going with the JSPs is not relevant. You need to answer the question: do all these JSPs end up creating a single HTML page or not?

If the answer is yes, then you don't need to do anything special because all the elements are on the same HTML page (it is completely irrelevant that they came from different JSPs).

If the answer is no, then it cannot be done and you'll need to figure out another approach. But I suspect that the answer is yes.
Prasanna Raghavendar
Greenhorn

Joined: Sep 15, 2011
Posts: 19
I dont understand what you mean by
do all these JSPs end up creating a single HTML page or not?
But when i just use like

It does not load.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61103
    
  66

Do you understand the difference between a JSP and an HTML page? Have you read this article?
Prasanna Raghavendar
Greenhorn

Joined: Sep 15, 2011
Posts: 19
Thanks a lot Now I understood the difference.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Loading a page into a <div> of some other page using jquery