Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Modal mit Ajax prüfen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Modal mit Ajax prüfen

    Hallo,

    ich hab ein Formular (Login) das in einem Modal sich öffnet.

    Jetzt habe ich das Problem, das es sich schließt wenn ich auf Login drücke.

    Ich würde es gerne geöffnet lassen. Eine Fehlermeldung wenn es falsch ist oben ausgeben lassen. Also über dem Input feld.

    Wenn es richtig ist soll da stehen das es erfolgreich war( in der titel leiste des modals) das login wird ausgegraut und der button wird von login zu schließen.

    nachdem ich auf schließen gedrückt habe. soll es sich schließen und die seite im hintergrund neuladen damit die $_Session variabeln berücksichtigt.


    Hier mal mein Code dazu:

    Im Login.php befindet sich ausschließlich das modal.
    Code:
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    	<div class="container-fluid">
    		<div class="navbar-header">
    			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
    				<span class="sr-only">Navigation ein-/ausblenden</span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
    			<a class="navbar-brand" href="<?php echo $_SERVER['REQUEST_URI']; ?>">Miyava</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" data-toggle="modal" data-target="#myModal">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div style="margin-top:50px;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">
    
    			<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    				<h4 class="modal-title" id="myModalLabel">Einloggen</h4>
    			</div> <!-- /.modal-header -->
                            <form role="form" method="POST">
                                <div class="modal-body">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input style="margin-top:1px;" name="name" type="text" class="form-control" id="uLogin" placeholder="E-Mail">
                                            <label for="uLogin" class="input-group-addon glyphicon glyphicon-user"></label>
                                        </div>
                                    </div> <!-- /.form-group -->
    
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input style="margin-top:1px;" name="paddword" type="password" class="form-control" placeholder="Passwort">
                                            <span  class="input-group-addon glyphicon glyphicon-lock"></span>          
                                        </div> <!-- /.input-group -->
                                    </div> <!-- /.form-group -->
    
                                    <!--<div class="checkbox">
                                        <label>
                                            <input type="checkbox"> Eingeloggt bleiben
                                        </label>
                                    </div> <!-- /.checkbox -->
                                </div> <!-- /.modal-body -->
    
                                <div class="modal-footer">
    				<input type="submit" Name="login" class="form-control btn btn-primary" value="Login">
    
    				<div class="progress">
                                        <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="100" style="width: 0%;">
                                            <span class="sr-only">progress</span>
                                        </div>
    				</div>
                                </div> <!-- /.modal-footer -->
                            </form>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    in der Javascript datei login.js befindet sich der Ajax teil.
    Code:
    $(document).submit(function(){
        var result = $("#login").load("check.php");
        if(result == 'ok'){
            $('.modal-footer button').click(function(){
    		var button = $(this);
    
    		if ( button.attr("data-dismiss") != "modal" ){
    			var inputs = $('form input');
    			var title = $('.modal-title');
    			var progress = $('.progress');
    			var progressBar = $('.progress-bar');
    
    			inputs.attr("disabled", "disabled");
    
    			button.hide();
    
    			progress.show();
    
    			progressBar.animate({width : "100%"}, 100);
    
    			progress.delay(1000)
    					.fadeOut(600);
    
    			button.text("Schließen")
    					.removeClass("btn-primary")
    					.addClass("btn-success")
        				.blur()
    					.delay(1600)
    					.fadeIn(function(){
    						title.text("Erfolgreich eingeloggt");
    						button.attr("data-dismiss", "modal");
    					});
    		}
    	});
        }else {
        $('#myModal').on('hidden.bs.modal', function (e) {
    		var inputs = $('form input');
    		var title = $('.modal-title');
    		var progressBar = $('.progress-bar');
    		var button = $('.modal-footer button');
    
    		inputs.removeAttr("disabled");
    
    		title.text("Einloggen");
    
    		progressBar.css({ "width" : "0%" });
    
    		button.removeClass("btn-success")
    				.addClass("btn-primary")
    				.text("Login")
    				.removeAttr("data-dismiss");
                    
    	});
        }
    });

    es soll die check.php aufgerufen werden, in der mit hilfe einer Datenbank überprüft werden soll ob ein login zustande kam oder nicht.

    Da es noch überhaupt nicht geht ein code um nur die rückgabe zu testen:
    PHP-Code:
    <?php

    if (isset($_POST['login'])) {
            if(isset(
    $_REQUEST['password']) && isset($_REQUEST['name'])){
                
    $password $_REQUEST['password'];
                
    $name $_REQUEST['name'];
                return 
    'ok';
            } else {
                
    $error "Email oder Passwort waren nicht richtig.";
                return 
    $error;
            }
        }

    ?>


    Soo... könnt ihr mir auf die Sprünge helfen, wo ich den Fehler gemacht habe? Ich habe jetzt eigentlich erwartet das ich irgendwas zurück bekomme, aber das modal schließt sich direkt.


  • #2
    Hallo Damlo

    Bei einem Submit ladet die Seite neu. Darum schliesst sich eventuell auch dein Overlay.
    Google mal nach:
    PHP-Code:
    event.preventDefault(); 

    Kommentar


    • #3
      Zitat von antic_schweiz Beitrag anzeigen
      Hallo Damlo

      Bei einem Submit ladet die Seite neu. Darum schliesst sich eventuell auch dein Overlay.
      Google mal nach:
      PHP-Code:
      event.preventDefault(); 
      Danke!!!

      jetzt habe ich das Problem, wenn ich auf login drücke, das meine PHP variable nicht übergeben wird. Bzw das diese nicht ausgeben wird.

      mein Javascript
      Code:
      $( "button" ).click(function( event ) {
          event.preventDefault();
          var result = $("#login").load("check.php");
          $( "<div>" )
          .append( "test: " + result )
          .appendTo( "#log" );
      });
      meine check.php
      PHP-Code:
      <?php
      echo "asd";?>

      ich möchte jetzt, wenn ich auf Login drücke das dort "test: asd" erscheint. aber irgendwo ist da noch ein Fehler.

      bin mir auch nicht sicher ob das genau so funktioniert. Bräuchte da noch mal einen Denk anstoß oder so

      wenn ihr meine veränderte HTML Login Seite sehen wollt, könnt ihr gerne bescheid geben. dann Poste ich sie.

      Kommentar

      Lädt...
      X