reload div after ajax request

Question

how i can refresh or reload a div after ajax request? i have this code:

function Register(event) {
event.preventDefault();
    console.log(event);
    $.ajax({
        type: 'POST',
        url: register,
        data: {
            name: $('#name').val(),
            email:   $('#Email').val(),
            password: $('#password').val(),
            _token: $('#token').val()
        },
        dataType : "json",

        success: function (data) {
           if (data.success){

             $('#header').
               $('#Register').modal('hide');

           }
        }
    });

}

i need reload or refresh the header div.

Possible duplicate of [ajax success reload div content not working](http://stackoverflow.com/questions/21403402/ajax-success-reload-div-content-not-working) — Krupesh Kotecha, Jul 07 '16 at 05:11
.ajaxComplete(function( event,request, settings ) {}); works for ajax complete/after ajax — Naga Sai A, Jul 07 '16 at 05:11
I want reload a header after login users. Just reload the header. — Reco Jhonatan, Jul 07 '16 at 05:12
Take a look to pushState https://github.com/defunkt/jquery-pjax it is doing what exactly you wish — Gabriele Carbonai, Sep 30 '19 at 10:08

score 30 · Accepted Answer · answered Jul 07 '16 at 05:15

30

You can load the div like this.Please mind the space before divid (" #divid");

if (data.success){
   $("#divid").load(" #divid");
    }

answered Jul 07 '16 at 05:15

Sree KS

1,311
1
13
26

3

Easy and sweet. – claudios Nov 30 '16 at 02:26
1

Your answer just helped me. Thanks. But could you please explain why that space is important? It really doesn't work without it and I just want to know why. Can't find info about that in jquery documentation. – Witcher Jul 12 '18 at 08:16
@Witcher You can learn about *load* function from here http://api.jquery.com/load/ – Sree KS Jul 26 '18 at 12:53
1

Thanks for your answer, it saved my time – Apr 26 '19 at 13:46
1

This works fine however the text in my div slightly shifts to the left and I am not understanding why is that. Any solutions? – rut_0_1 May 01 '19 at 05:19
@rut_0_1 Please remove the style you added for the loading div and add it to the content – Sree KS May 02 '19 at 06:01
@SreeKS, is this space a bug? Because i really not understand why this happen :b – Michel Xavier Oct 31 '20 at 23:53
1

I had a matrix of inputs where the border changed according to the value entered which wasn't getting refreshed after an ajax call. You saved my day with this solution. +1 – F Jacome Jan 09 '21 at 06:05
I tried this but it did'nt work ```$('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: `/todo/${value}`, type: 'PUT', data: { done: this.checked }, success: function (data) { if (data.success) { $('#todos').load(location.href + ' #todos'); } }, }); });``` – AmAn KumAr Mar 01 '21 at 14:19

score 19 · Answer 2 · answered Sep 30 '19 at 09:40

19

I know this post is old and already answered. But I would Like to add something to it. If you look at the answer of @Sree KS it will load the div on top of the existing div. Which is not ideal. Just run inspect div after the method is completed.

To avoid this issue use the following code:

$("#divid").load(" #divid > *");

Hope this will help to anyone who has the same issue.

answered Sep 30 '19 at 09:40

Supunsam

369
7
16

Thanks. I couldn't figure out why there was an additional div until I found this answer. – JC23 Dec 22 '19 at 18:25
Very true. I can confirm that I was able to replicate the aforementioned behavior and the above solution fixed it. Thanks for sharing. – Devner Jan 20 '20 at 21:38
I agree.This is the best option! – Jack Maessen Apr 06 '20 at 22:48
after applying this i can see that the div is not duplicated however the value inside the div is no longer visible unless i reload the page manually, any help as to why? – Blu3 Jul 05 '20 at 18:00
Thanks for posting this! Can you explain " > *" I'm not finding any information, and it doesn't seem to make any difference. I'm not seeing the div being duplicated without " > *" , as long as the leading space is there. – Ella Blackledge Jan 13 '22 at 21:10
It worked but remove all current details from the div. In case I want to only refresh the div content but not empty it. Then what is the best approch? – heySushil May 20 '22 at 09:30

score 1 · Answer 3 · answered Jul 07 '16 at 05:17

1

I think you are trying to reload the header section after login to show the username, logout etc. To do that you have to return the all html from the your ajax method into the "data.success" variable using like json encode.

your ajax method function () {
    $response = array('success' => 'Your html data come here');
    echo json_encode($response);
    exit(0);
}

answered Jul 07 '16 at 05:17

Suman Singh

1,379
12
20

I want only reload. The username, etc. I use php for show. – Reco Jhonatan Jul 07 '16 at 05:20
and in ajax call success: function (data) { if (data.success){ $('#header').html(data.success); } } – Suman Singh Jul 07 '16 at 05:22

reload div after ajax request

3 Answers3

Linked