1

I am displaying json data to a dynamically generated div element to which I want to add stylesheet and javascript files.

Styling and javascript functionality to the json data are applied by many different .css and .js files so I want to add those files to the div element being used to the json data.

If I add these files to the jsp page itself where the <div> element has been added to display the json data the data does not get styled.

Does jquery provide and methods to achieve the same?

What I am trying to do is same as adding the following to a jsp/html page:

<link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles1.css" />" />
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles2.css" />" />

<script type="text/javascript" src="<c:url value="/resources/script1.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/script2.js" />"></script>

Thanks.

EDIT:

billboard.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/default.css" />" />

    <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.5.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/billboard.findDataById.js" />"></script>

    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles1.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles2.css" />" />

    <script type="text/javascript" src="<c:url value="/resources/script1.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/script2.js" />"></script>
    <script type="text/javascript">
         highlighter.all();
    </script>
</head>
<body>

    <div id="billboard">        
        <input id="id" type="text" name="id"></input>
        <input type="button" onclick="findDataById()" value="find"></input>     
    </div>
    <div id="result"></div>

</body>
</html>

billboard.findDataById.js

function findDataById() {
    $.ajax({
        url:            "/domain/retrieveData",
        data:       "id=" + $("#id").val(),
        success:    function(data) {
                            $("#result").html(data.dataToBeDisplayedInsideDiv);
                        },
        async:      false,
        dataType:   "json"
    }); 
}

When the data is added dynamically to the <div id="result"></div> I am getting the <div id="result"></div> styled with <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.5.js" />"></script> but not the other .css and .js files.

skip
  • 12,193
  • 32
  • 113
  • 153
  • 1
    If you want your html to validate, you should add the `` css references to ``. – jrummell Feb 23 '12 at 14:15
  • Can you check with Developer tool or firebug in the network view to see the look of your scripts? In the network view, do you see the files you want being downloaded? – unludo Feb 23 '12 at 20:13
  • @unludo: I am seeing everything loaded using firebug. I've tried `$.getScript(..)` as well, and it works alright, but I am still not getting the desired result. The dynamically loaded content is being styled only with `default.css` file. But the same data when displayed via a model passed from a controller to jsp everything works just fine. – skip Feb 23 '12 at 20:20
  • @unludo: The situation is like, the page has been loaded once already and then an synchronous call is being made to get some data and that data is being styled only with `default.css` but I would like the dynamically added data to the `
    ` to be styled with the other `.css` and `.js` files which are not going to be loaded again for the synchronous call because the page is not being loaded again.     – skip Feb 23 '12 at 20:32
  • Are you sure the css and js files are loaded before the ajax call returned? Can you try a wait before rendering? – unludo Feb 23 '12 at 20:47
  • @unludo: Yep, its there, I've tried the waiting as well but does not work either. I've tried dynamically loading css and javascript together as well but that doesn't work either. What am I missing? – skip Feb 23 '12 at 21:41
  • can you put a breakpoint in the success function of the ajax call? Do you see your css already there when hitting this breakpoint? – unludo Feb 24 '12 at 10:07
  • @unludo: The `highlighter.all();` was hooked with `window.onload` which was firing just once and not after the ajax call was made. So I had to call another method(`highlighter.highlight();`) of the library to do loading again for it to do the highlighting of the ajax data. Its working fine now. Many thanks :) – skip Feb 24 '12 at 15:34

3 Answers3

1

consider this: How do I include a JavaScript file in another JavaScript file?

The similar concept is used for including stylesheets too!

Community
  • 1
  • 1
linuxeasy
  • 6,269
  • 7
  • 33
  • 40
  • I've tried `$.getScript(..)` but I am still not getting the desired result. The dynamically loaded content is being styled only with `default.css` file. But the same data data when displayed via a model passed from a controller to jsp everything works just fine. – skip Feb 23 '12 at 20:18
1

You may rely on a good js lib for this.

Look at script loading presented in this post: http://addyosmani.com/blog/tools-for-jquery-application-architecture-the-printable-chart/

Some are heavier/more complete than others, so you will have to compare.

unludo
  • 4,912
  • 7
  • 47
  • 71
1

Adding a stylesheet / javascript to the <head> as follows :

jQuery :

$('head').append(....);

JavaScript :

document.getElementsByTagName('head')[0].appendChild(....);
Manse
  • 37,765
  • 10
  • 83
  • 108