Stuck with setting HTML attribute using JS...

Maximilian

Lifer
Feb 8, 2004
12,604
15
81
I give up, ive been at this for ages, what am I missing here? Im trying to set the action attribute of a form using javascript. It works when I use a string literal, it works when I use a variable declared in the same html file, it absolutely will not accept variables from another file... I dont understand why. Ive even dumped a copy of the ServerAPI.js file right there in the same directory to eliminate the possibility of it not being found.

HTML file, ive bolded the relevant bits:
Code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
[B]                <script type="text/javascript" src="ServerAPI.js"></script>
[/B]        <div>Session test page! Should only appear for a valid session.</div>
        <form id="goToMainPageForm" action="not fucking working" method="GET">
            <input type="submit" value ="Back to main page">
            <input type="hidden" name="jsessionid">
        </form>
        <form name="logoutForm" action="/fitness_tracker_servlet_maven/FrontController/desktopLogout" method="POST">
            <input type="submit" value ="Logout">
            <input type="hidden" name="jsessionid">
        </form>

        <script type="text/javascript">
            //here we get the jsessionID if there is one
        window.onload = function()
        {
            var currentURL = window.location.href;
            var jSessionIDSearchParameter = ";jsessionid=";
            var jSessionIDLocation = currentURL.search(jSessionIDSearchParameter);
            if(jSessionIDLocation === -1)
            {
                //no jSessionID found
            }
            else
            {
                var jSessionID = currentURL.substring(jSessionIDLocation);
                
                var elementsList = document.getElementsByName("jsessionid");

                for(var count = 0; count < elementsList.length;count++)
                {
                    elementsList[count].value = jSessionID;
                }
            }
        };
        </script>

[B]        <script type="text/javascript">
        window.onload = function()
        {
            document.getElementById("goToMainPageForm").action = desktopMainPageRequest;

        };
        </script>[/B]
    </body>
</html>

ServerAPI.js, the file I want that first html document to be able to read variables from
Code:
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

//parameters
var port = 8080;
var projectName = "fitness_tracker_servlet_maven";
var mainURL = "http://localhost:"+ port + "/" + projectName + "/";

//Server API
var URLLoginPage = "index.html";

//FrontController
var frontController = "/fitness_tracker_servlet_maven/FrontController/";

//desktop
var desktopLoginPageRequest = "desktopLoginPage";
var desktopLoginRequest = "desktopLogin";
var desktopLogoutRequest = "desktopLogout";
var desktopMainPageRequest = "desktopMainPage";
var desktopSessionPlaceholderRequest = "desktopSessionPlaceholder";

//mobile
var mobileLoginPageRequest = "mobileLoginPage";
var mobileLoginRequest = "mobileLogin";
var mobileLogoutRequest = "mobileLogout";
var mobileMainPageRequest = "mobileMainPage";
var mobileSessionPlaceholderRequest = "mobileSessionPlaceholder";



var alreadyLoggedIn = "alreadyLoggedIn";

What im doing works fine in index.html though:

Code:
<!DOCTYPE html>
<html lang="en">
    
  <head>
      <title></title>
    
    <script type="text/javascript" src="ServerAPI.js"></script>
  
        
        //method testing the userAgent to check for mobile devices, this method
        //accounts for tablets therefore is preferred
        window.onload = function()
        {
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
            {
                window.location="FrontController/" + mobileLoginPageRequest;
            }
            else
            {
                window.location="FrontController/" + desktopLoginPageRequest;
            }
            
        };
        
    </script>
  </head>

  <body>

  </body>
</html>

Im certain ive missed something or theres something im not understanding about how this is meant to work :confused:
 

purbeast0

No Lifer
Sep 13, 2001
53,764
6,645
126
i believe desktopMainPageRequest is local to the scope of that first script. make it a global and it should work. (edit: maybe not)

just fyi, that design is really poor. you don't want to hit 2 completely different controllers and code bases based on whether it's on mobile or desktop.
 
Last edited:

Sgraffite

Senior member
Jul 4, 2001
209
149
116
Possibly related but you're assigning an anonymous function to window.onload twice. I'd imagine one would overwrite the other depending on the order the code is run? I don't see how it would run both.

I use "var" declarations within external scripts and I haven't had a scope problem where I needed remove the "var" to make it global.
 

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,835
4,815
75
Possibly related but you're assigning an anonymous function to window.onload twice. I'd imagine one would overwrite the other depending on the order the code is run? I don't see how it would run both.

That's right, window.onload will only run one function. Good JS libraries like jQuery will provide a function that adds functions to a list to be run by onload. Here's a similar "addLoadEvent" function for if you're not using a JS library.
 

brianmanahan

Lifer
Sep 2, 2006
24,697
6,054
136
just fyi, that design is really poor. you don't want to hit 2 completely different controllers and code bases based on whether it's on mobile or desktop.

yeah, that doubles the server-side work for basically no (good) reason.

also dont want to define dozens of javascript variables in the global namespace.

package or IIFE those things!
 

Maximilian

Lifer
Feb 8, 2004
12,604
15
81
Ok cheers guys, ill try it with only a single window.onload and see how that pans out.

This is the first thing ive ever made myself, its for a uni project. You should have seen the design two weeks ago :eek: Defo open to design pointers, hints, best practices etc!

Ill show you guys the design on the backend, its not all doubled up, everything goes through a single frontController, mobileLogin and desktopLogin resolve to the same servlet but I think it would be useful to know if its mobile or desktop since they will use different login pages (i imagine).

This is its current state:
2GEDt3s.png


.core packages are used for both mobile/desktop, servlets dealing with desktop only will be in .desktop and mobile stuff will be in .mobile, theres .unused as well which is a bunch of stuff that never panned out, or I found a better way so it got ditched, itll be useful for uni report purposes.
 

Maximilian

Lifer
Feb 8, 2004
12,604
15
81
Beautiful, worked a treat! :thumbsup:

yeah, that doubles the server-side work for basically no (good) reason.

also dont want to define dozens of javascript variables in the global namespace.

package or IIFE those things!

Ill put that on the to do list.
 

purbeast0

No Lifer
Sep 13, 2001
53,764
6,645
126
Ok cheers guys, ill try it with only a single window.onload and see how that pans out.

This is the first thing ive ever made myself, its for a uni project. You should have seen the design two weeks ago :eek: Defo open to design pointers, hints, best practices etc!

Ill show you guys the design on the backend, its not all doubled up, everything goes through a single frontController, mobileLogin and desktopLogin resolve to the same servlet but I think it would be useful to know if its mobile or desktop since they will use different login pages (i imagine).

This is its current state:
2GEDt3s.png


.core packages are used for both mobile/desktop, servlets dealing with desktop only will be in .desktop and mobile stuff will be in .mobile, theres .unused as well which is a bunch of stuff that never panned out, or I found a better way so it got ditched, itll be useful for uni report purposes.

again, the bold is not ideal and a poor design. you don't want to have separate code bases for the same site. all of this can be done with responsive design and css.
 

Maximilian

Lifer
Feb 8, 2004
12,604
15
81
again, the bold is not ideal and a poor design. you don't want to have separate code bases for the same site. all of this can be done with responsive design and css.

Alright ill rejig it and ditch the mobile page/desktop page thing.

I havent made any of the actual features or fleshed out any pages luckily so ill look into responsive design for when I do that.