Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Изменение контента без обновления страницы. 
V
    Опции темы
KsyuZ
Дата 19.7.2012, 16:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 19.7.2012

Репутация: нет
Всего: нет



Здравствуйте! помогите мне пожалуйста решить проблему: есть html страница fon.html мне хотелось бы, чтобы при нажатии на ссылки "запуск программы" и "справка по вопросам" изменялся ее контент. Я пробовала использовать ajax и yui, получился такой код:
Код

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <title>Анализ детализации телефонных соединений</title>
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
       <LINK href="style.css" type=text/css rel=stylesheet>
</head>
<body>
        <h2> Анализ детализации телефонных соединений </h2>
        <table border="0" cellspacing="0" cellpadding="0" width="1000" align="center" height="225" id="table3">
          <tr>
              <td width= 200 height=310>
                 <div id="box1">
                  <a href="fon.html"><img   src="contact.png" border="0"> </a>
                 </div>
                 <div id="box2">
                  <a  href="fon.html?id=fon2" title="fon2"><img  alt="Запуск" src="rabota.png" border="0"> <span class="letter"> Запуск программы </span> </a>
                 </div>
                 <div id="box3">
                  <a  href="fon.html?id=fon3" title="fon3"><img  alt="Вопросы" src="vopros.png" border="0"> <span class="letter"> Справка по вопросам </span> </a>
                 </div>
             </td>
             <td  height=310 >


                 <div id='info'> Это предложение будет заменено </div>
                 <script src="yahoo-min.js"></script>
                 <script src="event-min.js"></script>
                 <script src="connection-min.js"></script>
                <script>
url = "fon3.html"
callback = { success:successHandler, failure:failureHandler }
request = YAHOO.util.Connect.asyncRequest('GET',
    'urlget.php?url=' + url, callback)

function successHandler(o) {
    document.getElementById('info').innerHTML = o.responseText
}

function failureHandler(o) {
    document.getElementById('info').innerHTML =
        o.status + " " + o.statusText
}
                                 </script>
  
            </td>
       </tr>
       <tr>
            <td wight=200 height=310></td>
            <td  >
            </td>
       </tr>
</body>
</html>



и php код:
Код

<?php // urlget.php
if (isset($_GET['url'])) {

    echo file_get_contents("http://test1.ru/".sanitizeString($_GET['url']));
}

function sanitizeString($var) {
    $var = strip_tags($var);
    $var = htmlentities($var);
    return stripslashes($var);
}
?>

Как сделать так, чтобы при нажатии на ссылку, java скрипту была передана переменная url? чтобы при нажатии на ссылку загружался для отображения  нужный html файл. 
PM MAIL   Вверх
Aliance
Дата 19.7.2012, 17:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Я не очень понял, что у вас за вопрос. Но как я понимаю, вам нужно повесить на ссылку событие onclick и туда функцию, которая будет брать url ссылки и его ajax-ом слать на сервер?
PM MAIL WWW ICQ Skype   Вверх
KsyuZ
Дата 19.7.2012, 18:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 19.7.2012

Репутация: нет
Всего: нет



да, я думаю нужно это. не могу разобраться как переменной url из кода  
Код

url = "fon3.html"
callback = { success:successHandler, failure:failureHandler }
request = YAHOO.util.Connect.asyncRequest('GET',
        'urlget.php?url=' + url, callback)

передавать значения, например fon3.html при нажатии на 1 ссылку, fon2.html при нажатии на 2 ссылку,чтоб в месте "это предложение будет заменено" отображалось содержимое этих страничек.
Подскажите пожалуйста как это осуществить?

Это сообщение отредактировал(а) Aliance - 20.7.2012, 08:55
PM MAIL   Вверх
Aliance
Дата 20.7.2012, 09:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Пойдем по порядку, что в коде не верно/хотелось бы исправить:
  • Переменные должны быть объявлены через ключевое слово var. Без него идет объявление глобальных переменных внутри локальной области видимости. В данном коде этого не нужно -> объявляем через var.
  • Не забываем после каждого синтаксически законченного предложения ставить точку с запятой (;).
  • Если идет обращение к одному и тому же элементу в дереве DOM, есть смысл завести под него переменную и обращаться к ней. Тогда она будет вычисляться только один раз, а не при каждом обращении.
  • Все действия мы должны выполнять после загрузки страницы, а не по факту загрузки скрипта. Так что используем конструкцию
    Код

    window.onload = function() {
        // ...
    }
  • Нам нужно на каждую ссылку (/на каждый элемент с определенный классом/на каждую ссылку по ID) повесить обработчик события клика для предотвращения дефолтного поведения браузера (перехода по ссылке) и выполнения нашего произвольного кода. Подробнее о событиях можно почитать здесь. Вот пример:
    Код

        // получаем коллекцию всех тегов <a>
        var links = document.getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
            // вешаем обработчик события на клик по ссылке
            links[i].onclick = function(evt) {
                // получаем ссылку на событие
                evt = evt ? evt : ((window.event) ? event : null);
                // блокируем поведение браузера по умолчанию
                // (для ссылки это переход по ней)
                if (evt) {
                    if (evt.preventDefault) {
                        evt.preventDefault();
                    } else {
                        evt.returnValue = false;
                    }
                }
            };
        }
  • Дальше мы получаем у ссылки атрибут href и используем его в качестве переменной url

Вот что получилось:
Код

<a href="fon2.html">Запуск программы</a>
<div id='info'>Это предложение будет заменено</div>​

Код

window.onload = function() {
    // кешируем контейнер в переменную (см. п. 3)
    var info_container = document.getElementById('info');

    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function(evt) {
            // получаем ссылку на событие
            evt = evt ? evt : ((window.event) ? event : null);
            // блокируем поведение браузера по умолчанию
            // (для ссылки это переход по ней)
            if (evt) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }
            }
            // получаем нужный нам url из соотв. атрибута ссылки
            var url = this.getAttribute('href');
            
            var options = {
                success: function(o) {
                    info_container.innerHTML = o.responseText;
                },
                failure: function(o) {
                    info_container.innerHTML = o.status + " " + o.statusText;
                }
            };
            
            var request = YAHOO.util.Connect.asyncRequest('GET',
                                                          'urlget.php?url=' + url,
                                                          options);
        };
    }
}

PM MAIL WWW ICQ Skype   Вверх
KsyuZ
  Дата 20.7.2012, 15:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 19.7.2012

Репутация: нет
Всего: нет



Aliance,  большое спасибо вам,что помогли и все так подробно объяснили! Этот язык я знаю очень поверхностно, но хочу в нем разобраться.Ну а пока что вот такие тяпы ляпы получаются.
PM MAIL   Вверх
Aliance
Дата 20.7.2012, 16:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Не за что. Еще советую html проверять в w3c validator, у вас там было не мало косяков.
PM MAIL WWW ICQ Skype   Вверх
KsyuZ
Дата 21.7.2012, 20:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 19.7.2012

Репутация: нет
Всего: нет



К сожалению сейчас заметила,что код не работает. получается, что просто вместо страницы fon.html загружается fon2.html.. а не меняется контент
PM MAIL   Вверх
Aliance
Дата 25.7.2012, 09:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



KsyuZ, полный код в студию!
PM MAIL WWW ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0548 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.