javascript issues

Hi,

I recently updated from v5.9.11.2 and I just realised I didn’t wait due to the change to CPT, but actually because prior to that you made some changed in javascript, I think the fix in v5.9.12.18.

Trouble is, that I’m using ajax, with setting set 1 for linklist and categories tables, and setting set2 for a category dropdown, see sidebar at link given.

In the old version the dropdown ajax results went into #linklist1, which was a desired side-effect of deficient js code. With the js changes the dropdown results go into #linklist2, which isn’t on the page. I could put it there, but I only want to show 1 linklist, meaning I’d have to detect which linklist gets changed, do content switching and what not… making things complicated.

If you’d be willing to make some minor changes to your code that’ll improve your code, and make it simpler for me. I’ll show you how, and I’ll throw in some js improvements.

First, adding a number to the function name was better, but not really necessary (redeclaring using var and reassigning function is ok in js). You could have used variables inside the function to build the element id.

Second, using document.catselect.catdropdown is tricky, as there may be more than 1 matching elements on the page (eg when using 2 dropdowns). Better use the event target, which is the select element. Also, no need to use selectedIndex option, as the selected value will be set on the select element.

What I propose is using a data attribute with the linklist id (which I can easily modify with js… but an option in the settings set to override the default number would be nice ??

<select onchange="showcategory()" class="catdropdown" data-linklist-id="1">

Then use this for showcategory. Note that event is always passed to the event handler. You can also set the function to accept 1 parameter, and replace event with your parameter. Re using data-attributes in vanilla js see this page.

function showcategory() {
  catidvar = event.target.value; // or yourparam.target.value
  linklistID = event.target.dataset.linklistId; // replaced dash with camelCase
  // or: linklistID = jQuery(event.target).data("linklist-id")
  showLinkCat2(catidvar, linklistID, 1, '');
  return false;
}

Then the ajax handler, for settings set 2. Note that you don’t seem to use ajaxobject so I removed it, as well as check if function exists.

window.showLinkCat2 = function (_incomingID, _settingsID, _pagenumber, _searchll) {
  jQuery('#contentLoading2').toggle();
  jQuery.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    data: {
      action: 'link_library_ajax_update',
      _ajax_nonce: 'xxxxxxxxxx',
      id: _incomingID,
      settings: _settingsID,
      ajaxupdate: true,
      searchll: _searchll,
      linkresultpage: _pagenumber
    },
    success: function (data) {
      jQuery('#linklist' + _settingsID).html(data);  // Note the mod
      jQuery('#contentLoading2').toggle();
    },
    error: function() {
      jQuery('#contentLoading2').toggle();
      // something went wrong.. reload page?
    }
  });
}

Feel free to test the code on my page, just use your browser dev tool to mod the dropdown to have the data attribute, get the correct ajax nonce, paste it into the function above, then paste both functions via the console.

• This topic was modified 3 years, 9 months ago by yezzz.

The page I need help with: [log in to see the link]