CODEWITHSUNDEEP
javascriptjquery
Shibbir
Shibbir

Reputation: 2031

Page is constanctly loading when I choose a option using jQuery ddSlick JS

I am using this plugin to show the Dropdown flags on my website:

designwithpc.com/Plugins/ddSlick

Now, the HTML code is like that:

<?php   
$object   = get_queried_object();
$slug     = $object->slug;
?>
<select id="countryFlags">
     <option value="">--Choose Country--</option>
     <option value="somalia" <?php if( isset( $slug ) && $slug == 'somalia' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/somalia-2.svg" data-description="&nbsp;">Somalia</option>
     <option value="ethiopia" <?php if( isset( $slug ) && $slug == 'ethiopia' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/ethiopia-1.svg"  data-description="&nbsp;">Ethiopia</option>
     <option value="kenya" <?php if( isset( $slug ) && $slug == 'kenya' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/kenya-1.svg"  data-description="&nbsp;">Kenya</option>
     <option value="somaliland" <?php if( isset( $slug ) && $slug == 'somaliland' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/somaliland-1.svg"  data-description="&nbsp;">Somaliland</option>
     <option value="djibouti" <?php if( isset( $slug ) && $slug == 'djibouti' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/djibouti.png"  data-description="&nbsp;">Djibouti</option>
</select>

and jQuery code is

$('#countryFlags').ddslick({    
     width:150,    
     selectText: 'Select your preferred social network',
     imagePosition:'left',
     defaultSelectedIndex : null,
     onSelected: function(selectedData){
          if( selectedData.selectedData.value) {
               console.log( selectedData.selectedData.value );
               window.location.href = 'mysite.com/advert-location/'+selectedData.selectedData.value;
          }
     }   
});

What I need:

I want when people choose any selection then it's redirecting to a URL + the selected value

For example, You choose Kenya then it should redirect to you to this URL:

mysite.com/advert-location/kenya

Now, As you can see the script that it's by default getting the value of the selected option when the page is a load that's why my page is constantly loading and loading with my given condition on the jQuery part.

It's should be load one time.

is there anyting I am missing?

Upvotes: 0

Views: 92

Answers (1)

Swati
Swati

Reputation: 28522

I have search but didn't find any change event that can be apply to ddSlick so as an alternative you can use localStorage and store some value in it whenever your page gets loads for the first time and check if the value in storage is null or not depending on that you can redirect to other page.

Your jquery code will look like below :

$(document).ready(function() {

  localStorage.clear(); //clear previous data on page load

  $('#countryFlags').ddslick({
    width: 150,
    selectText: 'Select your preferred social network',
    imagePosition: 'left',
    defaultSelectedIndex: null,
    onSelected: function(selectedData) {
      if (selectedData.selectedData.value) {
        console.log(selectedData.selectedData.value);
        checking(selectedData.selectedData.value); //call function
      }
    }
  });


  function checking(value) {
    //if there is no value in localStorage
    if (localStorage.getItem("save") == null) {
      //don't redirect
      console.log("i am in don't redirect")
      var save = "firsttime";
      console.log(save);
      localStorage.setItem("save", save); //add data to storage


    } else {
      console.log("i am in redirect");
      //redirect
      window.location.href = 'mysite.com/advert-location/' + value;

    }

  }
})

Upvotes: 1

Related Questions