Asked  7 Months ago    Answers:  5   Viewed   134 times

I have some problems with redirecting/reloading after a successful ajax call. Here is the situation:

I have item for deletion saved in an array. When I click on a button it calls for PHP file via ajax, and after success I need to reload the page. But I have some problem doing this. I searched the internet and couldn't find a working solution.

I have PHP file which goes through the array deleting item by item from the database.

foreach($arrayVals as $key=>$val)
{
    //bla bla
}

Also, I have jQuery part:

$("#button").live("click",function(){
    $.ajax({
        url, data, type... not important
        success: function(html){
                    location.reload();
                }
    });
});

I mean, the code works, but not good. It does delete items, but not all of them and then it reloads the page. Like, if I have 10 items to delete, it deletes like 6-7, and 3-4 items stay undeleted.

It acts like it reloads the page too soon, like PHP file does not have enough time to process everything :D

 Answers

19

BrixenDK is right.

.ajaxStop() callback executed when all ajax call completed. This is a best place to put your handler.

$(document).ajaxStop(function(){
    window.location.reload();
});
Wednesday, March 31, 2021
 
sholsinger
answered 7 Months ago
44
      var table=$('#tableid');
$('#tableid').on('click','thedeletebuton_id',function(event) {
      event.preventDefault();
      var id=$(this).data('id'); // pass the id to the controller to delete using ajax
       $.ajax({
           type: "POST",
           url: "<?php echo base_url('your controller'); ?>",
           data:  {id:id}, 
           success: function(data)
           {
            table.ajax.reload();   /// reloads the table
            alert('Deleted');
           }
       });

      });
Wednesday, March 31, 2021
 
nighter
answered 7 Months ago
91

you should provide a valid url instead of a path. So:

.load('./includes/db_setup_form.php');

should be

.load('/includes/db_setup_form.php');
Wednesday, March 31, 2021
 
Andres
answered 7 Months ago
33

You can put the condtion inside loop success: function(result){

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            var emailnew = $("#email").val();
            var password = $("#password").val();

            var dataString = '&email=' + email + '&password=' + password;
            if (emailnew == '' || password = '') {
                document.getElementById('error3').innerHTML = "Please Fill All Fields";
            } else {
                $.ajax({
                    type: "POST",
                    url: "process.php",
                    data: dataString,
                    cache: false,
                    success: function (result) {
                        if (result == "You are successfully logged in") {
                            document.location.href = 'login.htm';
                        } else {
                            document.getElementById('error3').innerHTML = result;
                        }
                    }

                });
            }
            return false;
        });
    });
</script>
Saturday, May 29, 2021
 
khaverim
answered 5 Months ago
73

There are two ways to achieve this. First, is server-side generation, and second is client-side application.

1. Server side content generation

You might want to move that part of the page to a different blade template. Then with a AJAX call, you can rebuild the page and send the output to the browser. For example:

Route Definition

Route::post("generateList", "Partials@generateList");

Partial Template Definition

PartialsloopContainer.blade.php

<div class="col-lg-6 collapse" >
    <div class="job-summ-panel" id="job-summ-panel" >
        @foreach($jobs as $job)
            {{$job['active']}}
        @endforeach
    </div>
</div>

Your Partial Content Generator

<?php 

    namespace AppHttpControllers;

    use IlluminateHttpRequest;

    class Partials extends Controller {

    public function generateList(Request $request){
        // generate data from the parameters again
        $input = $request->input('job_ref');
        $generatedData = GenerateDataFromJobRef($input);
        return View::make("partials/loopContainer", ["jobs" => $generatedData]);
    }
?>

Client Side Refresh

$.ajax({
    method: "POST",
    url: '/generateList',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');
        $('#job-summ-panel').html(response)
    },                               
}); 



2. Client side content application

Route Definition

Route::post("generateList", "Partials@generateList");

Your Partial Content Generator

<?php 

    namespace AppHttpControllers;

    use IlluminateHttpRequest;

    class Partials extends Controller {

    public function generateList(Request $request){
        // generate data from the parameters again
        $input = $request->input('job_ref');
        $generatedData = GenerateDataFromJobRef($input);
        return json_encode(["data" => $generatedData]);
    }
?>

Client Side Refresh

$.ajax({
    method: "POST",
    url: '/generateList',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');            
        var appendString = "";
        for(var i = 0; i < response.data.length; i++){
            appendString += "<div>" + response.data[i].info + "</div>";    
        }
        $('#job-summ-panel').empty().append(appendString);
    },                               
}); 



Sunday, August 15, 2021
 
CAMason
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :