The validate/additionalmethods/login.js all should belong to the login.php page. However, I put it on both because either way, I’m getting undefined error messages. It refers to my valid() function which should come from the jQuery validate JS files…I’m trying to get, when you click “login”, the modal appears of the login page, with all the validation functionality I’ve programmed in. To get a perfect example of how the login modal should behave, go to the login.php file http://www.codefundamentals.com/cadeui/login
Login with admin@codefundamentals.com///password. Throw bad user/pass at it, whatever.
Can anyone spot why I’m getting undefined messages? Do you know of a better approach?
Maybe, the problem is you’re trying to invoke some functions from login.js until it was loaded.
This can happen when you load form and corresponding JS in a single request.
Also, you don’t need <html> and <head> in your login.php because you include this page inside of other one. Leave only contents of <body> on that page (without <body> tag itself).
Also, in your login.js script, you’re trying to set up form validation on the login form, which doesn’t exist in the DOM until after the login link has been clicked.
His scripts are already at the end of the body, but it wont make any difference in this case as the element he’s trying to attach the validation is inserted into the page via AJAX sometime after the page has loaded.
I can’t do that. What if users have JS disabled? They need the regular login page with JS disabled. I did think of only keeping <body> but then I thought of disabled JS users (and yes, I do care about making this work without JS.)
Don’t I already do that?
It’s late here, but I don’t see how to fix this problem with this advice. Yes, it loads after the page has loaded, so does including the scripts not really do anything at this point? What SHOULD I be doing? I’ve never used jQueryUI so I’m just flailing here.
I’ve tried adding the validation scripts, etc, to the login.php page, as mentioned in post #1. I still had those errors. I threw all my scripts on BOTH pages and still had these errors.
Hmmmm, I went to the login page given in the OP.
The Username input made me enter an email address (I entered a bogus one).
Then I entered a bogus password
I got
Error: Your username or password is incorrect. Please try again.
But no error messages in the console.
AFAIK you can use on() to wait until a selector appears in the DOM, that might work here http://api.jquery.com/on/
So on that modalID example, throw in the jquery validation and logging in? E.g. wrap all my code inside that “body on” code?
I don’t think my modal has an ID…? I do a #login click eventlistener. I assume, in that example, I’d replace #modalId with #login? It’s late here and I really need to sleep. Night night Sitepoint .
So you have to check request type. If page is requested with ajax then response only with body contents, else send full page with <html> and <head>. It isn’t correct to include full DOM into another DOM anyway.
Another option would be to put the login form markup into a separate file which you could include into both pages. This would be quicker for the user (as there’d be no AJAX request when the login button was clicked), and as markup would exist in the DOM when your JS is executed, your validation would be attached correctly.
I removed the “body on load” code that Mitt suggested. It ended up breaking when I just went to login.php and tried logging in (most likely due to me not using it right). I also made it so the ajax version of my page only loads up the login.js, otherwise, you get the full page on non-ajax.
Now it works as expected (minus some CSS z-index issues which I’ll take care of shortly)…Thank you all for the great help.