1

Тема: Не можу добратись до елемента з тегом div та відповідним класом

Привіт усім!
Є система переписки на php + mySql + jQuery
Проблема ось у чому:
Потрібно реалізувати опрацювання клацу мишки по коментарі, по видаленню(хрестику) і т.д.
Коментарі знаходяться у такій ієрархії:

<div class="form_field_center" id="message_list">
    <div id="newComment"></div>
    <div id="comment_list">
          // Повідомлення читаються з бази даних і розміщаються тут
        </div>
</div>

Повідомлення читаються з бази даних у файлі get_message_list.рhp і повертаються за допомогою функції на AJAX

foreach($comments as $c)
    echo $c->markup_read();
$('#comment_list').append(html);

У свою чергу, існує клас повідомлень з методом markup_read, що повертає HTML розмітку повідомлення з відповідними класами.

public function markup_read(){
        $this->data['date_time'] = strtotime($this->data['date_time']);
        
        return '<div class="comment" id='.$this->data['id'].'>
                        <div class="avatar"></div>
                        <div class="delete" id='.$this->data['id'].'></div>
                        <div class="edit"     id='.$this->data['id'].'></div>
                        <div class="author">'.$this->data['author'].' &#5125; '.$this->data['recipient'].'</div>
                        <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
                        <p>'.$this->data['message'].'</p>
                        <div>'.$this->data['id'].'</div>
                        </div>';
    }

Потрібно реалізувати обробку клац по розмітці повідомлення - тобто по класу comment, delete, edit ...
Як дістатися до класу comment? Допоможіть, будь ласка. Дякую.


Ось як виглядають два повідомлення при перевірці елементів:
https://dl.dropboxusercontent.com/u/93079663/1.png
Ось html рядок цих повідомлень:
https://dl.dropboxusercontent.com/u/93079663/2.png
Однак при перегляді джерела сторінки спостерігаю наступне:
https://dl.dropboxusercontent.com/u/93079663/3.png

2 Востаннє редагувалося Пам'ять не може бути READ (20.05.2013 16:23:32)

Re: Не можу добратись до елемента з тегом div та відповідним класом

Як дістатися до класу comment?

Якщо я правильно зрозумів, то так:

$(".comment")

Однак при перегляді джерела сторінки спостерігаю наступне

Все вірно, коли дані підвантажуються через ajax і змінюються через js, то для вас, у вихідному коді сторінки нічого не зміниться. Для перегляду змін юзайте FireBug.

3

Re: Не можу добратись до елемента з тегом div та відповідним класом

$(".comment")


отак правильно ;) якщо нічого не плутаю.
Тобто крапка а поітм назва класу

http://api.jquery.com/category/selector … selectors/

4

Re: Не можу добратись до елемента з тегом div та відповідним класом

funivan написав:
$(".comment")


отак правильно ;) якщо нічого не плутаю.
Тобто крапка а поітм назва класу

http://api.jquery.com/category/selector … selectors/

Це працювало тоді, коли повідомлення відтворювалось не зі jQuery, а зі сторінки php, де вони і відтворювались.
Найнижча ланка, яка доступна при натиску на полі з повідомленнями - comment_list =(
$('.comment') не працює

5

Re: Не можу добратись до елемента з тегом div та відповідним класом

Може їх якось розділити (повідомлення) та додати клас вручну?=( Підкажіть, будь ласка.

6 Востаннє редагувалося koala (20.05.2013 16:17:55)

Re: Не можу добратись до елемента з тегом div та відповідним класом

rozmath написав:
 return '<div class="comment" id='.$this->data['id'].'>
<div class="avatar"></div>
<div class="delete" id='.$this->data['id'].'></div>
<div class="edit" id='.$this->data['id'].'></div>

Я правильно зрозумів, що в тегів div class="comment", div class="delete" і т.д. однаковий id? Тоді це не HTML-документ(в HTML id має бути унікальним на сторінці), відповідно, JavaScript працюватиме бозна-як.

7

Re: Не можу добратись до елемента з тегом div та відповідним класом

Так, ID одинаковий для елементів одного повідомлення. Ці теги відрізняються змістом і класом. Це було зроблено для того, щоб можна було проводити маніпуляції з записами у базі.
Все працювало правильно, поки не перейшов на AJAX =(

8

Re: Не можу добратись до елемента з тегом div та відповідним класом

Потрібно реалізувати обробку клац по розмітці повідомлення - тобто по класу comment, delete, edit ...
Як дістатися до класу comment? Допоможіть, будь ласка. Дякую.

Ну і пишіть щось типу такого:

jQuery(document).ready(function(){
    // замість comment будь-яке ім’я класу
    jQuery('.comment').click(function(){
        //який небудь код
       alert(this.className)
    })
})

9

Re: Не можу добратись до елемента з тегом div та відповідним класом

Прихований текст

Так, ID одинаковий для елементів одного повідомлення. Ці теги відрізняються змістом і класом. Це було зроблено для того, щоб можна було проводити маніпуляції з записами у базі.

Може краще для цих цілей використовувати атрибут name? Або додавати до атрибуту id певний префікс перед числом, наприклад

<div id="delete_50"

? Але потім доведеьтся додатково опрацьовувати атрибут.

10

Re: Не можу добратись до елемента з тегом div та відповідним класом

Щойно побачив що у клас то скрізь однкаовий. Для того щоб відрізняти де саме клацнули можна скористатися атрибутом id.

            jQuery(document).ready(function(){
                jQuery('.comment').click(function(){
                    alert(this.id);
                });
            });

11

Re: Не можу добратись до елемента з тегом div та відповідним класом

Ну не бачить обробник подій клас "comment". Найостаннійший предок тегу div - comment_list. У ньому так якби нічого і немає. Максимум до чого я зміг підійти - це у пості зазначені результати і вигляді скрін-шотів.
Тобто html тих двох повідомлень є, визначив МАКСИМАЛЬНИЙ id цих повідомлень. Як знайти id натиснутого?

12

Re: Не можу добратись до елемента з тегом div та відповідним класом

rozmath написав:

Так, ID одинаковий для елементів одного повідомлення. Ці теги відрізняються змістом і класом. Це було зроблено для того, щоб можна було проводити маніпуляції з записами у базі.
Все працювало правильно, поки не перейшов на AJAX =(

Я ж сказав: працювало бозна-як. Може, випадково й правильно. Але так не має бути. Для неунікальних індентифікаторів є name.

13

Re: Не можу добратись до елемента з тегом div та відповідним класом

Invader написав:

Щойно побачив що у клас то скрізь однкаовий. Для того щоб відрізняти де саме клацнули можна скористатися атрибутом id.

            jQuery(document).ready(function(){
                jQuery('.comment').click(function(){
                    alert(this.id);
                });
            });

Це працювало тоді, коли повідомлення відображались при перегляді джерела сторінки. Тепер їх там не видно.

14 Востаннє редагувалося rozmath (20.05.2013 17:14:44)

Re: Не можу добратись до елемента з тегом div та відповідним класом

koala написав:
rozmath написав:

Так, ID одинаковий для елементів одного повідомлення. Ці теги відрізняються змістом і класом. Це було зроблено для того, щоб можна було проводити маніпуляції з записами у базі.
Все працювало правильно, поки не перейшов на AJAX =(

Я ж сказав: працювало бозна-як. Може, випадково й правильно. Але так не має бути. Для неунікальних індентифікаторів є name.


Тобто замінити id на name ось так?

public function markup_read(){
$this->data['date_time'] = strtotime($this->data['date_time']);
        
return '<div class="comment" id='.$this->data['id'].'>
    <div class="avatar"></div>
    <div class="delete" name="delete_"'.$this->data['id'].'></div>
    <div class="edit" name="edit_"'.$this->data['id'].'></div>
    <div class="author">'.$this->data['author'].' &#5125; '.$this->data['recipient'].'</div>
    <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
    <p>'.$this->data['message'].'</p>
    <div>'.$this->data['id'].'</div>
    </div>';
}

А далі бути як?

15

Re: Не можу добратись до елемента з тегом div та відповідним класом

Що таке максимальний id? Найбільший серед усіх? І який в цьому смисл?

Як знайти id натиснутого?

Можна ще так: якщо це

return '<div class="comment" id='.$this->data['id'].'>
                        <div class="avatar"></div>
                        <div class="delete" id='.$this->data['id'].'></div>
                        <div class="edit"     id='.$this->data['id'].'></div>
                        <div class="author">'.$this->data['author'].' &#5125; '.$this->data['recipient'].'</div>
                        <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
                        <p>'.$this->data['message'].'</p>
                        <div>'.$this->data['id'].'</div>
                        </div>';

HTML який приєднується до сторінки, то тоді

return '<div class="comment"  onclick="alert(this.id);"id='.$this->data['id'].'>
                        <div class="avatar"></div>
                        <div class="delete" id='.$this->data['id'].'></div>
                        <div class="edit"     id='.$this->data['id'].'></div>
                        <div class="author">'.$this->data['author'].' &#5125; '.$this->data['recipient'].'</div>
                        <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
                        <p>'.$this->data['message'].'</p>
                        <div>'.$this->data['id'].'</div>
                        </div>';
Подякували: rozmath1

16

Re: Не можу добратись до елемента з тегом div та відповідним класом

Дуже вдячний, id натиснутого повідомлення відображається=) ! УРА!=)
Тепер його потрібно передати у файл .php щоб змінити комірку запису mySql.

Поки дуже Вам вдячний, шановні=)

Re: Не можу добратись до елемента з тегом div та відповідним класом

rozmath написав:

Дуже вдячний, id натиснутого повідомлення відображається=) ! УРА!=)
Тепер його потрібно передати у файл .php щоб змінити комірку запису mySql.

Поки дуже Вам вдячний, шановні=)

Ну передавати можна наприклад через

$.post()

у JQuery.

18

Re: Не можу добратись до елемента з тегом div та відповідним класом

Можна писати так:

return '<div class="comment"  onclick="someFunction(this);"id='.$this->data['id'].'>
                        <div class="avatar"></div>
                        <div class="delete" id='.$this->data['id'].'></div>
                        <div class="edit"     id='.$this->data['id'].'></div>
                        <div class="author">'.$this->data['author'].' &#5125; '.$this->data['recipient'].'</div>
                        <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
                        <p>'.$this->data['message'].'</p>
                        <div>'.$this->data['id'].'</div>
                        </div>';

Наступний код розташовується в файлі з JS кодом або всередині тегу script в HTML сторінці, але після підключення jQuery:

function someFunction(e){
    jQuery.post('scriptName.php','id='+e.id, whenSuccessFunction(answer))
}

19

Re: Не можу добратись до елемента з тегом div та відповідним класом

Invader написав:

Можна писати так:

return '<div class="comment"  onclick="someFunction(this);"id='.$this->data['id'].'>
                        <div class="avatar"></div>
                        <div class="delete" id='.$this->data['id'].'></div>
                        <div class="edit"     id='.$this->data['id'].'></div>
                        <div class="author">'.$this->data['author'].' &#5125; '.$this->data['recipient'].'</div>
                        <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
                        <p>'.$this->data['message'].'</p>
                        <div>'.$this->data['id'].'</div>
                        </div>';

Наступний код розташовується в файлі з JS кодом або всередині тегу script в HTML сторінці, але після підключення jQuery:

function someFunction(e){
    jQuery.post('scriptName.php','id='+e.id, whenSuccessFunction(answer))
}

Код someFunction розмістив у файлі script.js. Але метод onclick="someFunction(this);" не визначений у файлі comment.class.php

public function markup_read(){
        $this->data['date_time'] = strtotime($this->data['date_time']);
        
        return '<div class="comment" id='.$this->data['id'].'>
                        <div class="avatar"></div>
                        <div class="delete" id='.$this->data['id'].' onclick="alert(this.id);" ></div>
                        <div class="edit"     id='.$this->data['id'].' onclick="alert(this.id);"></div>
                        <div class="author">'.$this->data['author'].' &#5125; &#9658; '.$this->data['recipient'].'</div>
                        <div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
                        <p id='.$this->data['id'].' onclick="someFunction(this);">'.$this->data['message'].'</p>
                        <div>'.$this->data['id'].'</div>
                        </div>';
    }

, тобто у файлі з методом повернення розмітки повідомлення. При спробі прикріпити файл script.js виникає помилка підключення.
Uncaught ReferenceError: someFunction is not defined

20

Re: Не можу добратись до елемента з тегом div та відповідним класом

Скоріш за все це через те що функція someFunction розміщена всередині іншої функці jQuery(document).ready(function(){…}). Або розмістіть функцію поза функцією jQuery (в окремому тегу script, якщо JS всередині HTML  файлу)

function someFunction(e){
     // code
}
//
jQuery(document).ready(function(){…})

або напишіть так:

jQuery(document).ready(function(){
    window.someFunction = function(e){
        alert(e.id)
     }
})

І то не помилка підключення. Воно пише що функція someFunction не визначена. І напевно воно ще і вказує на якому рядку. І то ж броузер видає повідомлення про помилку? Чи PHP часом не намагається викликати функцію someFunction отут от: <p id='.$this->data['id'].' onclick="someFunction(this);">'.$this->data['message'].'</p>