CODEWITHSUNDEEP
javascriptjqueryhtmlcsssemantic-ui
Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Semantic UI dropdown multi-select removes value on refresh

I'm using ajax to bind partial view in a div#demo and initiating dropdown on ajaxstop.

After submitting the details, ajax loads partial view again to refresh the table section, and then re-initiating dropdown on ajaxstop.

this works fine for single selection dropdown, but multi-select dropdown reset the selected value.

I don't want multi-select dropdown to reset it's value.

// partial views

var viewA = `
<select class="ui dropdown">
  <option value="">Select Single Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select class="ui dropdown" Multiple>
  <option value="">Select Multiple Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="button" class="ui button primary">Submit</button>
`

var viewB = `<table class="ui celled table unstackable">
  <thead>
    <tr><th>Name</th>
    <th>Age</th>
    <th>Job</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-label="Name">James</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Jill</td>
      <td data-label="Age">26</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Elyse</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Designer</td>
    </tr>
  </tbody>
</table>`


$(document).ajaxStop(function() {
  $(".dropdown").dropdown({
    useLabels: false,
  });
});


function bindViewA() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewA").html(viewA);
}

function bindViewB() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewB").html(viewB);
}

$(document).on('click', 'button', () => {
  bindViewB();
});


bindViewA();
bindViewB();
#demo {
  padding: 30px;
}

#viewA {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

<div id="demo">
  <div id="viewA"></div>
  <div id="viewB"></div>
</div>

Steps to reproduce.

  1. Select item from both dropdowns
  2. Click on Submit button to reload details section

Upvotes: 2

Views: 1080

Answers (3)

Yogen Darji
Yogen Darji

Reputation: 3300

You can set the dropdown without initialize using setting like below

$(".dropdown").dropdown('setting', {
    useLabels: false,`
})'


// partial views

var viewA = `
<select class="ui dropdown">
  <option value="">Select Single Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select class="ui dropdown" Multiple>
  <option value="">Select Multiple Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="button" class="ui button primary">Submit</button>
`

var viewB = `<table class="ui celled table unstackable">
  <thead>
    <tr><th>Name</th>
    <th>Age</th>
    <th>Job</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-label="Name">James</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Jill</td>
      <td data-label="Age">26</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Elyse</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Designer</td>
    </tr>
  </tbody>
</table>`




$(document).ajaxStop(function() {
  $(".dropdown").dropdown('setting', {
    useLabels: false,
    forceSelection: false,
    sortSelect: true,
    //clearable: true,
    fullTextSearch: true,
    onHide: function() {
      //cleanDdlOnHide(this);
    }
  });
});

function bindViewA() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewA").html(viewA);
}

function bindViewB() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewB").html(viewB);
}

$(document).on('click', 'button', () => {
  bindViewB();
});


bindViewA();
bindViewB();
#demo {
  padding: 30px;
}

#viewA {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

<div id="demo">
  <div id="viewA"></div>
  <div id="viewB"></div>
</div>

Upvotes: 1

Marco &#39;Lubber&#39; Wienkoop
Marco &#39;Lubber&#39; Wienkoop

Reputation: 85

This seems to be fixed in the community fork https://fomantic-ui.com

So try to change the css + js accordingly

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

I prepared a working jsfiddle using your code here https://jsfiddle.net/sezL041k/

Upvotes: 1

vqf
vqf

Reputation: 2628

I have not found the expected behavior of the dropdown function in semantic. However, you can make do with a little patch on the ajaxStop function: 

$(document).ajaxStop(function() {
  var psel = [];
  $(".dropdown [multiple]").each(function(){
    psel.push($(this).val());
  });
  $(".dropdown").dropdown({
    useLabels: false
  });
  $(".dropdown [multiple]").each(function(){
    $(this).val(psel[0]).trigger('change');
    psel.shift();
  });
});

This should work even if there are several multiple dropdowns, as long as they are always selected by jquery in the same order. If not, you can always make psel a hash and give each multiple selector an id.

Upvotes: 0

Related Questions