Удаление всей строки с помощью jquery json ajax php

Question

Я хочу достичь целой строки. Сначала я показываю таблицу, а затем, когда вы нажимаете кнопку «удалить» из каждой строки, появляется подтверждающий модальный запрос о том, хотите ли вы удалить эту строку.

Я пытаюсь работать с jquery, ajax, json и PHP. Конечно, я все еще узнаю.

До сих пор, что у меня есть это:

Javascript Файл:

function callToModal(data){ 
$('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>' + ' ?'); 
$('#myModal3').modal('show'); 
$('.confirm-delete').on('click', function(e) { 
e.preventDefault(); 
var id = $(this).data('id'); 
$('#myModal3').data('id', id).modal('show'); 
}); 


$('#btnYes').click(function() { 
// handle deletion here 
var id = $('#myModal3').data('id'); 
alert(id); 
$.ajax({ 
    url: "deleteFrontUser", 
    type: 'POST', 
    data: { 
     id:id 
      }, 
     success: function(html){ 
     //alert(html); 
     $('[data-id='+id+']').parents('tr').remove(); 
     $('#myModal3').modal('hide'); 
     }  
    }); 
    return false; 
}); 
}; 

В моем файле admin.php:

public function deleteFrontUser(){ 
    // var_dump($_POST['id']);die(); 
    $rowId = $_POST['rowId']; 

    $result = array(); 

    $front = UserDs::getInstance()->getUserById($id); 
    UserDs::getInstance()->deleteItem($front); 

    $result["message"] = "Usuario eliminado"; 

    echo json_encode($result); 
} 

мнение (пожалуйста, обратите внимание, что Я использую механизм шаблонов Smarty):

<div class="portlet-body"> 
     <table class="table table-striped table-hover table-users"> 
      <thead> 
       <tr> 
        <th>Avatar</th> 
        <th class="hidden-phone">Usuario</th> 
        <th>Nombre</th> 
        <th>Apellido</th> 
        <th class="hidden-phone">Email</th> 
        <th class="hidden-phone">Provincia</th> 
        <th class="hidden-phone">Miembro desde</th> 
        <th>Estado</th> 
        <th></th> 
        <th></th> 
       </tr> 
      </thead> 

      <tbody> 
       {foreach $frontusers as $frontuser} 
       <tr> 
        {if $frontuser->frontavatar_id eq null} 
        <td><img src="{site_url()}assets/img/avatar.png" alt="" /></td> 
        {else} 
        <td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td> 
        {/if} 
        <td class="hidden-phone">{$frontuser->username}</td> 
        <td>{$frontuser->name}</td> 
        <td>{$frontuser->lastname}</td> 
        <td class="hidden-phone">{$frontuser->email}</td> 
        <td class="hidden-phone">{$frontuser->state}</td> 
        <td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td> 

        {if $frontuser->status eq 2} 
        <td ><span class="label label-success">Activo</span></td> 
        {else} 
        <td ><span class="label label-warning">No Activo</span></td> 
        {/if} 

        <td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Modificar</a></td> 

        <td><a href="#" class="btn mini red-stripe confirm-delete" role="button" onclick="callToModal('{$frontuser->username}');" data-id="{$frontuser->id}">Eliminar</a></td> 
       </tr> 



       <!-- modal --> 
       <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
         <h3 id="myModalLabel3">Eliminar</h3> 
        </div> 
        <div class="modal-body"> 
         <p></p> 
        </div> 
        <div class="modal-footer"> 
         <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button> 
         <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button> 
        </div> 
       </div> 
       <!-- end modal --> 

       {foreachelse} 
        <tr> 
         <td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td> 
        </tr> 
       {/foreach} 
      </tbody> 
     </table> 
    </div> 

Модальные дисплеи, когда вы нажимаете кнопку удаления определенной строки, но вот что смешно: при первом нажатии кнопки удаления она не стирает строку. Когда вы нажимаете эту или любую другую строку (после однократного удаления), строка удаляется. Таким образом, это одна из проблем, и другая проблема заключается в том, что я не могу отправить данные в свой php-файл, чтобы я мог удалить его из базы данных.

Как я могу это решить?

У меня есть настроенная скрипка с этим, если вы хотите проверить: code

Answer 1

Решения заключается в следующем:

Смотрите мой предыдущий пост, чтобы иметь правильный JS файл и вид: post

Php код для удаления всей строки из базы данных будет:

public function deleteFrontUser(){ 

    $rowId = $_POST['id']; 

    $result = array(); 

    $front = UserDs::getInstance()->getUserById($rowId); 
    UserDs::getInstance()->deleteItem($front); 

    $result["message"] = "Usuario eliminado"; 

    echo json_encode($result); 
} 

Answer 2

url имеет т o быть действительным сайтом, расположенным на вашем веб-сайте, вы не можете иметь имя функции в пределах url, так как вызов AJAX не знает, в каком файле находится функция.

Так что ваш url должен быть:

url: "admin.php" 

Вы можете, однако, добавить еще один параметр в свой AJAX вызов сказать admin.php какую функцию она должна выполнять, что-то, как это будет работать:

$.ajax({ 
    url: "admin.php", 
    type: 'POST', 
    data: { 
     id:id, 
     func:"deleteFrontUser" 
    }, 
    success: function(html) 
    { 
     //alert(html); 
     $('[data-id='+id+']').parents('tr').remove(); 
     $('#myModal3').modal('hide'); 
    }  
}); 

Итак, на admin.php вы должны получить опубликованные данные ДО того, как вы введете функцию, и вы можете проанализировать переменную func, чтобы указать, какую функцию выполнить:

$rowId = $_POST['id']; 
$func = $_POST['func']; 

switch ($func) 
{ 
    case 'deleteFrontUser': 
     deleteFrontUser($rowId); 
    break; 
    default: 
     // function not found. 
    break; 
} 

deleteFrontUser выглядит где а что-то вроде этого:

public function deleteFrontUser($rowId) 
{ 
    $result = array(); 
    // Rest of the code. 
    echo json_encode($result); 
} 

Может быть, вы должны изменить этот немного, но это должно дать вам идею.

Для получения дополнительной информации см. $.ajax documentation.

Примечание:

Для причины Наилучшая практика, используйте php's isset функцию, чтобы определить, являются ли данные фактически размещены или нет. Оператор ternary делает это очень легко и коротко:

$emptyString = ""; 
$rowId = isset($_POST['id']) ? $_POST['id'] : $emptyString; 
$func = isset($_POST['func']) ? $_POST['func'] : $emptyString; 

Я также рекомендую использовать .on функцию JQuery, и пусть принимают параметр «щелчок» и функции которого будет запускаться на событие щелчка. .click - это, как правило, плохая практика, потому что он не может обнаружить изменения в дереве DOM, поэтому, когда вы обновляете его с помощью нового HTML-кода, вы ввернули его, .on позволяет добавлять новые элементы в дерево dom, но все же быть в состоянии слушать события, соответствующие их.