CODEWITHSUNDEEP
phpjqueryhtml
Hetal1311
Hetal1311

Reputation: 364

How to do I persists selected value of <li> tag on page refresh through jQuery

How Do I maintain the selected value of the ul>li in the below code HTML Code

<ul class="paginationSize">
 <li>SHOW:</li>
 <li id="paginationClass" data-paginationValue="20" class=""><a href="#">20</a>
 </li>
 <li id="paginationClass" data-paginationValue="40" class=""><a href="#">40</a>
 </li>
 <li id="paginationClass" data-paginationValue="60" class=""><a href="#">60</a>
 </li>
</ul>

jQuery Related to the PHP CODE

$(".paginationSize li").click(function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
        paginationSize =  $(this).attr("data-paginationValue");
        setGetParameter('pageSize',paginationSize);
    });

setGetParameter Function

function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    var hash = location.hash;
    url = url.replace(hash, '');
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    console.log(url);
    window.location.href = url + hash;
}

I want to maintain the active class on selected option (i.e. If I select option 40 then after page refresh option 40 should be selected and default I have to set active on value 20)

Thanks in Advance

Upvotes: 2

Views: 237

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/geow8bzu/

if( localStorage.getItem('lastSelectedli') != null ){
   $(".paginationSize li[data-paginationValue=" + localStorage.getItem('lastSelectedli') + "]").addClass('active');
}

$(".paginationSize li").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    paginationSize =  $(this).attr("data-paginationValue");
  	localStorage.setItem('lastSelectedli', paginationSize);
    //setGetParameter('pageSize',paginationSize);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="paginationSize">
   <li>SHOW:</li>
   <li data-paginationValue="20" class=""><a href="#">20</a>
   </li>
   <li data-paginationValue="40" class=""><a href="#">40</a>
   </li>
   <li data-paginationValue="60" class=""><a href="#">60</a>
   </li>
</ul>

I've used localStorage to store the last selected item.

Remove id="paginationClass", because id should be unique.

Upvotes: 1

Related Questions