За последние 24 часа нас посетили 17774 программиста и 1686 роботов. Сейчас ищут 920 программистов ...

Как сделать чтобы страница не двигалась

Тема в разделе "JavaScript и AJAX", создана пользователем sound, 19 авг 2014.

  1. sound

    sound Guest

    Есть загрузка jquery функции по ссылке

    Код (Text):
    1. echo "<a href='#' onclick='detali($id)'>Детали >>></a> ";
    Код (Text):
    1. function  detali(id_dna){
    2.     $('.detali'+id_dna).load('dnevnik_dop.php');
    3. }
    при нажатии на ссылку загружается куча всякой информации, которая не помещается на страницу и в результате страница проматывается до самого верха, как сделать чтобы при нажатии на ссылку ничего не проматывалась и положение ссылки на которую идет нажатие было такое же
     
  2. dapperkop

    dapperkop Активный пользователь

    С нами с:
    26 сен 2013
    Сообщения:
    890
    Симпатии:
    0
    Страница прокручивается не потому что много данных, а потому что ты жмакаешь на ссылку с якорем... Либо вообще убери href="#", либо отмени действие по-умолчанию: event.preventDefault();
     
  3. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Ничего и никуда прокручиваться не должно, если вы сами не сделали прокрутку вверх страницы.
    1. Во-первых, убираем из html всякого рода onclick и т.д. Если используете jQuery, то пользуемся методами, которые выполняют обработку событий.
    Код (Text):
    1.  
    2. $('selector').on('event', function(){
    3.     // чего-то делаем
    4. });
    Где "selector" - это, как ни странно, селектор элемента, а "event" - событие (ваш К.О.). Если же на чистом JS, то addEventListener.
    2. Если в качестве кнопки используете элемент <a>, то нужно отменять обычное действие по клику на эту кнопку: или preventDefault(), или return false.
    Исходя из всего вышесказанного, ваш код должен быть такого рода:
    Код (PHP):
    1. echo '[url="" class="]>[/url]'; 
    jQuery
    Код (Text):
    1. $(function(){
    2.     $('.my_link').on('click', function(e){
    3.         e.preventDefault();
    4.         var id_dna = $(this).data('id');
    5.         $('.detali'+id_dna).load('dnevnik_dop.php');
    6.     });
    7. });
     
  4. sound

    sound Guest

    Пока не разобрался

    dapperkop
    Если убрать # из ссылки то ничего не работает
    вставляю event.preventDefault(); в javascript функцию, она перестает работать

    Deonis
    А можно пример на чистом javascript с addEventListener ?

    у меня по ссылке в функции onclik передаются два параметра из PHP и я непойму как их вставить в ваш пример на jQuery
    Код (Text):
    1. echo "<a href='#' onclick='detali($id_dna, $i)'>Детали >>></a> ";
     
  5. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    sound, можно. Переходите по этой ссылке, для запуска нажимаете Run или F9.
    Да хоть 33. Можно создать несколько data-* атрибутов или же все параметры разместить в одном с разделителем (в примере так и сделал для наглядности).

    P.S. Кстати, если всё-таки решите писать на чистом JS, то можете почитать эту статью. Там достаточно подробно описано.
     
  6. dapperkop

    dapperkop Активный пользователь

    С нами с:
    26 сен 2013
    Сообщения:
    890
    Симпатии:
    0
    Мдя, нужно не # убрать, а href="#"... Если убрать #, то страница перезагружаться будет...
     
  7. sound

    sound Guest

    Deonis
    dapperkop

    Спасибо, остановился на самом простом способе удалил href и создал css стиль для линка, все заработало как я и хотел.