在 Yii 2 中使用 jQuery Mobile

Posted 2023-05-09

【中文标题】在 Yii 2 中使用 jQuery Mobile

【英文标题】：using jQuery Mobile in Yii 2

【发布时间】：2017-02-12 12:55:15

【问题描述】：

我是新的 Yii 2 开发者！ 我创建了一个如下所示的网格视图：

<?php Pjax::begin()?>
    <?= GridView::widget([
        'dataProvider'   => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\ActionColumn'],
            'id',
            'countrydate',
            'countryName'=>[
                'attribute'=>'countryName',
                'content' => function($model,$key,$index,$column) 
                      return html::a(
                '<div data-role="main" class="ui-content">'
                   .'<a href="#myPopup'.$key.'" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">'
                     .'<span id="countryNamevalue'.$key.'">'.$model->countryName.'</span>'
                   .'</a>'
                   .'<div data-role="popup" id="myPopup'.$key.'" class="ui-content">'
                     .'<h2 id="a'.$key.'">enter the new data</h2>'
                     .'<input id="myinput'.$key.'" type="text" >'
                     .'<button onclick=showcountryCode(myinput'.$key.'.value,'.$key.') >Submit</button>'
                   .'</div>'
                .'</div>'
                        ,null
                        ,$options = [
                        'id'=>'countryCode'.$key,
                        'style'=>['border'=>'none' , 'background'=>'none'],
                    ]);
                
            ],
            'countryName',
            'countrydate',
            'population',
            'fipsCode',
        ],
    ]); ?>
    <?php Pjax::end()?>

如您所见，我在 'countryName' 的 My php 文件中使用了 jQuery Mobile。 现在这张照片是我的网站Pic

但是当我更改页面时，我的页面将是这样的：enter image description here

你可以看到所有被隐藏的 jQuery MObile 行在新页面中突然显示块，我必须刷新页面来解决这个问题！！！

谁能告诉我该怎么做才能解决这个问题？

【问题讨论】：

你能告诉我们你正在运行的 JS 吗？

@D.Mill 我做到了，在我的代码行 13 中！ ，在第 13 行我启动 JQuery Mobile !!!

我看不到您加载 JS 文件的位置或它们在您的问题中包含的内容。例如showcountryCode() 定义在哪里？此外，我觉得奇怪的是，您将所有 div 和锚点都包含在锚点中。这可能会在某些平台上产生错误，因为它不符合 html5 标准

啊哈！！！ function showcountryName(name,id) var xmlhttp; if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function () if (xmlhttp.readyState == 4 && xmlhttp.status == 200) window.alert(this.responseText); document.getElementById("countryNamevalue"+id).innerHTML = name;

和：xmlhttp.open("GET","crudphp/editcountryName.php?q="+q+"&name="+name,true); xmlhttp.send(); showcountryCode 是 showCounteryName 我今天早上改名了！！！ @D.Mill

【参考方案1】：

这里的问题是，当您动态更改内容（例如通过 pjax）时，jQuery mobile 的“自动功能”不会重新加载。

为了使它工作，您需要在每次 pjax 成功事件后运行 .enhanceWithin()。我建议将以下内容添加到您的页面 JS（不是列）中：

$(document).on('pjax:success', function(data, status, xhr, options)
   $('body').enhanceWithin();
)

对于以前版本的 jQuery Mobile (.trigger('create') 而不是 .enhanceWithin()。

见：jQuery Mobile does not apply styles after dynamically adding content

【讨论】：

我将您的代码复制到我的脚本标签中，没有任何问题！！！我做对了吗？ @D.Mill

如果你在函数里面放了一个警报，当你改变页面时你会得到一个警报吗？