Hi guys,
I am using pjax with Yii2 and I have faced a problem with pjax. All scripts are working correctly and fine only the first time and after sending a pjax request and updating the table content, scripts and pjax not working. If I remove the line
$.pjax.reload({container:'#products-table'});
all scripts are working again correctly but the table content is not updating and I have to update the page manually in order to see the changes. Please if someone had already this kind of issues please share with your solutions. Thanks!
$("form.products-input-style").on('beforeSubmit', function(e){
var form = $(this);
$.ajax({
type : "POST",
url: form.attr('action'),
data: new FormData(this),
processData: false,
contentType: false,
success : function(response) {
$.pjax.reload({container:'#products-table', timeout: false});
},
error : function(response){
console.log(response);
}
});
return false;
}).on('submit', function(e){
e.preventDefault();
});
VIEW :
=============
<?php Pjax::begin(['id' => 'products-table']); ?>
<table class="table table-hover table-striped">
<thead>
<th>Product image</th>
<th>Title</th>
<th>Price</th>
<th>Show/Hide</th>
<th>Actions</th>
</thead>
<tbody>
<?php foreach($dataProvider as $product): ?>
<tr id="productRow-<?php echo $product->id; ?>">
<?php $editForm = ActiveForm::begin([
'id' => 'products-edit-form-'.$product->id,
'action' => ['products/product-edit'],
'enableClientValidation'=>false,
'method' => 'post',
'options' => [
'enctype' => 'multipart/form-data',
'class' => 'products-input-style',
]
]); ?>
<td>
<?php
echo $editForm->field($model, 'id')->hiddenInput(['value'=>$product->id])->label(false);
</td>
<td>
<span class="product-name-value">
<?php echo $product->productName; ?>
</span>
<span class="product-name-input" style="display:none">
<?= $editForm->field($model, 'productName')->textInput(['class'=>'form-control productName', 'value'=>$product->productName])->label(false); ?>
</span>
</td>
<td>
<span class="product-cost-value">
<?php echo "<i class=\"fa fa-eur\"></i>
<span>". number_format(round($product->cost, 2), 2); ?></span>
</span>
<span class="product-cost-input" style="display:none">
<?= $editForm->field($model, 'cost')->textInput(['class'=>'form-control productCost', 'value'=>$product->cost])->label(false); ?>
</span>
</td>
<td>
<?php if($product->available == 'Y'){ ?>
<input type="checkbox" name="toggle" checked="checked" class="toggle toggle-change" id="<?php echo $product->id; ?>" >
<label for="<?php echo $product->id; ?>"></label>
<?php } else{ ?>
<input type="checkbox" class="toggle" name="toggle toggle-change" id="<?php echo $product->id; ?>">
<label for="<?php echo $product->id; ?>"></label>
<?php } ?>
</td>
<td>
<ul class="products-action">
<li><a href="#" class="edit" id="<?php echo $product->id; ?>"><i class="fa fa-pencil fa-2x"></i></a></li>
<li><a href="#" class="delete" id="<?php echo $product->id; ?>"><i class="fa fa-trash fa-2x"></i></a></li>
<ul class="delete-confirm-div" style="display: none;">
<li><a href="#" class="delete-cancel" id="<?php echo $product->id; ?>">No</a></li>
<li><a href="#" class="delete-confirm" id="<?php echo $product->id; ?>">Yes</a></li>
</ul>
</ul>
<div class="save-btn" style="display: none">
<?= Html::submitButton('Save', ['class'=>'btn btn-success product-edit-submit', 'id'=>$product->id]); ?>
</div>
</td>
</tr>
<?php ActiveForm::end(); ?>
<?php endforeach;?>
</tbody>
</table>
<?php Pjax::end(); ?>