How to get the JSP page name in Java Script included? - javascript

I have two JSP files a.jsp and b.jsp which shares common ".js" file. Is there any way that I can find from which jsp file the function inside common script is invoked, Without passing any parameter while calling the script function.

I think there is no way to do as you looking for -
But as a alternate way you can give the you file(a.jsp) as your element id or name and get it after clicking the element like this -
$(document).ready(function() {
$("#a").click(function(event) {
alert(event.target.id);
});
});

You could put a hidden variable in each JSP that tells you the file name.
Something like:
<input type="hidden" id="jspName" value="a.jsp"/>
Then to get it from the javascript:
var jspName = $('#jspName').val();

Related

How to modify elements from external JS file?

I want to split HTML file and separate javascript into an external file. In the HTML file, I have an element <p id="log">, which I now access using document.getElementById("log").innerHTML.
How to access this element from external JS?
Is it ok when I just use document.getElementById("log").innerHTML in the external JS? Or I need to pass element as parameter to some function like
function myFunc(logElement) {
logElement.innerHTML += "some new data";
}
Or there are another common practices?
Based on what you wrote, you are trying to create a separate JS file to access a value inside a HTML tag. If that's all you want to do, just insert a <script> tag in the HTML file you want to access the data:
<script src="file.js"></script>
From there you use your function to access it. And yes, you can use document.getElementById("log").innerHTML as long as you have the script tag in the HTML file you want to access the data.

How to call a JavaScript function in HTML on load

JavaScript code I am trying to get to call from the HTML.
var ClassList = new Array ["Bio1300","csci12"];
function ClassMenu(ClassList) {
return (ClassList.toString);
};
This is the HTML code I am trying to call the JavaScript function inside of on the load of the page.
<li>
<script type="text/javascript" src="JavaScript InProg.js">
function ClassMenu() {
console.log(ClassList.toString);
}
</script>
</li>
Please help. I have many other functions I am trying to call in this manner that are both arrays and contain mathematical calculations.
There are a few issues with the code snippet you've provided. Firstly, it's considered a best practice to add your <script> tags inside the <head> of the document or at the end of the document when loading JavaScript files. Secondly, your source reference is incorrect. Assuming the JavaScript file InProg.js is at the same directory level as your HTML file, you could change your script link to something like this:
<script src="InProg.js"></script>
Once you've ammended how you're loading the JavaScript file into your page, you can simply make a call to the function inside another <script> tag from anywhere on the page, like so:
<script>ClassMenu(params);</script>
Also, I'd recommend adding the console.log statement to the function you're calling.
Hopefully this helps.

Javascript Variable in Url.Content

I have a javascript variable called locid that I am trying to use as part of a URL by setting the data-url of a div as follows:
data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=locid&AsyncUpdateID=catalogue-view'>
I know I can't just throw the locid in that string as I have done in my sample code but I just put it there to illustrate where I need my javascript variable to be. How can I achieve this??
The problem here is #url.content needs to be run on server, where JavaScript variable is not visible. Write an independent AJAX call to fetch content and than set content in data-url
You cannot use the Javascript variable directly into attribute.
A workaround can be to reorder the parameters of your url and setting the JavaScript variable in script tag.
<button id="myButton" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?AsyncUpdateID=catalogue-view'></button>
I have reordered the url parameters here. The location parameter will be set by following script. Place this script just after the button element.
<script>
var button = document.getElementById('myButton');
var url=button.getAttribute('data-url');
url+="&LocationID=" + locid;
button.setAttribute('data-url',url);
</script>
You can put the value in the page using document.write, but you can't write it out inside the tag, you have to write out the entire tag. Example:
<script>
document.write('<div data-url="#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=' + locid + '&AsyncUpdateID=catalogue-view">');
</script>

how can I detect page when I compile all javascript to one file

I compile all my javascript for different pages into one file, so I have to identify page for my all.js. I can put a hidden element in my pages and let javascript detect this element, but I don't like this solution, are there any other ways to do this?
You could go by the url using location.href (or another field from the location object).
However, a better approach is using a data- attribute on the body tag, e.g. <body data-page="whatever"> and then using $('body').data('page') to retrieve the value.
If you script is based on pages, then compiling them into one script is a bad idea, load the file separately, it will be lighter and definately increase some performace.
I am not sure, why do you need this, but in general it is not good practice to change dynamicaly change content of javascript file, since you are disabling javascript cacheing, what can be performance issue later.
Any way, you can solve it from other side, what about using all.js just to detect the page, where are you and then you can use this information, to load right javascript file dynamicaly, like in the following example
document.write('<script src="'+location.pathname+'.js"></script>');
Which will load same file as you are on, just with .js extension. So for example on index.html page it will load index.html.js file
I almost always use MVC frameworks and tend to put my action and controller as classes on the body element
<body class="main_controller index">
Which lets you do things like this:
$(document).ready(function(){
//Only for lessons#search
if (!$(body).hasClass('lessons search')) {
return;
}
function close_style_filter_box() {
$('#style_filter_box').slideUp();
}
});
$(document).ready(function(){
//Only for main_controller#index
if (!$(body).hasClass('main_controller index')) {
return;
}
function do_something_else_on_this_age() {
....
}
});
Another way is using javascript variable:
var PAGE = 'page1';

iframe query string

I have got the values by passing the query string in an iframe.src = "xyxz.jsp?name="+name+"&pass="+pass+"&id="+id.
I need to pass those values which i have got to another jsp page
<iframe src="xyz.jsp"></iframe>
How can i do that?
Your question is unclear, but I guess that you want to pass the querystring of the parent JSP page to the JSP page which is in an iframe of the parent JSP page. If so, then just print HttpServletRequest#getQueryString():
<iframe src="page.jsp?${pageContext.request.queryString}"></iframe>
That said, iframes are an extremely bad practice and very clumsy when all the pages are located at the same server. Rather use server side includes using <jsp:include>. This way the included JSP has access to the same request object.
Use Javascript to dynamically change the src attribute of frame
function changeSrc()
{
window.frames['testframe'].src = "xyxz.jsp?name="+name+"&pass="+pass+"&id="+id;
}
Is this what are you looking for?
according to your cooment to #Manjoor post you want to call javascript function which is defined inside iframe and pass the parameters to it, if that so check this post
Invoking JavaScript code in an iframe from the parent page

Categories