Forum:

HTML Pages with CSS and JavaScript

link css style sheet

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi all,

Ik have a few jsp's with some of those pages not generating a 'complete' html page (the jsp does not contain <html>, <body>, etc. tags), but only a fragment. I use this approach to be able to make AJAX calls to retrieve to refresh only only a fragment of the page. The problem is that the refreshed part is not affected by the linked css style sheet, and therefore is not displayed correctly. And i do not know how to link the css style sheet to the jsp page generating the html fragment, because it contains no <html>, <head> and <body> elements. Any idea how i can solve this issue?

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

How are you adding this fragment to the page?

Eric

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Its should not behave the way you have described, i.e the included JSP page fragment must use the given css of the caller page.

Please post your page.

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:How are you adding this fragment to the page?

Eric

Dynamically using AJAX calls.
Let's say I have a jsp page from which I make an AJAX call to another jsp page that renders to say a form tag, that i add to a div tag using javascript. The problem is that the form tag is not being formatted using the in main.jsp linked stylesheet.

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

WHAT is your JavaScript that adds the html to the page. Actual code, not words.

Eric

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:WHAT is your JavaScript that adds the html to the page. Actual code, not words.

Eric

sorry, here it is:

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Art Vandelay wrote:Let's say I have a jsp page from which I make an AJAX call to another jsp page that renders to say a form tag, that i add to a div tag using javascript.

Why do you have an AJAX call just to include another JSP page. Can't you used ?

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:

Art Vandelay wrote:Let's say I have a jsp page from which I make an AJAX call to another jsp page that renders to say a form tag, that i add to a div tag using javascript.

Why do you have an AJAX call just to include another JSP page. Can't you used <jsp:include pag="yourJsp.jsp"/> ?

because it needs to go through a controller at the backend that does some processing and contains some business logic.

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Art Vandelay wrote:

Sagar Rohankar wrote:

Art Vandelay wrote:Let's say I have a jsp page from which I make an AJAX call to another jsp page that renders to say a form tag, that i add to a div tag using javascript.

Why do you have an AJAX call just to include another JSP page. Can't you used <jsp:include pag="yourJsp.jsp"/> ?

because it needs to go through a controller at the backend that does some processing and contains some business logic.

But "form.htm" is just a static page. Which business logic it contains ?

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:

Art Vandelay wrote:

Sagar Rohankar wrote:

Art Vandelay wrote:Let's say I have a jsp page from which I make an AJAX call to another jsp page that renders to say a form tag, that i add to a div tag using javascript.

Why do you have an AJAX call just to include another JSP page. Can't you used <jsp:include pag="yourJsp.jsp"/> ?

because it needs to go through a controller at the backend that does some processing and contains some business logic.

But "form.htm" is just a static page. Which business logic it contains ?

Sorry for being unclear in my explanation, but 'form.htm' is just a request mapping to a spring controller, which forwards to a jsp file that renders to a form element that will be added to the div tag.

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Whats the output of 'form.htm'. Try making a simple request to the server, like http://localhost:8080/yourapp/form.htm & and append the <link../> tag to the form.htm output itself. See whether it get displayed correctly or not on browser.

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Also, for my sake of interest, try out this page.

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:Whats the output of 'form.htm'. Try making a simple request to the server, like http://localhost:8080/yourapp/form.htm & and append the <link../> tag to the form.htm output itself. See whether it get displayed correctly or not on browser.

The call to 'form.htm' returns a correct form tag, but it is not being displayed by the browser correctly. The style.css file contains the settings that should be used to display the html tags, but it seems that the dynamically generated form tag, after being added to the DOM of the page is still not displayed using these settings, the rest of the page is.

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:.. and append the <link../> tag to the form.htm output itself. See whether it get displayed correctly or not on browser.

Try.

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:Also, for my sake of interest, try out this page.
<link rel="stylesheet" type="text/css" href="css/style.css" /> ... ... ... <div id="main"> <jsp:include page="form.htm"/> <div>

This will not leas to anything, because the page fragment to include is not fixed but determined dynamically; user selects from menu bar and action that the would like to perform and based on this selection a request is made to generate the according html fragment to add to the page.

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:

Sagar Rohankar wrote:.. and append the <link../> tag to the form.htm output itself. See whether it get displayed correctly or not on browser.

