using jQuery Mobile in Yii 2

Question

i'm a new Yii 2 develpoer ! i create a gridview like below :

<?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()?>

as you can see i use jQuery Mobile in My php file in 'countryName' . now this picture is my website Pic

but when i change the page my page will be somthing like this : enter image description here

as you can see all of the jQuery MObile line that were hidden suddenly show block in the new page and i have to refresh the page to fix this !!!

can anybody tell me what should i do to fix this ?

@D.Mill i did it , in my code line 13 !! , in line 13 i start JQuery Mobile !!! — ali, Oct 05 '16 at 05:56
I fail to see where you load the JS files or what they contain in your question. For instance where is `showcountryCode()` defined? Also I find it odd that you have divs and anchors all included inside an anchor. It's possible that this produces errors on some platforms as it is not html5 compliant — Pomme.Verte, Oct 05 '16 at 06:08
aha !!! `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; } }` — ali, Oct 05 '16 at 06:14
and : `xmlhttp.open("GET","crudphp/editcountryName.php?q="+q+"&name="+name,true); xmlhttp.send(); }` the showcountryCode is showCounteryName i change the name this morning !!! @D.Mill — ali, Oct 05 '16 at 06:15
ok I'm starting to understand what the issue is here. What version of yii2-pjax do you have installed? — Pomme.Verte, Oct 05 '16 at 06:18
i really don't know the Version of Pjax !!!! i just add the Pjax Line into my code @D.Mill — ali, Oct 05 '16 at 06:22
"name": "bower-asset/yii2-pjax", "version": "v2.0.6", +++ "bower-asset/yii2-pjax": "~2.0.1", +++ @D.Mill — ali, Oct 05 '16 at 06:43
ok one last question. How to you bind the jquery mobile behaviors to `
` ? You must have some sort of onclick() JS to make the modal show? Or is this auto? — Pomme.Verte, Oct 05 '16 at 06:46
i don't use any onclick beacalus jQuery mobile did it auto @D.Mill — ali, Oct 05 '16 at 07:04

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The problem here is that jQuery mobile's "auto features" do not reload when you change content dynamically (via pjax for instance).

In order for this to work you will need to run .enhanceWithin() after every pjax success event. I suggest adding the following to your page JS (not column):

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

For previous version of jQuery Mobile (< 1.4) use .trigger('create') instead of .enhanceWithin().

See : jQuery Mobile does not apply styles after dynamically adding content

edited May 23 '17 at 10:27

Community

1
1

answered Oct 05 '16 at 12:52

Pomme.Verte

1,782
1
15
32

i copy your code into my script tag , nothing happlend !!! did i do it in right way ?? @D.Mill – ali Oct 05 '16 at 13:01
if you put an alert inside the function do you get an alerte when you change pages? – Pomme.Verte Oct 05 '16 at 13:38

using jQuery Mobile in Yii 2

1 Answers1