[Ajax][jQuery] Konflikt formularza i return false w popupie Opcje

[kcinon]

Witam,

Tworzę w symfony prosty panel logowania, który wczytywany jest przez Ajaxa.

Fragment kodu, który odpowiada za wyswietlanie wczytanego formularza

[PHP] pobierz, plaintext 
<a href="<?php echo url_for('sfGuardAuth/signin'); ?>" title="Zaloguj się" class="loginBtn" id="logowanie">zaloguj się</a>
<div id="loginPopup">
    <div id="loading">
        <?php echo image_tag('loading.gif', array('alt' => 'Wczytywanie...')); ?>
    </div>
</div>
[PHP] pobierz, plaintext 

Formularz wczytywany z pliku zewnętrznego

[PHP] pobierz, plaintext 
<form action="<?php echo url_for('@sf_guard_signin') ?>" method="post">
  <table>
    <?php echo $form ?> // wyswietla tabelkę z inputami - <input id="signin_username" type="text" name="signin[username]"> i <input id="signin_password" type="password" name="signin[password]"> i labelami dla nich
  </table>
  <input type="submit" value="<?php echo __('sign in'); ?>" />
</form>
[PHP] pobierz, plaintext 

Założenie jest takie, że formularz ma się pojawiać w popupie, a po wpisaniu wartości i naciśnięciu submita, ma przekierować do strony z logowaniem,
jednak gdy klikamy poza obszar popupa, ten ma się ukrywać.

Poniżej kod:

[JAVASCRIPT] pobierz, plaintext 
<script language="javascript">
      $(function(){
        var content = $("#loginPopup");
        var loading = $("#loading");
 
        //show loading bar
        function showLoading(){
                loading
                        .css({visibility:"visible"})
                        .css({opacity:"1"})
                        .css({display:"block"})
                ;
        }
        //hide loading bar
        function hideLoading(){
                loading.fadeTo(1000, 0);
                content.slideDown();
        };
 
        $('#loginPopup').hide();
 
        $('#logowanie').click(function(event){
          showLoading();
          content.load('<?php echo url_for('szukaj/loguj'); ?>', hideLoading);
          $('#loginPopup').toggle();
          return false;
        });
 
        $('#loginPopup').on('click', function(){
          return false;
        });
 
        $(document).click(function(){
          $('#loginPopup').hide();
        });
      });
</script>
[JAVASCRIPT] pobierz, plaintext 

Problem jednak jest taki, że jeśli zablokuję ukrywanie popupa po kliknięciu #loginPopup, automatycznie wczytany formularz też się blokuje i nie może zostać wysłany.
Gdy tego nie robię, formularz ukrywa się po kliknięciu na dowolny element zawarty w popupie (inputy, submity, tlo) ale następuje przekierowanie.
Próbowałem blokować elementy zagnieżdzone ale niestety tak też nie działa.

Czy znacie jakiś sposób aby ten problem rozwiązać?

Ten post edytował kcinon 22.08.2012, 09:22:04