how to dynamically add stylesheet and javascript files to a div element using jquery
Question
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.
3 answers
solution1
1 2012-02-23 13:45:50
consider this: How do I include a JavaScript file in another JavaScript file?
The similar concept is used for including stylesheets too!
solution2
1 2012-02-23 14:10:07
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.
solution3
1 2012-02-23 14:18:20
Adding a stylesheet / javascript to the <head> as follows :
jQuery :
$('head').append(....);
JavaScript :
document.getElementsByTagName('head')[0].appendChild(....);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.