Jquery display message while php processing

Question

I'm using jQuery ajax call to post process a form.
I want to display a loading message or image while the form is processed and when the action is completed to display a complete message.
How can I do it?
This is my jQuery code.

$s('body').on('click', '#group-update', function() {
    var formInputs = $s('input').serializeArray();
    var groupId = $s(this).data('group');
    var error = $s('#modal .info');
    var tr = $s('#dataT-attrgroup').find('tr.on_update');

    formInputs.push({
        name: 'id',
        value: groupId
    });

    $s.ajax({
        type: 'post',
        url: 'index.php?controller=attribute&method=updateGroup',
        data: formInputs,
        dataType: 'JSON',
        success: function(data) {
            if(data.response === false){
                error.addClass('info-error');
                error.html(data.message);
            }else{
                oTable.row(tr).data(data).draw();
                $s('#modal').modal('hide');
                tr.removeClass('on_update');
                $s.growl.notice({
                    title: 'Success',
                    message: 'Grupul de atribute a fost actualizat'
                });
            }

        }
    });
});

Alex Doe · Accepted Answer · 2014-10-16 13:53:53Z

1

Before ajax function display your loader and inside the success function from your ajax hide it.

As you can see in my example i inserted $('.loader').show(); and $('.loader').hide();

$('.loader').show();
$s.ajax({
        type: 'post',
        url: 'index.php?controller=attribute&method=updateGroup',
        data: formInputs,
        dataType: 'JSON',
        success: function(data) {
            if(data.response === false){
                error.addClass('info-error');
                error.html(data.message);
            }else{
                oTable.row(tr).data(data).draw();
                $s('#modal').modal('hide');
                tr.removeClass('on_update');
                $s.growl.notice({
                    title: 'Success',
                    message: 'Grupul de atribute a fost actualizat'
                });
            }
            $('.loader').hide();
        }
    });

answered Oct 16, 2014 at 13:53

Alex Doe

9346 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

speedy Over a year ago

my for is validated before processed

speedy Over a year ago

the loading message should appear while the php call is made

Alex Doe Over a year ago

i believe there are some advanced techniques for this, like file uploading through ajax but if you want to keep it simple then i`d suggest two options: 1. make the checking in js, 2. create 2 ajax requests

Billy · Accepted Answer · 2014-10-16 13:52:17Z

0

According to the PHP docs:

The upload progress will be available in the $_SESSION superglobal when an upload is in progress, and when POSTing a variable of the same name as the session.upload_progress.name INI setting is set to. When PHP detects such POST requests, it will populate an array in the $_SESSION, where the index is a concatenated value of the session.upload_progress.prefix and session.upload_progress.name INI options. The key is typically retrieved by reading these INI settings, i.e.

You should take a look at : https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-Session-Upload-Progress

I think this will definitely help you out!

answered Oct 16, 2014 at 13:52

Billy

1,1049 silver badges23 bronze badges

Comments

Sly · Accepted Answer · 2014-10-16 13:58:35Z

Display your message just before launching $.ajax(); And close it in the success (and error) callback functions. example :

$s('body').on('click', '#group-update', function() {
var formInputs = $s('input').serializeArray();
var groupId = $s(this).data('group');
var error = $s('#modal .info');
var tr = $s('#dataT-attrgroup').find('tr.on_update');

formInputs.push({
    name: 'id',
    value: groupId
});

var dlg = $s('<div/>').text('your message').dialog();

$s.ajax({
    type: 'post',
    url: 'index.php?controller=attribute&method=updateGroup',
    data: formInputs,
    dataType: 'JSON',
    error:function() {
        dlg.dialog('close');
        },
    success: function(data) {

        dlg.dialog('close');

        if(data.response === false){
            error.addClass('info-error');
            error.html(data.message);
        }else{
            oTable.row(tr).data(data).draw();
            $s('#modal').modal('hide');
            tr.removeClass('on_update');
            $s.growl.notice({
                title: 'Success',
                message: 'Grupul de atribute a fost actualizat'
            });
        }

    }
});
});

Md Sahel Aktar · Accepted Answer · 2014-10-16 15:14:05Z

0

If you go through ajax section of jquery documentation you will notice some more method like success ie error, beforesend, complete etc. Here is the code snippet.

$s.ajax({
  type: 'post',
  url: 'index.php?controller=attribute&method=updateGroup',
  data: formInputs,
  dataType: 'JSON',
  beforeSend : function(){
    // load message or image
  },
  success: function(data) {
    // write code as per requirement
  },      
  complete : function(){
    // load complete message where you previously added the message or image, as a result previous one will be overwritten
  }  
});

answered Oct 16, 2014 at 15:14

Md Sahel Aktar

112 bronze badges

Collectives™ on Stack Overflow

Jquery display message while php processing

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related