当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Why is Loudev jQuery multiselect producing duplicates?

问题描述:

The vision is for the user to select a primary bank branch through a textbox search that issues a jQuery AJAX request. If the user then chooses to have additional branch access then a multiselect (http://loudev.com/) is provided later on in the form to allow for selection of one or more additional branches.

The primary branch cannot appear in the additional branches multiselect because the user might pick the same branch twice.

A crucial scenario: if the user goes back, clears out primary branch A and chooses primary branch B instead then the AJAX must update the additional branches multiselect accordingly, where now B is the one that won't appear. This can be repeated indefinitely.

Here's the primary branch search box and then the multiselect box:

<div class="form-group">

@Html.Label("Search", new { @class = "col-sm-2 control-label" })

<div class="col-sm-10 searchBranchBox">

@Html.TextBoxFor(model => model.SearchBranch, new { @class = "form-control", @type = "search", placeholder = "Search for a branch by ID, name or division" })

</div>

</div>

<div class="form-group additionalBranchAccessSelection">

@Html.Label("Select Branches", new { @class = "col-sm-2 control-label" })

<div class="col-sm-10 selectBranches" style="margin-top: 8px">

<select class="searchable" multiple="multiple" id="AdditionalBranchAccessSelection" name="@Model.AdditionalBranchAccessSelection">

</select>

</div>

</div>

The returned AJAX data will populate the above select tag with option tags. Here's the AJAX request function:

function ajaxFilterAdditionalBranchWebDevDb(searchTerm, event, ui) {

$.ajax({

url: "/NewUserForm/FilterAdditionalBranches",

type: "POST",

dataType: "json",

data: {

query: searchTerm,

__RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()

},

success: function (data, status, xhr) {

console.log(data);

var output = [];

$.each(data, function (key, value) {

output.push("<option value='" + key + "'>" + value.branchName + "</option>");

});

$("#AdditionalBranchAccessSelection").html(output.join(""));

$("#AdditionalBranchAccessSelection").multiSelect();

}

});

}

That AJAX function is called with the search box's autocomplete:

$searchBranch.autocomplete({

minLength: 3,

source: .............,

focus: ..............,

select: function (event, ui) {

ajaxFilterAdditionalBranchWebDevDb(ui.item.label, event, ui)

return false;

}

})

.autocomplete("instance")._renderItem = function (ul, item) {

return $("<li>")

.append("<a>" + item.label + "</a>")

.appendTo(ul);

};

});

Here's the function that's called to clear out the search box and remove the multiselect created by Loudev's library:

$searchBranch.on("input propertychange paste", function () {

if ($searchBranch.val() == "") {

// What Loudev's library does is hides your default select tag filled with option tags and then in its place creates a custom multiselect div of class .ms-container with an id of #ms-WhateverYourPriorSelectTagIdWas.

$("#ms-AdditionalBranchAccessSelection").remove();

}

});

The issue is that Loudev's multiselect list items do NOT get removed when the above clear function is called when I clearly called the .remove() method on the div id that contains the multiselect. Data retrieved from every subsequent AJAX request is instead tagged on to the multiselect list.

For example, you have 3 branches:

California |

New York |

Texas

You search and select California as the primary branch, your multiselect list will show:

New York |

Texas

Fine. You then clear out California, go search and select New York as your primary branch..... now the duplicates appear in the multiselect list:

New York |

Texas |

California |

Texas

Clear out New York and select Texas, the multiselect duplicates grow:

New York |

Texas |

California |

Texas |

California |

New York

1) Why do the duplicates appear?

2) If you click on a duplicate row item, why does the following error appear?

3) How can the multiselect list be fixed?

Uncaught TypeError: Cannot read property 'length' of undefined

at Function.map (jquery-1.11.3.min.js:3)

at MultiSelect.select (jquery.multi-select.js:361)

at HTMLLIElement.<anonymous> (jquery.multi-select.js:76)

at HTMLUListElement.dispatch (jquery-1.11.3.min.js:7)

at HTMLUListElement.r.handle (jquery-1.11.3.min.js:7)

网友答案:

How Loudev's multiselect library works is that it first hides your select tag filled with option tags and then converts them to something resembling:

<div class="ms-container" id="ms-WhateverYourOriginalIdWas">
    <div class="ms-selectable">
        <ul class="ms-list" tabindex="-1">
            <li class="ms-elem-selectable" id="48-selectable"><span>Item 1</span></li>
            <li class="ms-elem-selectable" id="50-selectable"><span>Item 3</span></li>
        </ul>
    </div>
    <div class="ms-selection">
        <ul class="ms-list" tabindex="-1">
            <li class="ms-elem-selection" id="49-selection"><span>Item 2</span></li>
        </ul>
    </div>
</div>

How I fixed the duplicates issue is within the function that clears the branch search box I added:

$(".ms-list").empty();
$(".ms-container").empty();
$(".ms-container").remove();

Empty everything within the list. Next empty everything within the container, which holds the lists. Finally, get rid of the container altogether.

The solution seems overkill but it works.

分享给朋友:
您可能感兴趣的文章:
随机阅读: