Передать значение представления списка в ajax

Question

Передать значение представления списка в ajax

У меня есть список, который создается динамически. Часть кода, которая создает список, это:

<ul>
    <?
        foreach ($folders as $folder)
            {
                $folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
                $folder2 = str_replace("[Gmail]/", "", $folder);
            ?>
                <li>
                    <a><div id="box"><? echo $folder2; ?> </div></a>
                </li>
            <?}
</ul>

<div id="maillist"></div>

O/p папки $

GMAIL/All Mail
GMAIL/Drafts
GMAIL/Important

O/p из $folder2

All Mail
Drafts
Important

Я хочу, чтобы, когда пользователь нажимает на всю почту, соответствующее ей значение (в данном случае: GMAIL/Вся почта) должно передаваться другому скрипту через ajax. Тот же процесс должен выполняться и для других значений в списке

Код Ajax

<script>
$(document).ready(function(){
    $('#box').change(function(){

        var boxid = $('#box').val();
        console.log($('#box'))
        if(boxid != 0)
        {

            $.ajax({
                type:'post',
                url:'a_fetchmaillist.php',
                data:{id:boxid},
                cache:false,
                success: function(returndata){
                    $('#maillist').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>

Может ли кто-нибудь сказать, возможно ли делать то, что я хочу и если да, то как это будет сделано

4

php javascript jquery ajax list

Author: kavi, 2015-09-03

Source

1 answers

score 3 · Accepted Answer

Прежде всего не назначайте один и тот же идентификатор несколько раз , вместо этого установите класс (например box).

Затем назначьте атрибут данных для определенной папки (например, box-allMails) и выберите этот атрибут при изменении:

foreach ($folders as $folder)
{
   $folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
   $folder2 = str_replace("[Gmail]/", "", $folder);
?>
   <li>
     <div class="box" data-folder="<? echo $folder2 ?>"><? echo $folder2; ?></div>
   </li>
<?}

Затем при изменении:

$(document).on('click', '.box', function() {
   var folder = $(this).attr('data-folder');
   // ajax call..
});

ОБНОВЛЕНИЕ

Важно: Вы должны слушать событие "щелчок" вместо "изменение", потому что вы нажимаете на div, а не на ввод (я изменил код).

Событие делегирование: Обратите внимание на код:

$(document).on('click', '.dynamic-element', function() { .. })

Вместо:

$('.element').on('click', function() { .. });

Второй не будет работать, потому что вы создаете элементы динамически.

Кликабельный: Вам не нужно вставлять тег привязки, чтобы сделать элемент списка кликабельным, если вы не хотите перенаправить его на другую страницу. В вашем случае вы можете создать стиль .box div, чтобы получить указатель курсора следующим образом:

CSS

.box { cursor:pointer }

JQuery позаботится об остальном (проверьте пример)

$(document).on('click', '.box', function() {
  var folder = $(this).attr('data-folder');
  alert('You clicked on: ' + folder);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><div class="box" data-folder="folderOne">Folder One</div></li>
  <li><div class="box" data-folder="folderTwo">Folder Two</div></li>
  <li><div class="box" data-folder="folderThree">Folder Three</div></li>
  <li><div class="box" data-folder="folderFour">Folder Four</div></li>
</ul>