Ergebnis 1 bis 4 von 4
  1. #1
    mw210 ist offline Grünschnabel
    registriert
    12-09-2015
    Beiträge
    2

    Ajax in Bootstrap funktioniert nicht?

    Hallo zusammen!
    Ich möchte mit AJAX HTML-Inhalte laden.
    Mein Problem ist aber das er stattdessen auf die verlinkte Seite springt.
    Ich dachte das würde ich mit preventDefault verhindern?
    Wäre super wenn mir jemand helfen könnte!

    HTML-Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Name Der Seite</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/mein.css">
      </head>
      <body>
        <nav class="navbar navbar-toggleable-md">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"></button>
          <div class="collapse navbar-collapse" id="navbarToggler">
            <a class="navbar-brand" href="html/startseite.html">Startseite</a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item">
                  <a class="nav-link" href="html/zweiterInhalt.html">link1</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">link2</a>
              </li>
            </ul>
          </div>
        </nav>
         
        <section id="cover">
            <div id="titelzeile">
                <div class="container">
                    <div class="col-sm-12" class="inhalt">
                        
                    </div>
                </div>
            </div>
        </section>
    
       
          <script src="js/jquery-3.2.1.min.js"></script>
          <script src="js/bootstrap.min.js"></script>
          
          <script>
            $(".navbar a").on("click", function(e) {
              e.preventDefault();
              var url = $(this).attr("href");
              $(".inhalt").load(url);
            });    
          </script> 
      </body>
    </html>

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

    AW: Ajax in Bootstrap funktioniert nicht?

    warum benutzt du das a tag, wenn es kein solches sein soll?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: Ajax in Bootstrap funktioniert nicht?

    Eigentlich sollte das mit .preventDefault() funktionieren. Steht ev. etwas in der Fehlerkonsole (Wo finde ich die Fehlerkonsole?)? Hast du einen Testlink, auf dem wir uns das ansehen können?

  4. #4
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: Ajax in Bootstrap funktioniert nicht?

    Ist JQuery erfolgreich eingebunden worden? Gibt es die Datei js/jquery-3.2.1.min.js (aus <script src="js/jquery-3.2.1.min.js"></script>)?
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 18-07-2014, 00:44
  2. AJAX Upload funktioniert nicht ?
    Von mikefried im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 18-02-2010, 16:42
  3. JS/Ajax:getAllResponseHeaders funktioniert nicht
    Von scavenger im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 26-02-2009, 12:33
  4. Ajax-Script funktioniert im IE nicht...
    Von handschigl im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 02-10-2008, 19:13
  5. Ajax funktioniert nicht
    Von cyberkuh im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 06-01-2008, 13:23

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •