модули контента загрузки динамически с JQuery

Question

Update:

я получил эту работу, вот новый JavaScript: $ (документ) .ready (функция() {

$('a').click(function(e) { 
    $v = $(this).attr("class"); 
    $targetID = ' #' + $v; 
    $path = $(this).attr('href') + $targetID; 
     $('#' + $v).load($path); 
    e.preventDefault();  
}); 

Что случилось что я не понимал, что $ path уже учитывал то, что я искал, # CLASS-NAME. У меня было настроено на поиск # class-name внутри # class-name. Спасибо за вашу помощь!

Original Post:

Я пытаюсь научить себя, как лучше использовать ajax с помощью jQuery, поэтому я обновляю свое портфолио для динамического обновления контента. Этот тест упрощает процесс, но в этом случае у меня есть 3 HTML страницы:

home.php 
    about.php 
    contact.php 

с одинаковой разметкой, но только соответствующие DIV, содержащее содержание:

<div id="links"> 
     <a href="../ajax/home.php" class="home">Home</a> 
     <a href="../ajax/about.php" class="about">about</a> 
     <a href="../ajax/contact.php" class="contact">contact</a> 
    </div> 

    <div id="content"> 
     <div id="home"> 
      <p>Home</p> 
     </div> 
     <div id="about"> 
     </div> 
     <div id="contact"> 
     </div> 
    </div> 

Так home.php содержит параграф #home, который говорит «дом». Попытка держать его простым и скучным.

Вот Javascript участвует:

$(document).ready(function() { 
     $('a').click(function(e) { 
      $v = $(this).attr("class"); //pulls the name of the associated link 
      $targetID = ' #' + $v; 
      $path = $(this).attr('href') + $targetID; //generates the path that ajax is loading: "../folder/FILE-NAME/.php #DIV-NAME" 
      if ($('#', $v).text() == '') { //Checks whether content exists in that div already  
       $('#', $v).load($path + ' ' + $targetID); //Is SUPPOSED to pull content from the div on one page into its corresponding div on the current page - This is where the script is breaking 
      } 
      else { 
       alert($v + " isn't empty!"); 
      } 
      e.preventDefault(); //prevents normal link behavior 
     }); 
    }); 

часть, где сценарий разрушения, конечно, часть я просто научиться использовать - Аякса запрос для загрузки содержимого из одного DIV на другой и помещаем его в правый div на текущей странице.

Может кто-нибудь указать на мою ошибку?

Answer 1

Вы выбираете ваши дивы содержание неправильно:

$(document).ready(function() { 
    $('a').click(function(e) { 
     $v = $(this).attr("class"); //pulls the name of the associated link 
     $targetID = ' #' + $v; 
     $path = $(this).attr('href') + $targetID; //generates the path that ajax is loading: "../folder/FILE-NAME/.php #DIV-NAME" 
     if ($('#' + $v).text() == '') { //Checks whether content exists in that div already  
      $('#' + $v).load($path + ' ' + $targetID); //Is SUPPOSED to pull content from the div on one page into its corresponding div on the current page - This is where the script is breaking 
     } 
     else { 
      alert($v + " isn't empty!"); 
     } 
     e.preventDefault(); //prevents normal link behavior 
    }); 
}); 

Answer 2

Это должно дать вам идею.

$(document).ready(function() { 

     $('a').click(function(e) { 
      $v = $(this).attr("class"); //pulls the name of the associated link 
      $targetID = ' #' + $v; 
      $path = $(this).attr('href') + $targetID; //generates the path that ajax is loading: "../folder/FILE-NAME/.php #DIV-NAME" 
      if ($($targetID).text() == '') { //Checks whether content exists in that div already  
       //var content = $($targetID).load($path + ' ' + $targetID); //Is SUPPOSED to pull content from the div on one page into its corresponding div on the current page - This is where the script is breaking 
       //alert(content); 
       $.post($path, function(data) { 
        $($targetID).html(data); 
       }); 
      } else { 
       alert($v + " isn't empty!"); 
      } 
      e.preventDefault(); //prevents normal link behavior 
     }); 
    }); 

HTML-:

<div id="links"> 
     <a href="../ajax/home.php" class="home">Home</a> 
     <a href="../ajax/about.php" class="about">about</a> 
     <a href="../ajax/contact.php" class="contact">contact</a> 
    </div> 

    <div id="content"> 
    <div id="home"> 
     <p>Home</p></div> 
     <div id="about"></div> 
     <div id="contact"></div> 
    </div>