usage of pjax

Yii 2.0 General Discussions
1

I’ve got trouble understanding the pjax widget. Here is my project:

I’ve got a view on which I render a container with some icons for files:




Pjax::begin();

echo "<div class='container'>";

foreach ($model->files as $file)

{

    $file->renderIcon();

}

echo "</div>";

Pjax::end();

On the same page I’ve got a fileupload widget:




echo FileInput::widget([

        'name' => 'file[]',

        'options'=>[

            'multiple'=>true

        ],

        'pluginOptions' => [

            'uploadUrl' => Url::to(['/file/file-upload']),

            'uploadExtraData' => [

                'note_id' => $model->id,

            ],

            'maxFileCount' => 1000,

        ]

    ]);

This widget uploads files to the database via ajax. Now I want to reload the first container so the newly uploaded files show up. How do I trigger the ajax request on the first widget?

Thanks.

2

I’m not familiar with the upload widget. There must be a way to call external JS functions depending on success, fail, etc.

Edit: I went looking for more information on this plugin from Kartik/Krajee… looks like a great piece of code. Try this:




$('#input-id').on('fileuploaded', function(event, data, previewId, index) {

    $.pjax.reload({container:"#yourPjaxContainer"});

    console.log('File uploaded triggered');

});
3

Thanks, that works. The plugin also seems to have an option to specify these event functions directly:

This is my new code for the fileupload widget:




echo FileInput::widget([

        'name' => 'file[]',

        'id' => 'fileinput',

        'options'=>[

            'multiple'=>true

        ],

        'pluginOptions' => [

            'uploadUrl' => Url::to(['/file/file-upload']),

            'uploadExtraData' => [

                'note_id' => $model->id,

            ],

            'maxFileCount' => 1000,

        ],

        'pluginEvents' => [

            'fileuploaded' => "function(event, data, previewId, index) {\$.pjax.reload({container:'#files'});}",

        ],

    ]);