How to put JQuery code in an External JS file and run in JSP?

Hi there
I am working on a web application project
this is my code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ include file="/jsp/include.jsp" %>
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://localhost:8080/WebFormSpringHibernate/css/mainfile.css"/>
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/registration.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    function initTemplates() {
        $('.template').each(function () {
            var template = $(this).children(),
                key = template.attr('class') || 'template' + templates.length;
            templates[key] = template;
            $(this).remove();
        });
    }
    
    var templates = {};
    initTemplates();

    //when the Add Field button is clicked
    $("#add").click(function () {
        //Append a new row of code to the "#items" div
        $('#items').append(templates['emp_detail'].clone());
    });
    $(document).on('click', '.delete', function () {
        $(this).parent().remove();
    });
    $(".deletefile").click(function () {
        $(".deletefile").parent("div").remove();
    });
    
    $("#mobile_Add").click(function(){
    $('#mobile_block').css('display','block');
     var c = $('#mobile_block:first').clone(true);
     $('#mobile_block:last').after(c);
     });
    
    $('#mob_del').click(function(){
    $(this).closest('#mobile_block').remove();
    
    });
 });
</script>
</head>
<body>
<div id="page-wrap">
<ul class="dropdown">
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/registration.jsp">Add Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/searchemployee.jsp">Search Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/deleteemployee.jsp">Delete Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/updateemployee.jsp">Update Employee</a></li>
</ul>
  </div>
.....
.......
</body>
</html>

I want to place that code in external.js file
my external.js file is

function high_yes()
{
document.getElementById("high_school").style.display="block";
}

function high_no()
{
document.getElementById("high_school").style.display="none";
}

function inter_yes()
{
document.getElementById("inter_school").style.display="block";
}

function inter_no()
{
document.getElementById("inter_school").style.display="none";
}
function past_emp_yes()
{
    document.getElementById("add").style.display="block";
}
function past_emp_no()
{
    document.getElementById("add").style.display="none";
}

all code from that external.js are working fine.

Do I need to create a seprate.js file which will only contain JQuery function.Or I can mix both JavaScript Function and JQuery function in a Single JavaScript file

Thanks

Of course you can.
There is no “jQuery functions”, it’s all JavaScript.
jQuery is just a library (collection of useful JavaScript functions).
So you can cut everything from inside your <script> tag and append to .js file

2 Likes

@megazoid
Thanks its working know

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.