Próbuję utworzyć aplikację TODO za pomocą PHP, AJAX i MySQL. Powinien być przycisk, który, po kliknięciu usuwa element z ekranu i bazy danych, ale nie wiem, jak odnieść się do tego, że chcę usunąć określony przedmiot.

(Każdy element ma unikalny identyfikator w bazie danych, także tekst i identyfikator z listy, która zawiera go)

Przykładem mojego HTML byłoby coś takiego:

 <ul id="list">
    <li class="i­tem">
        <div class="draggertab">
            <img src="imatges/botofletxa.jpg" width="30" height="30">
        </div>
        <div class="deletetab">
            <img src="imatges/botocreu.jpg" width="30" height="30">
        </div> <span>Buy some cookies</span> 
    </li>
</ul>

I kod JavaScript wyglądałby tak:

  $('.deletetab').live('click', function () {
      var result = confirm("Are you sure?");
      if (result == true) {
          $(this).parent().remove();
      }
  });

Ale nie wiem, jak wysłać (za pomocą AJAX) informacje do innego pliku PHP (który łączy się z bazą danych), lub która zmienna powinna użyć.

Przepraszam, jeśli to głupie pytanie, jestem nowy w programowaniu!

0
Laia 7 grudzień 2013, 21:37

2 odpowiedzi

Najlepsza odpowiedź

Nie wiem, jak renderujesz listę (ul), przypuśćmy, że jest pętla foreach lub coś takiego. Możesz przechowywać identyfikator każdego elementu w ukrytym polu, dzięki czemu można uzyskać dostęp do swojej wartości z JS:

 <ul id="list">
    <li class="i­tem">
        <input type="hidden" class="hidden_id" value="render_id_here" />
        <div class="draggertab">
            <img src="imatges/botofletxa.jpg" width="30" height="30">
        </div>
        <div class="deletetab">
            <img src="imatges/botocreu.jpg" width="30" height="30">
        </div> <span>Buy some cookies</span> 
    </li>
</ul>

Js:

$('#list').on('click', '.deletetab', function(){
    var result = confirm("Are you sure?");

    if (result==true) {
         var parent = $(this).parent();

         $.ajax({
             type: 'POST',
             data: { idToDelete: parent.find('.hidden_id').val() }, //Find hidden ID field within parent div and read it's value
             url: 'delete.php'
         }).done(function() { //success callback
                parent.remove(); 
            }).fail(function(qXHR, textStatus) { //error callback
                alert('Server responded with error status ' + textSatus);
            });           
      }  
    });

Po stronie serwera należy wyszukać parametr "idodelete" w wysłanych danych.

0
nativehr 8 grudzień 2013, 14:37

Po pierwsze, możesz umieścić identyfikator swojego elementu na atrybucie ID danych każdego elementu.

<li class="item" data-id="{{ item_id"}}>
    // the rest of the html
</li>

Potem javascript.

$('.deletetab').click(function() {
    var $this, $item;
    $this = $(this);
    $item = $this.closest('.item');
    if (confirm('Are you sure')) {
        $.post('url_to_delete.php', {id: $item.attr('data-id')}, function(data) {
            $item.remove();
        });
    }
});
0
praxmatig 7 grudzień 2013, 19:19