Static files not loading with spring boot web, JSPs, context-path - javascript

I'm using Spring Boot 2.7.5, Java 8 and Maven and have the following jars included in pom.xml:
spring-boot-devtools
spring-boot-starter-data-jpa
spring-boot-starter-test
spring-boot-starter-tomcat
spring-boot-starter-web
tiles-core
tiles-jsp
tomcat-embed-jasper
I want to use JQuery and DataTables. My static content is in src/main/resource/static:
src/main/resources
bootstrap-5.2.2-dist/
DataTables/
jquery-ui-1.13.2.custom/
jquery-3.6.1.min.js
myapp.css
myapp.js
I have a configuration class that has this
#Configuration
#EnableWebMvc
#ComponentScan(basePackages = { ... })
public class ApplicationConfiguration implements WebMvcConfigurer
{
#Override
public void addResourceHandlers(
ResourceHandlerRegistry registry)
{
registry//
.addResourceHandler("/static/**")//
.addResourceLocations("/static/");
}
}
In my JSP, I have tried the following, none of which work
<script type="text/javascript" src="jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
In my application.properties, I have this:
spring.mvc.view.prefix=/WEB-INF/content/
spring.mvc.view.suffix=.jsp
server.servlet.context-path=/myapp
What am I missing or doing wrong?

Found a way to make it work. Not the best answer, but it is an answer (cue Wheel of Time quote):
I moved the static folder directly under the webapp folder. I then changed the script and link tags to have the src/href start with "static/".
I have no idea why this works but am still open to finding the right way to do it.

Related

Why do i have to include JS files in order to work with jquery in every single view?

As the question says all about it but to give you a little more information i included all the .js files in my Asp.NET Mvc application like below:
<script src="~/Scripts/jquery-1.10.2.js"></script>
Even that I have to include .js files in every single page in order to be able to work with jQuery else it doesn't work. I tried to include these script files in BundleConfig surprisingly the scripts where not working at all even on the layout page. What is the trick?!
In general you have got an App_Start/BundleConfig.cs in your project
public class BundleConfig
{
public static readonly string SiteJquery1Bundle = "~/bundles/jquery1";
public static readonly string SiteJquery2Bundle = "~/bundles/jquery2";
public static void RegisterBundles(BundleCollection bundles)
{
// We will choose bundle to render depending on IE version in view
bundles.Add(new Bundle(SiteJquery1Bundle)
.Include("~/Scripts/jquery-1.10.2.js"));
bundles.Add(new Bundle(SiteJquery2Bundle)
.Include("~/Scripts/jquery-2.1.3.min.js"));
}
In your Shared/_Layout.cshtml view add:
<html>
<head>
<title>...</title>
<!--[if lt IE 9]>
#Scripts.Render(BundleConfig.SiteJquery1Bundle)
<![endif]-->
<!--[if gte IE 9]><!-->
#Scripts.Render(BundleConfig.SiteJquery2Bundle)
<!--<![endif]-->
...
</head>
So, default ASP.NET MVC projects adds _ViewStart.cshtml which defines single layout in every view. And check bundle registration in Global.asax.cs
protected void Application_Start()
{
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
// ...
}

Proper way to move multiple .js includes into one include?

I have 2 Razor .cshtml files that have a similar structure like the following:
<script type="text/javascript" src='#Url.Content("~/Scripts/jqwidgets/jqxcore.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/jqwidgets/jqxdata.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/jqwidgets/jqxbuttons.js")'></script>
...
<More header stuff (different in both files)>
<script language="javascript" type="text/javascript">
function commonFunctionForJqWidgets() {
...
callSomethingFromJqWidgetsLibrary();
...
}
</script>
I am writing common code for these 2 files and would like to put the common code in another .js (or .cshtml) file instead of duplicating it in both places. However, the common code requires including some of the jqwidgets includes since it calls library functions for it.
What would be the proper way to handle this? Should I simply add a new .cshtml file, move all of the includes in there, and then define my common functions in there as well?
Usually when you have common UI code, you may put that inside a partial view which can be included in other views as needed. But in your case, It is more like a bunch of javascript files you want in multiple files. So you may create a script bundle which will have all those scripts and use that in your pages as needed.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// Your existing bundles here
bundles.Add(new ScriptBundle("~/bundles/jQxWidgets")
.Include(
"~/Scripts/jqwidgets/jqxcore.js",
"~/Scripts/jqwidgets/jqxdata.js",
"~/Scripts/jqwidgets/jqxbuttons.js",
"~/Scripts/SomeOtherCustomJsfileRelatedtojQxWidgets.js"));
}
}
And in your specific views, you can include this inside the Scripts section.
#section Scripts
{
#Scripts.Render("~/bundles/jQxWidgets")
}
Or if you have more than just the scripts as your common stuff, create a partial view and include your common stuff there and include this partial view in your other views as needed.
Create a partial view called CommonGrid.cshtml inside your ~/Views/Shared folder
<h2>Common header for both the pages </h2>
#section Scripts
{
#Scripts.Render("~/bundles/jQxWidgets")
}
And in your other views
UserList.cshtml
<h1>Users</h1>
#Html.Partial("CommonGrid")
ProductList.cshtml
<h1>Products</h1>
#Html.Partial("CommonGrid")
You can also make your CommonGrid strongly typed to a view model and create a property in your page specific view model of this type(of CommonGrid's viewmodel) and pass that in the Html.Partial method.

mvc6 jquery referenced file not found

this is doing my head in a bit.
Under ASP5 MVC6 I have not been able to get JQuery to be sourced.
I have set the app.UseStaticFiles(); it is set set before the useMVC() as below
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
app.UseIISPlatformHandler();
app.UseApplicationInsightsRequestTelemetry();
HttpService.Configure(app.ApplicationServices.GetRequiredService<IHttpContextAccessor>());
app.UseApplicationInsightsExceptionTelemetry();
app.UseSession();
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true,
});
app.UseMvc();
}
my layout file seems to be serving up the .css fine but not the scripts. I can even navigate/view through the browser to the relative js file it loads the text in the browser.
Visual studio always has the same message though ( even though the path is correct )
07:27:35.4149: Referenced file '~/lib/jquery/dist/jquery.min.js' not found.
07:27:35.4149: Referenced file '~/lib/bootstrap/dist/js/bootstrap.min.js' not found.
in my layout:
<body>
#await Component.InvokeAsync("Navigation")
#RenderBody()
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
Embarrassingly enough I was simply missing a #section scripts { } on one of my pages and was being distracted by the fact that debugger kept saying it couldnt find the .js at the file path.
I dont know why the vs2015 debugger constantly says it cant reference the file, but it does work properly now when its launched..

