Is there any alternative of using JavaScript in JSP other than this?

Hi there

I am working on a web application project where their is a section that ask user to get their profile from server

Like other I am expecting to call a JavaScript file to do this with the help of AJAX.But I don't understand this

If I write this
<jsp:include page="/jsp/includes/hrHeader.jsp"></jsp:include> <script src="<c:url value="/resources/js/main.js" />"></script> <div id="myprofile"> <p>This is MyProfile in HR</p> <script type="text/javascript"> function myProfile(){ $.get("/CollegeManagementSystem/myprofileget", { } ).error( ).success( function(data) { location.reload(true); var obj=data; console.log(obj.userName); } ); } window.onload = myProfile(); </script> <jsp:include page="/jsp/includes/myprofileblockemployee.jsp"></jsp:include> <jsp:include page="/jsp/includes/footer.jsp"></jsp:include>

I am getting values in the console
but If I write something like this
<jsp:include page="/jsp/includes/hrHeader.jsp"></jsp:include> <script src="<c:url value="/resources/js/main.js" />"></script> <div id="myprofile"> <p>This is MyProfile in HR</p> <script type="text/javascript"> window.onload = myProfile(); </script> <jsp:include page="/jsp/includes/myprofileblockemployee.jsp"></jsp:include> <jsp:include page="/jsp/includes/footer.jsp"></jsp:include>

where myProfile() function is on main.js file

but I am getting myProfile() is undefined in console

why this is happening?

Is this because JSPs are compiled by server and JavaScript by web browser?

Thanks

If you remove the function, why would you be surprised that it becomes undefined?

I see where you said you moved the function into the main.js file. Is that file loading? Use the browser tools to check.

@Bear

Thanks for reply
Before I can discuss more on this topic Can you suggest a Proper way to run a Parse JSON file from server to a JSP using JavaScript AJAX

I have seen a lot of tutioral online but when I use them I am getting very Unexpected behaviour

for example
in my above post I was expecting that a Page is loaded once when it is success from server.

But I have seen on server it is sending many requests(debugging on server)

So what is proper way?

I also want page to be loaded when data is comingback from server.

Kishor Joshi wrote:I also want page to be loaded when data is comingback from server.

A whole page? Or just part of a page? Is the request returning JSON (data) or an HTML fragment? It's not clear what you are trying to do.

Two comments:

window.onload = myProfile();
This doesn't do what you think it does.

I am presuming what you wanted to say here is "when the window loads, execute the myProfile function"
What you actually said is "when the window loads, execute the function I get from running the myProfile function right now"
As the myProfile function doesn't return anything, that would be undefined.

The code you actually want to accomplish that is:
window.onload = myProfile;
i.e. WITHOUT the brackets.

However the onload function isn't the best way to do this.
Seeing as you are using JQuery, why not use JQuery's functionality to execute code when the document is "ready"

$( document ).ready( function() { myProfile(); })

Also, executing a window.reload on success of an ajax call to me just smacks of wrongness.
Why go to all the effort of making an ajax call, if all you are going to do is reload the page?
And then why should it behave any differently the next time?

As You can see I am also trying to print userName on console.

That is fine Name is printed only once in console not for every request that I am receiving on server

But I got request to server more than one times.

Why this is happening?

I want to reload whole page.

@Bear

You are right I have checked on Firefox that file main.js is not loading their

here is my code of both file suggestion given by stevan

this is my main.js
$(document).ready(function(){ function myProfile(){ $.get("/CollegeManagementSystem/myprofileget", { } ).error( ).success( function(data) { var obj=data; console.log(obj.userName); } ); } });

and this is my
myProfile.jsp file
<jsp:include page="/jsp/includes/hrHeader.jsp"></jsp:include> <%@ include file="/jsp/includes/include.jsp" %> <script src="<c:url value="/resources/js/main.js" />"></script> <div id="myprofile"> <p>This is MyProfile in HR</p> <script type="text/javascript"> window.onload=myProfile; </script> <jsp:include page="/jsp/includes/myprofileblockemployee.jsp"></jsp:include> <jsp:include page="/jsp/includes/footer.jsp"></jsp:include>

still not getting any thing I want

If you ask I can also paste my code of Included files

@stevan

If I am using

window.onload=myprofile;

I am not getting any call to server(Debugging on server)

Kishor Joshi wrote:I want to reload whole page.

Why? And if so, why are you using Ajax and JSON in the first place? Again, you need to explain what you are trying to do, not how you are trying to do it.

Why? And if so, why are you using Ajax and JSON in the first place? Again, you need to explain what you are trying to do, not how you are trying to do it

When User Clicks on MyProfile I want to show his/her profile JSOn response from server to JSP page with page Loading

see attached Image

Then just use a link to a JSP page with the appropriate content. Why all the Ajax and JSON?

Ajax and JSON are for when you want to fetch new data for a page without reloading.

Thanks @Bear

code is very lengthy I can't post solution but use something like this to work with javascript
<jsp:include page="/jsp/includes/hrHeader.jsp"></jsp:include> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <div id="myprofile"> <p>This is MyProfile in HR</p> <script type="text/javascript"> function myProfile(){ $.get("/CollegeManagementSystem/myprofileget", { } ).error( ).success( function(data) { var obj=data; console.log(obj.userName); } ); } window.onload=myProfile(); </script> <jsp:include page="/jsp/includes/myprofileblockemployee.jsp"></jsp:include> <jsp:include page="/jsp/includes/footer.jsp"></jsp:include>


If you want to execute a specfic javaScript when page is loaded


No external define function is working I think JSP is executed on sever and JavaScript on browser so that's why

@Bear: correct me if I am wrong

Kishor Joshi wrote:think JSP is executed on sever and JavaScript on browser so that's why

Whlie this statement is correct, I'm still not sure what the issue is. Whatever it is, it is not related to JSP versus JavaScript.

so As I asked in my above post what is the proper way to use javaScrpt AJAX function in JSP

1)Define it externally in a file
2)Define it Internally as I did in my above post

It doesn't matter, and it has nothing to do with whether the page is generated by JSP or not.

If the javascript code is anything much beyone the tirivial, the best practice is to use script imports
That way you don't mix up your HTML code with javascript too much. Same logic for the separation of JSP/Servlet.

In a perfect world, those script imports should be javascript modules to prevent name collisions etc.





>If I am using
>window.onload=myprofile;
>I am not getting any call to server(Debugging on server)

You might also need to declare your function slightly differently.
Functions are first class citizens in javascript, so you can assign them around as you like.
var myProfile = function(){ // myProfileFunction } window.onload=myProfile;

However I still recommend you use the jQuery ready event.
Using window.onload can be problematic.