Zmiana zawartości div za pomocą jquery z inną zawartością pliku html

Question

Na początek spędziłem kilka ostatnich godzin przeglądając stackoverflow na tematach pokrewnych. Wiele z nich wydawało się bardzo podobnych do problemu, jaki miałem, nawet para, która prawie idealnie przypominała moją. Jednak poprawki, które działały dla nich, nie działają dla mnie. Myślę, że najlepiej byłoby, gdybym opublikował mój kod i aby inni go obejrzeli; Postaram się być jak najbardziej szczegółowy.

Co próbuję zrobić: Mam konfigurację strony z łączami wewnątrz li, a po jej kliknięciu ma ona ściągać zawartość html z innej strony, którą zrobiłem. Mówiąc dokładniej, ma ona na celu wyciągnięcie treści html z określonego identyfikatora div na tej stronie. Mam problem z wyciągnięciem czegokolwiek z tego i umieszczeniem go na stronie głównej div.

Moja rola HTML z menu nawigacji:

<ul id="nav_main"> 
    <li class="navLink">link here</li> 
</ul> 

div, który ma zmienić dynamicznie (na kliknięcie) jest oznaczony jako to:

<div id="main_content"> 
    <p></p> 
</div> 

The inny plik .html, że pull data from ma element div, który wygląda następująco:

<div id="one">blahbalhblahblahlbhalbhlah</div> 

Część, którą mam problemy z i s kod javascript. Próbowałem używać load i get, a żaden z nich nie działa. Oto mój kod szkielet:

$(document).ready(function(){ 
    $("#nav_main li").on("click", function() { 
     // here was my first attempt: 
     $("#main_content p").load("contentholder.html #one"); 

     // my second attempt, using get(): 
     $.get("contentholder.html", function(data) { 
      $("#main_content p").html(data) 
     }); 
}); 

Mój problem polega na tym, że #main_content nie wydaje się zmieniać. Myślę, że problem polega na tym, że obciążenia i próby pobierania nie działają, nie wydają się wyciągać danych tak, jak powinny.

Wszystkie te pliki znajdują się na dysku lokalnym. Każda pomoc będzie mile widziana

Answer 1

Oprócz swoich błędów składniowych podkreślił Brad M, należy pamiętać, że większość przeglądarek zapobiec wzywa AJAX, jeśli nie są one wykonane z serwer, więc jeśli nie uruchamiasz localhost, najprawdopodobniej podczas wywoływania AJAX uzyskasz błąd Access-Control-Allow-Origin.

Zobacz więcej informacji tutaj: Get HTML code of a local HTML file in Javascript

Answer 2

$(document).ready(function(){ 
    // your code here 
}); 

brakuje na function(){