динамическая загрузка модулей содержимого с помощью jquery - PullRequest
Новая
       3

динамическая загрузка модулей содержимого с помощью jquery

0 голосов
/ 15 февраля 2012

Обновление:

Я все заработал, вот новый javascript: $ (document) .ready (function () {

$('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. Спасибо за вашу помощь!

Исходное сообщение:

Я пытаюсь научить себя, как лучше использовать 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, в котором написано «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
        });
    });

Часть, в которой скрипт разбивается, имеетКонечно, часть, которую я только учусь использовать - запрос AJAX, чтобы загрузить конпалатку из одного div на другой странице и поместите его в правильный div на текущей странице.

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

Ответы [ 2 ]

0 голосов
/ 15 февраля 2012

Это должно дать вам представление. 

 $(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>
0 голосов
/ 15 февраля 2012

Вы неправильно указали свой контент: 

$(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
    });
});
...