out.write("<link style../"> out.append("your FORM");

Try.

sorry i missed that one.

i tried adding the <link style....> tag, and is does work, thanks!!!

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Art Vandelay wrote:

Sagar Rohankar wrote:Also, for my sake of interest, try out this page.
<link rel="stylesheet" type="text/css" href="css/style.css" /> ... ... ... <div id="main"> <jsp:include page="form.htm"/> <div>

This will not leas to anything, because the page fragment to include is not fixed but determined dynamically; user selects from menu bar and action that the would like to perform and based on this selection a request is made to generate the according html fragment to add to the page.

But, my question is, have you tried this?
If it works, then we can hide that FORM part which we included, and visible it if user wished to see that FORM.

i tried adding the <link style....> tag, and is does work, thanks!!!

But it comes with one con, it just duplicates the CSS in the main page. Have a separate css file for FROM element and append it.

Finally, I still didn't get it, why AJAX call doesn't updates the FROM with the existing page CSS

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar Rohankar wrote:

Art Vandelay wrote:

Sagar Rohankar wrote:Also, for my sake of interest, try out this page.
<link rel="stylesheet" type="text/css" href="css/style.css" /> ... ... ... <div id="main"> <jsp:include page="form.htm"/> <div>

This will not leas to anything, because the page fragment to include is not fixed but determined dynamically; user selects from menu bar and action that the would like to perform and based on this selection a request is made to generate the according html fragment to add to the page.

But, my question is, have you tried this?
If it works, then we can hide that FORM part which we included, and visible it if user wished to see that FORM.

no i did not try this, because 'form.htm' is not a page but just a string that maps to method in one of my controllers, and i was under the impression that jsp include include static file fragments.

i tried adding the <link style....> tag, and is does work, thanks!!!

But it comes with one con, it just duplicates the CSS in the main page. Have a separate css file for FROM element and append it.

Finally, I still didn't get it, why AJAX call doesn't updates the FROM with the existing page CSS

I am aware of that con, but as long as it is the same page that is duplicated, so no conflicts can occur, i can live with that.

I don't understand either, you would sat that once an element is added to the DOM of the page, it will automatically inherit the css settings of that page.

btw. i run into another issue; i submit the form using an AJAX call and the form will be validated at the backend, but if there are validation errors, the response will be the submitted form with validation error messages, in this case i want a callback function to receive this response and display that form, overwriting the submitted one. But is there are no validation errors, the response will be a new page, which of course must lead to a new page being displayed (user is forwarded to a new page). Is there some kind of approach/mechanism/etc that you know of that can help to build this logic using AJAX?

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Art Vandelay wrote:btw. i run into another issue; i submit the form using an AJAX call and the form will be validated at the backend, but if there are validation errors, the response will be the submitted form with validation error messages, in this case i want a callback function to receive this response and display that form, overwriting the submitted one. But is there are no validation errors, the response will be a new page, which of course must lead to a new page being displayed (user is forwarded to a new page). Is there some kind of approach/mechanism/etc that you know of that can help to build this logic using AJAX?

That made my hair fall out.

You can't have it both ways. You can use Ajax to get a fragment or data back, or use a full-page refresh. They can;t be mixed in one response.

What I generally do is to submit the form using Ajax. A list of errors is returned in JSON format. If the list is empty all is good and I go on to whatever's next (closing dialog, redirecting to a new page, whatever). If there are errors, I display them and mark the field invalid (assign a class that identifies them as invalid and modifies their appearance). Fewer moving parts means fewer opportunities for errors and problems.

Why do you feel that you need to replace the whole form when a perfectly good one is already there?

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:

Art Vandelay wrote:btw. i run into another issue; i submit the form using an AJAX call and the form will be validated at the backend, but if there are validation errors, the response will be the submitted form with validation error messages, in this case i want a callback function to receive this response and display that form, overwriting the submitted one. But is there are no validation errors, the response will be a new page, which of course must lead to a new page being displayed (user is forwarded to a new page). Is there some kind of approach/mechanism/etc that you know of that can help to build this logic using AJAX?

That made my hair fall out.

You can't have it both ways. You can use Ajax to get a fragment or data back, or use a full-page refresh. They can;t be mixed in one response.

What I generally do is to submit the form using Ajax. A list of errors is returned in JSON format. If the list is empty all is good and I go on to whatever's next (closing dialog, redirecting to a new page, whatever). If there are errors, I display them and mark the field invalid (assign a class that identifies them as invalid and modifies their appearance). Fewer moving parts means fewer opportunities for errors and problems.

Why do you feel that you need to replace the whole form when a perfectly good one is already there?

Because i use the Spring validation framework which renders to the same page that the submission came from, but with error messages added to the fields.

But in the meantime i made some progress; i want to use jQuery to test the response of the submission for the existence of the form (id) that did the submit. And based on this i will decide whether to replace the form or display the reponse in a new page. I just have to figure out how using jQuery to test if a certain element exists in another. And i have to figure out how to replace all the contents of the page in case the element does not exists (no validation errors, so response is whole a new page).

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I found out that since jQuery 1.4 there is a function jQuery.contains() to look for an element in another one, but it seems to have issues with my browser (known issue and will be fixed in next release v1.4.2).
Someone any idea how to look for a certain element by id in another element and how to replace the entire contents of a page (document)?

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Art Vandelay wrote:Someone any idea how to look for a certain element by id in another element

Since an id must be unique within a page, any idea of containment is moot. Simply search for an element with the id.

how to replace the entire contents of a page (document)?

[Asking smart questions] [About Bear] [Books by Bear]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:

Art Vandelay wrote:Someone any idea how to look for a certain element by id in another element

Since an id must be unique within a page, any idea of containment is moot. Simply search for an element with the id.

Maybe i should post some code to clarify things.

data.getElementById('myForm') does not work.

how to replace the entire contents of a page (document)?

This will transfer me to a new page (like clicking on a link), but i already have the contents of the new page i just have to assign them to the current page.
I tried:
document = data;
and
$.replaceWith(data);

but both did not work.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Art Vandelay wrote:data.getElementById('myForm') does unfortunately not work.

At this point, data is just a string and String doesn't have a getElementbyId method.

but i already have the contents of the new page i just have to assign them to the current page.

And again, sending a whole new page as an Ajax response doesn't make any sense. You can't do anything with it. You either need a fragment you can stick into the current DOM, or redirect to a new page. You can't replace the page in-place.

In my opinion, you are trying to do way too much on the client. These are all the types of things that should be handled on the server. If your choice of server-side tools is making your job harder rather than easier, perhaps it's time to re-evaluate those tools or the manner in which you are using them.

The answer to "I'm not getting back what I want (need) as the Ajax response" is always "fix the server code".

[Asking smart questions] [About Bear] [Books by Bear]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:

Art Vandelay wrote:data.getElementById('myForm') does unfortunately not work.

At this point, data is just a string and String doesn't have a getElementbyId method.

Thanks, then i have to use a string function to search the data.

but i already have the contents of the new page i just have to assign them to the current page.

And again, sending a whole new page as an Ajax response doesn't make any sense. You can't do anything with it. You either need a fragment you can stick into the current DOM, or redirect to a new page. You can't replace the page in-place.

In my opinion, you are trying to do way too much on the client. These are all the types of things that should be handled on the server. If your choice of server-side tools is making your job harder rather than easier, perhaps it's time to re-evaluate those tools or the manner in which you are using them.

The answer to "I'm not getting back what I want (need) as the Ajax response" is always "fix the server code".

In my backend controller i am just using the simple construction:

Both actions result in an html response being sent back to the AJAX submit.
So from my point of view, I am getting the correct response back, it is just that i cannot figure out how to assign it.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm not going to argue with you -- that's not what I'm here for. I'm here to offer help. If you say that the response is correct, then it's correct.

But I will offer this bit of closing food for thought: if you don't know how to deal with a response on the client, is it really correct? And, is it worth keeping things simple on the server at the expense of great complexity on the client? Just some things to ponder over your dessert.

[Asking smart questions] [About Bear] [Books by Bear]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:I'm not going to argue with you -- that's not what I'm here for. I'm here to offer help. If you say that the response is correct, then it's correct.

But I will offer this bit of closing food for thought: if you don't know how to deal with a response on the client, is it really correct? And, is it worth keeping things simple on the server at the expense of great complexity on the client? Just some things to ponder over your dessert.

I very much appreciate yur help. And I agree with you that your proposed method is much cleaner, but since i'am 'stuck' with spring it would require much more work to rewrite my code using another framework.

One option i have is using client side validation, but unfortunately i need to use error messages declared in a properties file residing at the server. If i can find a workaround for this issue, i can use client side validation and avoid the whole problem.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Client-side validation is never sufficient on its own.

Surely, your framework is versatile enough such that you can choose what is returned and what is not?

(Not to go off on a side rant, but this is the reason I eschew big frameworks. You frequently do it their way, or no way at all.)

[Asking smart questions] [About Bear] [Books by Bear]

Art Vandelay

Ranch Hand

Posts: 49

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:Client-side validation is never sufficient on its own.

Surely, your framework is versatile enough such that you can choose what is returned and what is not?

(Not to go off on a side rant, but this is the reason I eschew big frameworks. You frequently do it their way, or no way at all.)

It is possible to return a JSON view with spring mvc (eventho i do not know directly how), so maybe if i look more into the documentation of spring mvc i can manage to get this thing working.

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

If your Spring action can return a string formatted in JSON, then, Yes, you can send JSON data to the client.

Form discussion between you and Bear, Its look that either you're doing too much on the client side which is not the best practice suggested by the Spting MVC framework.
I too use Struts 1 framework and find it cumbersome to use Struts action for simple AJAX call, in that case I always use the simple lovely Servlet to handle all the AJAX action.

And Bear, yes sometime I feel that framework make simple things complicate and BTW do you have any hair left to fall out