CODEWITHSUNDEEP
javascripthtmlcss
user918477
user918477

Reputation:

import html file for specific block of the webpage

is it possible to import the html file (contains javascript and css) for specific part of the webpage.

base.html

<link rel="stylesheet" type="text/css" href="multi/jquery.multiselect.css" />
        <link rel="stylesheet" type="text/css" href="multi/assets/style.css" />
        <link rel="stylesheet" type="text/css" href="multi/assets/prettify.css" />
        <link rel="stylesheet" type="text/css" href="multi/jquery-ui.css" />
        <script type="text/javascript" src="multi/jquery.js"></script>
        <script type="text/javascript" src="multi/jquery-ui.min.js"></script>
        <script type="text/javascript" src="multi/src/jquery.multiselect.js"></script>
        <script type="text/javascript" src="multi/assets/prettify.js"></script>
        <script language="javascript">
            $(function(){

    var $callback = $("#callback");

    $("select").multiselect({
        click: function(event, ui){
            $callback.text(ui.text + ' ' + (ui.checked ? 'Selected' : 'Removed') );
        },
        checkAll: function(){
            $callback.text("Check all clicked!");
        },
        uncheckAll: function(){
            $callback.text("Uncheck all clicked!");
        },
        optgrouptoggle: function(event, ui){
            var values = $.map(ui.inputs, function(checkbox){
                return checkbox.value;
            }).join(", ");

            $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
        }
    });

});
        </script>

I have another page which consist many html elements

sample.jsp

<html>
    <head>

        <%@include file="../style/inter_header.html"  %>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

        <title>Home</title>

        <link rel="stylesheet" href="../dialog/themes/jquery.ui.all.css"></link>
        <script src="js/action.js"></script>
        <link rel="stylesheet" href="../dialog/demos/demos.css"></link>
</head>
<body>
<input type="text" name="first">

<select name="myselection">
<option value="a">A</option>
<option value="b">B</option>
</select>

<select multiple="multiple" name="myselection2">
<option value="a">A</option>
<option value="b">B</option>
</select>

<input type="text" name="first">
</body>
</html>

Now, i want that, script and css which has been imported into base.html should be used for only one element of the sample.jsp

<select multiple="multiple" name="myselection2">
    <option value="a">A</option>
    <option value="b">B</option>
    </select>

So, that layout and style of the sample.jsp should not be affected of the entire page. If above information is insufficient to understand, then let me know.

Help appreciated!!

Upvotes: 0

Views: 512

Answers (1)

Paul
Paul

Reputation: 11

You can use jQuery load for this.

$('#someElement').load('sample.html #someElementSelector');

The selector makes it possible to just inject a certain part of the page. However this will not load scripts or CSS. My advice on this is to add the script/CSS to the page itself. You can use event delegation ($.delegate() or since 1.7 $.on()) for this.

Upvotes: 1

Related Questions