CODEWITHSUNDEEP
phpyii2pjax
Umidjon Urunov
Umidjon Urunov

Reputation: 671

Yii2 pjax is working only the first time

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. And also I found this solution ( Yii2 Pjax and ActiveForm beforeSubmit not working after reload? ): " $(document).on('ready pjax:success', function(){ // to do }); " and with it working fine BUT after adding more jquery code it stopped working again. Please if someone has the same issue please share with solution. Thanks!

$(document).on('ready pjax:success', function(){

    $(".product-edit-submit").on('click', function(){
            $.ajax({
                type : "POST",
                url : editUrl,
                data: {
                    id: this.id,
                    productName: productName,
                    productCost: productCost,
                    _csrf: csfr
                },
                success  : function(response) {
                    $.pjax.reload({container:'#products-table'});
                },
                error : function(response){
                    console.log(response);
                }
            });
            return false;

        });
    });

VIEW :

<?php Pjax::begin(['id' => 'products-table']); ?>
        <table class="table table-hover table-striped">
        .......
        </table>
<?php Pjax::end(); ?>

Upvotes: 2

Views: 2695

Answers (4)

Vasim Walikar
Vasim Walikar

Reputation: 61

For example, assume the following document:

<div id="a">
<?php Pjax::begin() ?>
  <div id="b">
  ...
  </div>
<?php Pjax::end() ?>
</div>

Now, when you want to handle the event of "#b", you may want to write like this:

<script>
$("#b").on("someEvent", function(){…});
</script>

But it only works for the first event. The event handler will be lost when “#b” is updated by pjax. It won’t work for the 2nd event and after.

The script should be:

<script>
$("#a").on("someEvent", "#b", function(){…});
</script>

This will attach an event handler to “#a”, but the handler handles the event of “#b”. And because “#a” is outside the pjax area, the event handler won’t be lost when “#b” is updated by pjax.

Upvotes: 0

Shaju
Shaju

Reputation: 11

Just Change this line $(".product-edit-submit").on('click', function(){

to :

 $(document).on('click', '.product-edit-submit', function () {

Then It will work

Upvotes: 1

Umidjon Urunov
Umidjon Urunov

Reputation: 671

I found the reason why the second time scripts are not triggering. I putted the script outside of $(document).on('ready pjax:success', function(){ //code });. After putting it inside of pjax:success, all the scripts are working again. Thanks!

Upvotes: 0

mmta41
mmta41

Reputation: 372

if your code stops after adding extra libraries try registering it in view to make sure it will execute after all libraries included:

<?php
$js = <<< 'JAVASCRIPT'
$(document).on('ready pjax:success', function(){

$(".product-edit-submit").on('click', function(){
        $.ajax({
            type : "POST",
            url : editUrl,
            data: {
                id: this.id,
                productName: productName,
                productCost: productCost,
                _csrf: csfr
            },
            success  : function(response) {
                $.pjax.reload({container:'#products-table'});
            },
            error : function(response){
                console.log(response);
            }
        });
        return false;

    });
});
JAVASCRIPT;
$this->registerJs($js,\yii\web\View::POS_READY);

Upvotes: 0

Related Questions