jQueryUI - Hard time doing a login modal

JavaScript
1

http://www.codefundamentals.com/cadeui/

You’ll notice that that page has a lot of JS files

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script type="text/javascript" src="/cadeui/system/js/scrollit.js"></script>
<script type="text/javascript" src="/cadeui/system/js/scrollflow.js"></script>
<script type="text/javascript" src="/cadeui/system/js/sticky.js"></script>
<script type="text/javascript" src="/cadeui/system/js/scripts.js"></script>
<script type="text/javascript" src="/cadeui/system/js/login.js"></script>

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?

2

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).

3

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.

4

The solution to this is to place as many as possible of your scripts at the end of the body.

5

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.

6

Ahh yes, that’s where placing an event selector on the document that watches for the added element, can come in useful.

7

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.

8

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/

9

Yes. As said, the page works perfectly. It’s putting it into a modal which does not work.

So wrap my entire code in on()? I’ll do this in the morning; just want clarification before I head to bed :slight_smile: .

Edit-Nevermind. I just change click() to .on(“click”…etc.

I knew shortcutting to click() would screw me over. Never saw why people didn’t just do .click() - I’d always see .on(“click”… :stuck_out_tongue: .

10

You can also do something like
$('body').on("#modalId")
i.e. not an event, but the “arrival” of an element.

11

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 :heart:.

12

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.

1 Like
13

If you want to do what @megazoid suggests, you can use this code in your login.php to check if the page is being requested via AJAX or not:

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    /* return partial markup */
}

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.

1 Like
14

Brilliant. Dunno why I didn’t think of that.

15

Now I don’t get errors, but the page doesn’t make use of my ajax. Can anyone spot why?

16

Try removing these files from the HTML that gets sent back via AJAX:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

as they are already loaded by the home page.

Likewise, remove login.js from the home page and let it be inserted along with the markup from login.php.

1 Like
17

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 :slight_smile: (minus some CSS z-index issues which I’ll take care of shortly)…Thank you all for the great help.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.