Pass pjax id to modal javascript

Yii 2.0 General Discussions
1

I need to pass the pajax id to my modal view’s javascript beforeSubmit event and struggling to get the right syntax.

Currently I was passing the pajax id to a hidden control on the modal and retrieving it in the event, this works and I’ve confirmed it is correct, but I can’t get the $.pjax.reload({container: statement to work with it.

Below is one of my many attempt.

var pjaxContainer = $('#pjaxId').val();
console.log(pjaxContainer);
$.pjax.reload({container:"#"+pjaxContainer, timeout:5000, async:false});  //This is the line I need help with to accept a variable for the container.

Update 1
Below are few attempts that I tried that failed

var pjaxContainerName = $('#pjaxId').val();
var pjaxContainer = $('#' + pjaxContainerName);
$.pjax.reload({
    // static pjax ids
    // *********************************
    // container: '#projectsListGrid', // Normal way that works

    // dynamic pjax ids - can't get this approach to work
    // *********************************
    // container: "#"+pjaxContainer.attr('id'), //no error, but whole page reloads
    // container: pjaxContainerName, //uncaught exception: the container selector 'projectsListGrid5d2fa662b163c' did not match anything
    // container: "#"+pjaxContainerName, //no error, but whole page reloads
    // container: pjaxContainer, // uncaught exception: expected string value for 'container' option; got object
    // container: function(){ return '#'+pjaxContainerName; }, // uncaught exception: expected string value for 'container' option; got function
    timeout:5000,
    async:false
});

The reason that it is dynamically named is to get around the issue with modal calls make multiple requests. My index view for the creation of the pjax container is

<?php
$uniqid = uniqid();
Pjax::begin([
        'id'=>'projectsListGrid'.$uniqid,
        'enablePushState' => false,
        'options' => ['data-pjax' => true],
        'timeout' => 5000,
    ]); 
?>
2

So, I switched over to using session variables to transfer my id to my modal _form and it does generate the proper javascript code with the proper pjax id, but the pjax reload reloads the entire page and not just the pjax container. I must be missing a setting in my Pjax::begin? Can anyone shed any light on this whole thing?

I have searched my html code and the ids all match

<div id="projectsListGrid5d2fc75ee5395" data-pjax-container="" data-pjax-timeout="9000" data-pjax="">
...
$.pjax.reload({container:'#projectsListGrid5d2fc75ee5395', timeout:9000, async:false});

but it still reloading the entire page, why, oh why?

I also tried using a class CSS selector for the container

<?php
$uniqid = uniqid();
Pjax::begin([
        'id'=>'projectsListGrid'.$uniqid,
        'enablePushState' => false,
        'options' => ['data-pjax' => true, 'class'=>'projectsPjaxContainer'],
        'timeout' => 5000,
    ]); 
?>

in conjunction with

...
$.pjax.reload({container:'.projectsPjaxContainer', timeout:9000, async:false});

and that didn’t work either (the entire page reloads)?

It’s actually amazing. I’ve made my pjax Id set by a php variable. If I give it a textual value it all works just fine, the minute I use the uniqid() it no longer works. I change nothing else! Sadly, I’m stuck. To me it seems like some type of bug, but then again, I’m new to all this, so it could easily be something I’m doing.