javascript - jquery show hide loader for the element which clicked - Stack Overflow

admin 管理员组

文章数量: 1086019

I am trying to show and hide loader image only for the element which has been clicked, on ajax process.

Here is my HTML

<table>
    <tbody>
        <tr>
            <td class="status-item">
                <!-- element to show/hide -->
                <i id="1" title="" rel="tooltip" class="cursor help fa fa-envelope read" data-original-title="Read"></i>

                <!-- element to show/hide -->
                <span style="display:none" class="loader">
                    <img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
                </span>
            </td>
            <td class="status-item">
                <!-- element to click -->
                <i id="2" title="" rel="tooltip" class="cursor help fa fa-envelope unread" data-original-title="Unread"></i>

                <!-- element to show/hide -->
                <span style="display:none" class="loader">
                    <img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
                </span>
            </td>
        </tr>
    </tbody>
</table>

JS code

// when click on read icon
$('.read').click(function() {
    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $('span.loader').hide();
        }
    });
});

// when click on unread icon
$('.unread').click(function() {
    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $('span.loader').hide();
        }
    });
});

I have tried $(this).next() but that didn't work and stop even show/hide the loader image

$('.read').click(function() {

    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $(this).next('span.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $(this).next('span.loader').hide();
        }
    });
});

$('.unread').click(function() {

    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/seen/' + id;
    $(this).next('span.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $(this).next('span.loader').hide();
        }
    });
});

Any idea how to resolve this when the loader image only shows for the element (icon) been clicked?

I am trying to show and hide loader image only for the element which has been clicked, on ajax process.

Here is my HTML

<table>
    <tbody>
        <tr>
            <td class="status-item">
                <!-- element to show/hide -->
                <i id="1" title="" rel="tooltip" class="cursor help fa fa-envelope read" data-original-title="Read"></i>

                <!-- element to show/hide -->
                <span style="display:none" class="loader">
                    <img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
                </span>
            </td>
            <td class="status-item">
                <!-- element to click -->
                <i id="2" title="" rel="tooltip" class="cursor help fa fa-envelope unread" data-original-title="Unread"></i>

                <!-- element to show/hide -->
                <span style="display:none" class="loader">
                    <img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
                </span>
            </td>
        </tr>
    </tbody>
</table>

JS code

// when click on read icon
$('.read').click(function() {
    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $('span.loader').hide();
        }
    });
});

// when click on unread icon
$('.unread').click(function() {
    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $('span.loader').hide();
        }
    });
});

I have tried $(this).next() but that didn't work and stop even show/hide the loader image

$('.read').click(function() {

    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $(this).next('span.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $(this).next('span.loader').hide();
        }
    });
});

$('.unread').click(function() {

    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/seen/' + id;
    $(this).next('span.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $(this).next('span.loader').hide();
        }
    });
});

Any idea how to resolve this when the loader image only shows for the element (icon) been clicked?

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked Jul 7, 2014 at 5:43 Code LoverCode Lover 8,3782121 gold badges9090 silver badges164164 bronze badges 2

• where is .read icon in you post? – Bhushan Kawadkar Commented Jul 7, 2014 at 5:45
• @BhushanKawadkar see <i id="1" .... – Rohan Kumar Commented Jul 7, 2014 at 5:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use a different varaible for this as it will not work in success callback like,

var $this=$(this);
$.ajax({
    type: 'POST',
    url: url,
    success: function() {
        $this.next('span.loader').hide();// use $this here not $(this)     
    }
});

It can be done by using a simple approach like add a data-type attribute in <i> tag like,

HTML

<i id="1" data-type="seen" data-original-title="Read" ...
......
<i id="2" data-type="unseen" data-original-title="Unread" ...

And in Script try this,

$('.read, .unread').click(function() {    
    var id = this.id,// use this.id simply
        $this=$(this), // take a copy of current jquery object
        type=$this.data('type');// seen/unseen see above html
    var url = base_url + 'admin/notifications/'+type+'/' + id;
    $this.next('span.loader').show();
    $.ajax({
        type: 'POST',url: url,data:{id:id},
        success: function() {
            $this.next('span.loader').hide();
        }
    });
});

Try this :

// when click on read icon
$('.read').click(function() {
   var current = $(this);
   var id = $(this).attr('id');
   var url = base_url + 'admin/notifications/unseen/' + id;
   current.parent().find('.loader').show();
   $.ajax({
       type: 'POST',
       url: url,
       success: function() {
           current.parent().find('.loader').hide();
       }
   });
});
// when click on unread icon
$('.unread').click(function() {
   var current = $(this);
   var id = $(this).attr('id');
   var url = base_url + 'admin/notifications/unseen/' + id;
   current.parent().find('.loader').show();
   $.ajax({
       type: 'POST',
       url: url,
       success: function() {
           current.parent().find('.loader').hide();
       }
   });
});

本文标签： javascriptjquery show hide loader for the element which clickedStack Overflow