Yii2: Refresh page with same position and pass var through url using embed function

Question

I have a dropdown selector view that is required to pass a var through url refreshing the page.

$data = ["line" => "Linea", "column"=>"Columnas", "bar"=>"Barras", "pie"=>"Pastel",  "scatter" => "Puntos", "area" => "Area"];

$baseUrl= Url::current(['type'=>null]);

echo \kartik\select2\Select2::widget([
    'name' => 'Tipo',
    'data' => $data,
    'options' => [
        'placeholder' => 'Selecciona un tipo'
    ],
    'pluginEvents'=>[
        "select2:select" => "function(e) { 
            location='$baseUrl&type='+$(this).val();
        }",
     ]
]);

I am able to pass variable and refresh page with the current function I am using. But I'd like page refresh on the same position.

I have read about. I have tried some answers from others who were asking for refresh pages. Unfortunately answers do not work correctly for me, since they are not using yii2. It's just that I am not able to set that functions correctly as embed functions in

'pluginEvents'=>[
    "select2:select" => ""
]

How it works:

click handlers are applied to the links that should maintain the scrollbar position between page loads
when one of those links is clicked, the click handler grabs the scroll position from the window or document object and stores it as a string on the window.name object and then allows the new page to load
when a page loads, the window.name object is checked to see if a scroll position has been stored in it, and if it has one, it scrolls to that position.

Generally, it uses the anchor links and uses the click event to bind the sneak functionality and then returns true to continue with the redirection to the link target.

If you are using other than anchor element

In case of a drop-down or an element other than an anchor link it is a bit tricky as it is a drop-down you need to use the onChange handler twice once for running the sneak functionality using ScrollSneak.sneak() function and then for the redirection.

See the script below you can create 2 pages on your localhost lets say sneak-page.html & sneak-page2.html and copy the following code into those 2 pages just change some text so that you know when the page changes. I have added margin from top and bottom via CSS so that scroll is visible. Change the scroll position and then try selecting an option from the drop-down to change the page location and notice the scroll position it will be the same position as it was before changing the page via drop-down.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="sneak/screen.css" />
    <script src="https://mrcoles.com/media/js/scroll-sneak.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        body {
            margin-top: 450px;
            margin-bottom: 150px;

        }
    </style>
</head>

<body>
    <select id="changer">
        <option>Please select</option>
        <option value="http://localhost/sneak-page.html">PAGE 1</option>
        <option value="http://localhost/sneak-page2.html">PAGE 2</option>
    </select>


    <!-- SCROLL SNEAK JS: you can change `location.hostname` to any unique string or leave it as is -->
    <script>
        (function () {
            var sneaky = new ScrollSneak(location.hostname);
            // document.getElementById('prev').onclick = sneaky.sneak;
            $("#changer").on('change', sneaky.sneak);
            $("#changer").on('change', function () {
                location = $(this).val();
            });
        })();
    </script>
    <!-- END OF SCROLL SNEAK JS -->

</body>

</html>

Making it work with Select2

if you try same logic of binding the change function i.e select2-select it won't work because it uses an array for options and as it will override the previous index with the latest one as the index/key is same for instance try adding these alerts only last one will work

'pluginEvents'=>[
     "select2:select" => "function(e) { alert('hello')}",
     "select2:select" => "function(e) { alert('brother')}",
]

It will show you only alert('bother'), and not the first one.

To make it work with the select 2 you should use these 2 events

select2-selecting: Triggered before a result is selected. This event can be prevented.
select2-select : Triggered whenever a result is selected. select2:selecting is fired before this and can be prevented.

So your pluginEvents for select2 should look like

'pluginEvents'=>[
     "select2:selecting" => "function(e) { sneaky.sneak}",
     "select2:select" => "function(e) { location='$baseUrl?type='+$(this).select2(\"data\")[0].text}",
 ]

Just make sure you are loading the source script on top and initialize it using

var sneaky = new ScrollSneak(location.hostname);

so that sneaky is not undefined inside the select2 events.

Yii2: Refresh page with same position and pass var through url using embed function

1 Answers1

How it works:

If you are using other than anchor element

Making it work with Select2