Hi… I’ve searched through a number of somewhat similar questions but have been unable to find a clear resolution. I have good luck with widgets on a standard view, however, when I try to display one by updating a section of the DOM via AJAX, I seem to have trouble. Is there a clear and concise example of that somewhere I’m missing perhaps?
I put together a small live example of my problem at this coming link using a DatePicker as my widget example. I have similar results with both the Kartik and JUI DatePickers.
https://glacier.nationalparkschat.com/web/test/index
The initially loaded widget works great. The widget that loads from pushing the “Push Me” button does load, but does not display properly. That’s my issue.
The widget from the url response that is used for the ajax updating does work on it’s own, so I was surprised it didn’t work in the main view. Here is a link to the url for the ajax call that works good on its own.
https://glacier.nationalparkschat.com/web/test/showdatepicker
I did give both widgets their own names and unique id’s in case that’s an issue.
Here are the controller and the 2 views used in this example.
Controller:
<?php
namespace app\controllers;
use yii\web\Controller;
class TestController extends Controller
{
public function actionIndex()
{
return $this->render('index', []);
}
public function actionShowdatepicker()
{
return $this->renderAjax('showdatepicker',[]);
}
}
index View
<?php
// use yii\jui\DatePicker;
use kartik\date\DatePicker;
?>
<style>
table, th, td {
border: 2px solid black;
}
</style>
<br><br>
<table>
<tr><td><b>This widget works well</b></td><td><b>Push Button to load next widget</b></td><td><b>This widget loads but doesn't display correctly when used</b></td></tr>
<tr>
<td>
<div id='default'>
<?php
echo DatePicker::widget([
'name' => 'original_widget',
'type' => DatePicker::TYPE_COMPONENT_PREPEND,
'value' => '8/24/2022',
'id' => 'original_widget_id',
'pluginOptions' => [
'autoclose' => true,
'format' => 'dd/M/yyyy'
]
]);
?>
</div>
</td>
<td>
<button type="button" class="myglacier-arrow-button" onclick="showDetails()">Push Me</button>
</td>
<td>
<div id='newDiv'>
New DatePicker will show here
</div>
</td>
</tr>
</table>
<script>
function showDetails() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const details = document.getElementById('newDiv');
details.innerHTML = this.responseText;
}
xhttp.open("GET", "/web/test/showdatepicker");
xhttp.send();
}
</script>
showdatepicker AJAX View
<?php
//use yii\jui\DatePicker;
use kartik\date\DatePicker;
echo DatePicker::widget([
'name' => 'new_widget',
'type' => DatePicker::TYPE_COMPONENT_PREPEND,
'value' => '9/25/2023',
'id' => 'new_widget_id',
'pluginOptions' => [
'autoclose' => true,
'format' => 'dd/M/yyyy'
]
]);
?>
Loaded!
If something jumps out at you, great! Or if there’s some existing documentation that I seem to have missed, I’ll be happy to check that out. I appreciate any help you may have on this one! I’ll provide a good example with the resolution as well once I have one to post as well.
I’m hoping I’m just overlooking something simple here perhaps, but I admit I’m a little baffled at the moment. I’m open to any and all thoughts here…
Thanks again!