asked on

LightView - Close Modal and Refresh Parent Page

I am at a loss. I am using Nick Stakenburg's LightView and can't seem to solve why I am having a problem.
I have a login form in a LightView modal window. When the user submits the form, I need the modal window to close, the information sent to a login.php program, and the window that is parent to the modal to be refreshed.
There is a login check in the header that needs to change the button display when the user is logged in. I've been using the login routine or a few years, so there is no problem there. My problem is the LightView modal is not going away and I don't know how to refresh the page. I could do it with javascript in the login.php script, but it seems that I should be able to do both within the form script that displays in the modal.

I am calling LightView inline like so:

<a class="lightview btn btn-success" data-lightview-title="Login" href="scripts/loginform.php" data-lightview-options="skin: 'light', border: {size: 15, color: '#FFFFFF', opacity: 1 }, width: 600, height:399" data-lightview-caption=""><i class="fa fa-unlock-alt"></i>&nbsp Log in</a>

Open in new window

Between the html5 body tags is this:

      <div style="float:left; width:240px; font-family:Arial, Verdana, sans-serif; color:#000000; text-align:center; font-weight:600;">
         <form id="LoginForm" method="post" action="../login.php" onsubmit="return MoveOn()">
            <br /><br /><br />
            <label for="user">Username or Account Code:</label><br />
            <input type="text" id="user" name="user" /><br /><br />
            <label for="pass">Password:</label><br />
            <input type="password" id="pass" name="pass" /><br />
            <a class="ALink" href="../passwordlost.php">I forgot it</a><br /><br />
            <input class="TextBox" style="display:inline; outline:none;" id="KeepLogin" name="KeepLogin" onclick="javascript:StoreCookie();" type="checkbox"> Keep me logged in<br /><br />
            <input type="hidden" name="sublogin" value="1" />
            <input class="BigButton" type="submit" value="Submit" />
         </form>
      </div>
      <script type="text/javascript">
         function MoveOn()
         {
            lightview.hide();
            return true;
         }
      </script>

Open in new window

HainKurt

try

lightview.hide();

>>>

Lightview.hide();

RationalRabbit

ASKER

Uh, I did.

HainKurt

check documentation

Lightview API
http://projects.nickstakenburg.com/lightview/documentation/api

Lightview.hide()
Hides the Lightview window when visible.

Lightview.hide();

Open in new window

RationalRabbit

ASKER

Did you look at the sample code above?

HainKurt

yes...

did you try my suggestion above, @ ID: 42268687?

HainKurt

maybe it was not clear :)

there is no such thing like:

lightView.hide();

Open in new window

but there is

LightView.hide();

Open in new window

JS is case sensitive language...

RationalRabbit

ASKER

Please excuse the typo. However, that is not the problem. I have tested this in several places with correct capitalization, including this exact code (with Lightview capitalized). Have no idea why it should not work. By the way, so as not to confuse anyone, neither is there such a thing as LightView.hide().

HainKurt

I tried to create a demo but could not, not working somehow...

https://jsfiddle.net/hve9uoce/

do you have a working sample?

HainKurt

I opened this page

http://projects.nickstakenburg.com/lightview

then with chrome F12 / debugger, I added this function on console (just copy paste enter)

function MoveOn() {
  alert("moveon");
  Lightview.hide();
  return true;
}

Open in new window

then found the form and added onsubmit event

<form action="/not/really/posting/this.php" method="post" onsubmit="return MoveOn()">

Open in new window

after this, I opened the form demo (bottom-right) and clicked "proceed" button, and it closed immediately...

so it works!

RationalRabbit

ASKER

Unfortunately, I can't send you a link because it's on an intranet production site. I'll create the basic scenario on my server and see what happens. Of course, if it works there, I'm still scratching my head. There's a lot of jQuery objects running on this page, including my own, so something must be interfering. I was hoping for a quick fix and it may just take a process of elimination. Still can't figure out what might interfere, though. I'll get back to you, HainKurt, but it may be a day or so. Still will need to figure out how to refresh the page afterwards.

HainKurt

but you cannot just submit the form in lightview and close it immediately and then refresh the parent...
nothing will work as expected this way...

you should wait for a response and after form is successfully processed, you can do

window.location.reload();

Open in new window

RationalRabbit

ASKER

Here's a simple example: Login Test

HainKurt

you can use

$(".lv_button_top_close").click();

Open in new window

window.location.reload();

Open in new window

RationalRabbit

ASKER

The idea is to not force the user to click the close button. It should be seamless. They open the login modal, fill out the form, click the submit button, and, as long as the information is correct, that should be all they need to do. I've had this login running for several years in the header of the current site. Just changing it to operate from a modal window, due to a new design.

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RationalRabbit

ASKER

The trigger to close the window is where my concern lies. Once I see that is working, I will decide where and when it will be activated. Right now, associating it with the submit button was the easiest way to test, and that is where I am stuck, as it is not working. Basic validation (has something been entered and does it fit the criteria) would be done at the form level. My thought was if, server side, there is an invalid entry, such as the user not existing, I would simply recall the form modal with a parameter that would provide an error message. If you have a better idea, I'm all ears.

Yes, Ajax can work, and some benefit is derived from, figuratively, doing everything in Javascript, but my main concern, right now, is why the lightview model is not closing and how best to refresh the main page on success.

RationalRabbit

ASKER

As far as refreshing the page, in PHP I can send the file name to the login routine, through the form and do a redirect. As far as javascript, I suffer a bit from not being sure what exactly the DOM considers the "window" at whatever point in this process.

I guess, if I used a redirect in the PHP code, it would solve the problem of the lightview modal. as the page would restart, but it is important to know what is causing it not to work.

HainKurt

Lightview.hide();

Open in new window

will work...

now go to your page with chrome,
press F12
click login
on console type "Lightview.hide();" and press enter, it will close the window...

RationalRabbit

ASKER

Sorry, I'm missing your point. I'm sure the function functions. However, it is not functioning in the scenario I have created, and it seems that it should - especially given your example. I may change the scenario and it may still not function unless I understand what the problem is.

HainKurt

not sure what is not working :)

try

window.opener.Lightview.hide();

Open in new window

do you want to run this from iframe?

RationalRabbit

ASKER

I would rather not. Seems like the same problem would prevail, though. I'm going to try writing a jQuery function, which is probably how it is going to end up, anyway. Not holding my breath - that's how I had it written originally and it wasn't working, so I got down to the current structure as a "bare bones" approach. Will try something else, including your suggestion, and see what happens. Thanks for hanging in there.

HainKurt

msg me when your page is ready and not working...
I can have a look at it...

RationalRabbit

ASKER

window.parent.Lightview.hide() :)

RationalRabbit

ASKER

However, I see your point now. This stops processing, preventing form submission, so the best way to do this is using AJAX. Then I can close the window on success.

RationalRabbit

ASKER

window.parent.Lightview.hide() is the solution for closing the window. I selected the Ajax solution above, as the best answer because the second part of my question concerned what to do on success. AJAX is the best solution to complete the process smoothly.