CODEWITHSUNDEEP
javascriptdropdownreset
dythe
dythe

Reputation: 841

Trying to create a reset filter button with javascript not working

I'm trying to create a reset filter button which resets the dropdown box without reloading the page.

The reset filter button manages to reset the dropdown box back to default without reloading the page but after resetting the dropdown box, the html in the dropdown box doesn't work anymore.

index.php

 <button style="width: 100%; height: 40px" name="resetFilter" id="resetFilter">Reset filters</button>

          <section class="main2">
        <div class="wrapper-demo2">
          <div id="dd2" class="wrapper-dropdown-2" tabindex="1">
            <span class="transport">Select mode of transport</span>
              <ul class="dropdownTransport" tabindex="1">
                  <li value="Driving"><a href="#">Driving</a></li>
                  <li value="Transit"><a href="#">Transit</a></li>
              </ul>
          </div>
        ​</div>
      </section>
    <script src="js/dropdown2.js"></script>
    <script src="js/index.js"></script>

index.js

$(function(e) {
   $('#resetFilter').click(function(e) {   
      var dropdownClone2 = $(".wrapper-demo2").clone();
      $(".wrapper-demo2").html(dropdownClone2);
      e.preventDefault();
    });

dropdown2.js

  function DropDown2(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span.transport');
    this.opts = this.dd.find('ul.dropdownTransport > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
  }
  DropDown2.prototype = {
    initEvents : function() {
      var obj = this;

      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
      });

      obj.opts.on('click',function(){
        var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text('Option: ' + obj.val);
      });
    },
    getValue : function() {
      return this.val;
    },
    getIndex : function() {
      return this.index;
    }
  }

  $(function() {

    var dd2 = new DropDown2( $('#dd2') );

    $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-2').removeClass('active');
    });

  });

Upvotes: 0

Views: 1088

Answers (1)

Syscall
Syscall

Reputation: 19764

First, add a data-initial-value into your dd2 object to reset the span:

<div id="dd2" class="wrapper-dropdown-2" tabindex="1" data-initial-value="Select mode of transport">

When you clone your dropdown, all listeners are removed. So you have to init again, and clone the children :

$('#resetFilter').click(function(e) {   
  var dropdownClone2 = $('.wrapper-demo2').children().clone();
  $(".wrapper-demo2").html(dropdownClone2);
  new DropDown2( $('#dd2') ); // initialize the new DropDown
  e.preventDefault();
});

And in the DropDown constructor :

function DropDown2(el) {
   this.dd = el;
   this.placeholder = this.dd.children('span.transport');
   this.placeholder.html(this.dd.attr("data-initial-value"));

Here is the full HTML/JS (all in one file) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jquery.min.js"></script>
</head>
<body>
     <button style="width: 100%; height: 40px" name="resetFilter" id="resetFilter">Reset filters</button>
        <section class="main2">
        <div class="wrapper-demo2">
          <div id="dd2" class="wrapper-dropdown-2" tabindex="1" data-initial-value="Select mode of transport">
            <span class="transport">Select mode of transport</span>
              <ul class="dropdownTransport" tabindex="1">
                  <li value="Driving"><a href="#">Driving</a></li>
                  <li value="Transit"><a href="#">Transit</a></li>
              </ul>
          </div>
        ​</div>
      </section>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(function(e) {
       $('#resetFilter').click(function(e) {
          var dropdownClone2 = $('.wrapper-demo2').children().clone();
          $(".wrapper-demo2").html(dropdownClone2);
          var dd2 = new DropDown2( $('#dd2') );

          e.preventDefault();
        });
    });

    function DropDown2(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span.transport');
    this.placeholder.html(this.dd.attr("data-initial-value"));
    this.opts = this.dd.find('ul.dropdownTransport > li');
    this.opts.removeClass("selected"); // <<<< NEW
    this.val = '';
    this.index = -1;
    this.initEvents();
  }
  DropDown2.prototype = {
    initEvents : function() {
      var obj = this;

      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
      });

      obj.opts.on('click',function(){
        var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text('Option: ' + obj.val);
        obj.opts.removeClass("selected"); // <<<< NEW
        opt.addClass("selected"); // <<<< NEW
      });
    },
    getValue : function() {
      return this.val;
    },
    getIndex : function() {
      return this.index;
    }
  }

  $(function() {

    var dd2 = new DropDown2( $('#dd2') );

    $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-2').removeClass('active');
    });

  });
    /*]]>*/
    </script>
</body>
</html>

Upvotes: 1

Related Questions