Migrating jQuery to jQuery2

1

I have a programming in the version of jquery 1 * of paging that is working fine, only that the site is using jQuery 2 and as I am not very knowledgeable of this library version, I would like help getting it to 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 that I want to make 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 do not want to use datatables for customization.

Thanks in advance for any help.

    
asked by anonymous 14.06.2015 / 02:16

1 answer

2

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

I really do not understand why .ajaxComplete was used inside a callback, I do not think it's necessary at this point and that maybe you should remove it or just adjust to the required attached element (once only, there's an example further down to this).

I recommend using Promise in .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 the ajax requests, I believe that 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');
    }
    
14.06.2015 / 07:42