Ajax Anfrage funktioniert nicht, wenn innerhalb Bootstrap aufgerufen Navbar

So lerne ich JS/Ajax und ich wollte versuchen, HTML-Inhalt in meine Seite mit einem Klick auf eine Schaltfläche laden. Alles funktioniert so lange ich die Funktion außerhalb meiner Navbar anrufe und ich kann nicht herausfinden warum?Ajax Anfrage funktioniert nicht, wenn innerhalb Bootstrap aufgerufen Navbar

Ich versuche HTML-Inhalt von "bestellung.html" in ein div mit der ID von "main-well" zu laden. Alles funktioniert einwandfrei, außer wenn ich die Funktion ladeBestellung() aus meiner Navbar heraus aufrufen möchte ... der Inhalt wird geladen, aber wird sofort überschrieben und verschwindet ... warum ??

<!DOCTYPE html> 
<html lang="de"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>QR2BUY Bestellübersicht</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <!-- Eigene Styles --> 
    <link href="css/styles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 

    </head> 
    <body> 
    <div class="container"><!-- Haupt-Container --> 
     <!-- Haupt-Navigationsleiste --> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"><!-- Anfang Navigationsleiste-Header --> 
        <!-- Button für die mobile Ansicht --> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Navigation aufklappen</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#"> 
         <span class="glyphicon glyphicon-qrcode"></span> QR2BUY 
        </a> 
       </div><!-- Ende Navigationsleiste-Header --> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right">       
         <li><a href="#">Hilfe</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Konto <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Einstellungen</a></li> 
           <li><a href="#">Bestellhistorie</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="index.html">Logout</a></li> 
          </ul> 
         </li> 
        </ul> 
        <form class="navbar-form navbar-right"><!-- Anfang Suchfeld --> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Bestell-Nr. eingeben..."> 
          <div class="input-group-btn"> 
           <button class="btn btn-default" onClick="ladeBestellung()"><i class="glyphicon glyphicon-search"></i></button> 
          </div> 
         </div>       
        </form><!-- Ende Suchfeld -->     
       </div> 
      </div> 
     </nav><!-- Ende Haupt-Navigationsleiste --> 

     <div class="row"><!-- Start Main-Row --> 
      <div class="col-xs-12"><!-- Start Main Col --> 
       <div class="well" id="main-well"> 

       </div><!-- Ende Well --> 
      </div><!-- Ende Main-Col --> 

     </div><!-- Ende Main-Row --> 




    </div><!-- Ende Haupt-Container --> 


    <footer class="footer"><!-- Anfang Footer --> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <p class="text-center"> 
         <span>&copy; 2016 QR2BUY</span> - <a href="#">Impressum</a> - <a href="#">Kontakt</a> 
         <p> 
         </div> 
        </div> 
       </div><!-- Ende Haupt-Container --> 

      </footer><!-- Ende Footer --> 


      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
      <!-- Include all compiled plugins (below), or include individual files as needed --> 
      <script src="js/bootstrap.min.js"></script> 
      <script> 
       var xhr = new XMLHttpRequest(); 
       xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4) { 
         document.getElementById('main-well').innerHTML = xhr.responseText; 
        } 
       }; 
       xhr.open('GET', 'bestellung.html'); 
       function ladeBestellung() { 
        xhr.send(); 
       } 
      </script> 
     </body> 
     </html>

Quelle

2016-10-13 Tim

Ist Ihre Seite Nachladen verwenden, wenn Sie auf diese Schaltfläche klicken? – jmargolisvt

Ihr Formular wird gesendet, wenn Sie auf die Schaltfläche klicken. Sie müssen das Attribut type = "button" zuweisen, um zu vermeiden, dass es sonst "submit" ist - überprüfen Sie diese Antwort - http://stackoverflow.com/questions/3314989/can-i-make-a-button- not-submit-a-form –

Verdammt .. das ist genau das Problem .. scheint jetzt so offensichtlich, aber ich hätte nicht gedacht, danke! – Tim

Standardtyp <button> ist „Eintragen“, die die Seite neu geladen und überschreibt die Javascript-generierten HTML - so ist die Lösung <button type="button"></button>

Quelle

2016-10-13 21:16:40 Tim

Ajax Anfrage funktioniert nicht, wenn innerhalb Bootstrap aufgerufen Navbar

Antwort

Verwandte Themen