Pjax reload in modal popup

Yii 2.0 General Discussions
1

I have an index page that open a modal window (update form) in which the user can then open a modal window in which I display another index page with a GridView. From there users can delete items from the GridView.

How can I refresh/reload the modal Gridview after deletion? I had hoped that I could use pjax, but that doesn’t seem to work. When I use the reload command, it reloads the main window, not the modal window (yes, I’ve checked the name of the pjax id being used).

So I have a delete button that I’d associated the following click event. It all works, but no reloading the modal Gridview

function delItem(id){
    $('#loading').show();
    $.ajax({
            async: false,
            method: "POST",
            url: "index.php?r=projects-legs-invoices-items/delete&id="+id,
    })
    .done(
        function(result){
            result = JSON.parse(result);
            console.log(result.status + " " + result.message);
            if(result.status == 'Success'){
                // $.pjax.reload({container:'#InvoiceItemsListGrid'});  //This doesn't work
            }else{
                console.log("delItem not successful.");
            }
        }
    )
    .fail(function(){
        console.log("delItem server error");
    });

    $('#loading').hide();
    return false; 
};

If needed, below is my Delete action from my controller

public function actionDelete($id)
    {
        if($this->findModel($id)->delete()){
            echo json_encode(['status' => 'Success', 
                              'message' => 'Invoice Item deleted!']);
        }else{
            echo json_encode(['status' => 'Error', 
                              'message' => 'Invoice Item NOT deleted!']);
        }
    }

What is the way to properly handle this type of situation?
Am I missing something obvious, is there a way to do this with the native GridView ActionColumn Delete button?

2

Hi,

Initially how you load the GridView in the model? If you load in hidden div and show it in model then the only way is to remove row by row of the gridview.

For example you assign a unique row id for each row then after success just remove the tr by referring the row id.

'rowOptions' => function ($model, $key, $index, $grid) {
	return ['id' => '<Your_Unique_row-ID>' ]; // For Example row_01 
}

Then do the removal after you receiving ajax success deletion flag by jQuery as follows

jQuery('#row_01').hide(); // or .remove();

Your job done!