CODEWITHSUNDEEP
sharepointsharepoint-2010datatablessharepoint-2013yadcf
user1508773
user1508773

Reputation: 51

SharePoint Page Sticks to Top/Won't Scroll Down After Clearing YADCF Select2/Custom Filter Choices

Using:

YADCF filters work. But after a user selects a filter entry, the page gets stuck at the top. The scrollbar won't work. You can't move the page at all. If user selects a filter type and then refreshes the page, scrolling works with a filter type still in the box. Press clear and scrolling still works. Select a new filter entry and scrolling breaks.

This does not happen to the DataTables free text search box. It only happens when the YADCF filters are manipulated. So there must be a fix for the YADCF or Select2 code.

Alternatively, this might explain what's happening, but I can't access the master page. Wondering if this could be a work around but I don't know how to implement the call.

Any thoughts or ideas would be appreciated. Many thanks.

<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/moment-with-locales.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/select2.full.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/chosen.jquery.min.js"></script>


<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.yadcf.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/select2.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/chosen.min.css">

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Name</th><th>No.</th><th>Date</th><th>Memo</th><th>Classification</th><th>Class2</th><th>Class3</th> </thead>
</table>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push(ExecuteOrDelayUntilScriptLoaded(AMDB, 'sp.ui.pub.ribbon.js'));


function AMDB(){ 

var call = $.ajax({
                url: "https:/mysite/_vti_bin/listdata.svc/AM?$select=Title,Number,Date,Name,Classification/Classification,Class2/Class2,Class3/Class3&$expand=Classification,Class2,Class3",
                async: "true",
                type: "GET",
                dataType: "json",
                headers: {Accept: "application/json;odata=verbose"}
            });//close ajax call

call.done(function (data,textStatus, jqXHR){

        myData = data.d.results;
        var dtTable = $('#example').DataTable({
        responsive: true,
        data: myData,
        columns:[
            {data:"Title"},
            {data:"Number"},
            {data:"Date","render": function (data, type, full, meta) {return moment.utc(data, "x").format('l');}},
            {data:"Name","render":function(data, type, full, meta){return'<a href="https:/mysite/AM/'+data+'">Click here</a>';}},
            {data: "Classification.results[, ].Classification"},
            {data: "Class2.results[, ].Class2"},
            {data: "Class3.results[, ].Class3"}
            ],
        stateSave: true

        }); //close DataTable

Upvotes: 2

Views: 937

Answers (1)

Benjamin Freitag
Benjamin Freitag

Reputation: 603

The issue is caused by SharePoint element-ids having an invalid $-character that's then used for jQuery event-namespaces. Adding the eventhandler works but removing it fails as the eventhandler it's not found anymore. The $-character would need to be escaped or removed from the event-namespace.

I don't have a proper solution but a workaround that works in SharePoint 2013:

var initialSelect = $("#" + fieldSchema.Name + "_" + fieldSchema.Id + "_\\$LookupField");

initialSelect.select2();

// workaround for issue causing invalid-namespace in event-handlers - select2 uses use the container-element.id as event-namespace but sharepoint has $ in element-id that's not valid
initialSelect.on("select2:close", function (e) {
  $("div#s4-workspace.ms-core-overlay").off('scroll.select2.select2-' + e.target.id.replace("$", "\\\$"));
});

Upvotes: 0

Related Questions