Applying Script to all pages in project

I want to remove mentioning scripts every page like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
it should be mentioned at once.like a common place to refer for source.
i have my framework in 3.5. how can i achieve this.
create a new project to hold all JavaScript files that you need want throughout the application. You can embed all the script into the DLL. That way, if the DLL is deployed to the website, all JavaScript files are also automatically deployed.
You can check out complete tutorial given below.
Managing-Your-JavaScript-Library-in-ASP-NET
You can do it by using master page. Demo like
<master page>
<header>
//add script file here
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
//Other scripts
</header>
<content>
<Sub pages>
//Here you can debase your pages(like dynamically change pages), So the header script will referred from above header
</content>
<footer>
<//footer>
<master page>
MSDN link for Master page
If you don't want to use a master page you could use a server control and add it to the pages as needed.
Adding a Master Page is good.
As an alternate way, you can achieve this by creating a base page and adding scripts from web.config file into the page's header by overriding Page class OnInit event.
Create a class as BasePage inheriting from System.Web.UI.Page like
public class BasePage : System.Web.UI.Page
{
}
On all the pages where you want to load the scripts, inherit them from BasePage
Earlier
public partial class _Default : System.Web.UI.Page
{
}
Now
public partial class _Default : BasePage
{
}
Mention your script files at One place - Web.Config as below
<appSettings>
<add key="ScriptJquery" value="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/>
<add key="ScriptJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/>
</appSettings>
In the BasePage Class override OnInit as below
public class BasePage : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
IEnumerable<string> scripts = ConfigurationManager.AppSettings.Keys.OfType<string>().Where(s => s.StartsWith("Script"));
foreach (string script in scripts)
{
Literal scriptTag = new Literal();
scriptTag.Text = string.Format(#"<script src=""{0}"" type=""text/javascript""></script>",ConfigurationManager.AppSettings[script].ToString());
Page.Header.Controls.Add(scriptTag);
}
base.OnInit(e);
}
}

Unable to get navigator.notification.alert("test") working on a Phonegap android app

I was following the tutorial to make an android app using phonegap (http://mobile.tutsplus.com/tutorials/phonegap/phonegap-from-scratch/). The app is supposed to display a popup alert using javascript but this isn't working. Does anyone know what I could be doing wrong? Here's my code for the HTML file (index.html)
<!DOCTYPE HTML>
<html>
<head>
<title>mobiletuts phonegap</title>
<script src="phonegap-1.2.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
Here's the code for the main java file in the src folder:
package com.my.namespace;
import android.os.Bundle;
import com.phonegap.DroidGap;
public class HelloPhonegapActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
I did set the permissions in the android manifest file exactly as specified on http://mobile.tutsplus.com/tutorials/phonegap/phonegap-from-scratch/.
Thanks!
I just realized I had a different version of phonegap.js in my source folder than the one I was referring to in the html script tag. It works now!

Categories