Migrate jQuery to jQuery2

Question

I have a schedule in the version of jquery 1. * paging that is working well, only that the site is using jQuery 2 and since I don’t have much knowledge of this version of the library, I would like help to make it work.

this is the load_mailbox.php

if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$start = $page * $per_page;
include"db.php";

$query_pag_data = "SELECT m.id as msgid, m.sender, m.receiver, m.added, m.msg, m.unread, m.poster, m.subject, u.id, u.username, u.class from messages as m LEFT JOIN users as u on m.sender = u.id WHERE m.receiver = 2 LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['subject']);

if ($row['sender'] == 0){

    $row['username'] = "SISTEMA";
}
    $msg .= "<tr>
                 <td><input type=\"checkbox\" class=\"marcar cinput\" name=\"check\" id=\"check\" value\"".$row['msgid']."\" /></td>
                 <td class=\"mailbox-star\"><a href=\"#\"><i class=\"fa fa-star-o text-yellow favo\"></i></a></td>                          
                 <td class=\"mailbox-name\"><a href=\"read-mail.html\">".$row['username']." </a></td>
                 <td class=\"mailbox-subject\"><b>".$row['subject']." </b></td>
                 <td class=\"mailbox-date\">".$row['added']."</td>
            </tr>";
}
$msg = "<div class=\"navmp\"><table class=\"table table-hover table-striped\"><tbody>" . $msg . "</tbody></table>"; // Content for Data


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages WHERE receiver = 2";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */



// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<i p='$pre' class='active'><button class=\"btn btn-default btn-sm\"><i class=\"fa fa-chevron-left\"></i></button></i>";
} else if ($previous_btn) {
    $msg .= "<button class=\"btn btn-default btn-sm\"><i class=\"fa fa-chevron-left\"></i></button>";
}


// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<i p='$nex' class='active'><button class=\"btn btn-default btn-sm\"><i class=\"fa fa-chevron-right\"></i></button></i>";
} else if ($next_btn) {
    $msg .= "<button class=\"btn btn-default btn-sm\"><i class=\"fa fa-chevron-right\"></i></button>";
}


$msg = $msg . "</div>";  // Content for pagination
echo $msg;
$total_string = "<span class='total' a='$no_of_paginations'><b>" . $cur_page . "</b> / <b>$no_of_paginations</b></span>";
echo "<div class=\"pull-right\"><div class=\"btn-group\">" . $total_string . "</div></div>";
}

this is the programming in jquery.min I want to make it work in jQuery-2.1.3.min. js

 $(document).ready(function(){
           function loading_show(){
        $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
    }
    function loading_hide(){
        $('#loading').fadeOut('fast');
    } 
        function loadData(page){
           loading_show();
            $.ajax
            ({
                type: "POST",
                url: "apps/mailbox/load_mailbox.php",
                data: {page: page},

                success: function(msg)
                {
                    $("#mp").ajaxComplete(function(event, request, settings)
                    {             
                        loading_hide();
                        $("#mp").html(msg);
                    });
                }
            });
        }
        loadData(1);  // For first time page load default results
        $(document).on('click', '.navmp i.active', function(){
            var page = $(this).attr('p');
            loadData(page);

        });

I use bootstrap, but I don’t want to use datatables for customization.

from now on I appreciate any help.

Answer 1

Since the jQuery1.8 the method .ajaxComplete() can only be used with document

I really don’t understand why it was used .ajaxComplete inside a callback, I believe it is not necessary at this point and that maybe you should remove it or just adjust it to the necessary attached element (once only, there is an example below for this).

I recommend using the Promise in the .ajax also, the code should look something like:

$.ajax({
    type: "POST",
    url: "apps/mailbox/load_mailbox.php",
    data: {page: page}
}).done(function(msg) {            
    loading_hide();
    $("#mp").html(msg);//Exibe o HTML
}).fail(function(jqXHR, textStatus, errorThrown) {
   alert([jqXHR, textStatus, errorThrown]);//Se necessitar tratar os erros
});

The function .ajaxComplete is an event that monitors ajax requests, I believe in your code it is not necessary, but if it is, then add it this way:

$(document).ready(function() {
    $(document).ajaxComplete(function(event, request, settings) {             
        console.log(event, request, settings); //Exemplo de monitoramento
    });

    function loading_show() {
        $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
    }