• Resolved ctrlcs

    (@ctrlcs)


    Hello,

    I have created a website on which expandable buttons that show information loaded from another file are used.

    The script in use preloads the external file that contains the information on page load. Then, when a button is clicked, it checks whether or not the information is available and, if it is, the button expands.

    The problem is that, even though the file is successfully preloaded, it takes at least 3 seconds until the buttons that have been clicked are expanded. For what it is worth, let me say that this script works perfectly on static websites, so it is possible that I need to take some WP-related factor that I am not aware of into account. Let me add that I have just started using WP, so I am sure there are a lot of things that I still need to learn.

    The script used is the following:

    // Load external document on page load
    $(document).ready(function () {
     $.ajax({
      url: "absolute/path/to/info/file",
      dataType: "html",
     });
    });
    
    // Show button content on click
    $("a.ajax-link").click(function (event) {
     event.preventDefault();
     event.stopPropagation(); // Prevent from expanding
    
     var infoButton = $($(this).attr("href"));
    
     if (!$(infoButton).hasClass("show")) {
    
      // Check if the button is collapsed
      if ($(infoButton).attr("data-loaded") != "true") {
       var loadingIcon = $(this).find(".icon-spin"); // Show loading icon
       loadingIcon.css("visibility", "visible");
    
       var thisLink = $(this);
       var targetUrl = thisLink.attr("data-href");
       var target = thisLink.data("ajaxtarget");
    
       // Load data
       $(target).load(targetUrl, function () {
        $(infoButton).collapse("show"); // Expand
        $(infoButton).on("show.bs.collapse", function () {
         $(this).addClass("collapsing");
        });
        loadingIcon.css("visibility", "hidden");
       });
      } else {
       $(infoButton).collapse("hide");
       $(infoButton).on("hide.bs.collapse", function () {
        $(this).removeClass("collapsing");
       });
      }
      noMoreAjax();
     } else {
      $(infoButton).collapse("hide");
      $(infoButton).on("hide.bs.collapse", function () {
       $(this).removeClass("collapsing");
      });
     }
    });
    
    // FUNCTIONS
    function noMoreAjax(item) {
     var linkItem = $(item);
     linkItem.removeClass("ajax-link");
     linkItem.addClass("link-prevent");
     linkItem.unbind("click");
     $(linkItem).click(function (event) {
      event.preventDefault();
     });
    }

    Could you tell me if there is something I can do to make the buttons expand without that delay when clicked?

    If there is any other piece of information that could be of use to you, please let me know. Thank you very much for your time.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Depending on the file type, preloading that way may not be effective. If the file could be preloaded, why couldn’t it be placed into page content as it’s being output? The data can remain hidden until an event exposes it. UX doesn’t change, but there’s no need to fetch data after the fact, it’s already in place.

    Thread Starter ctrlcs

    (@ctrlcs)

    Thank you for your response.

    I don’t know if this piece of information could be of use to you or someone else, but I’m adding it just in case: The content of the buttons has been included in an ordinary WP post that acts as some sort of a database.

    Thank you for the suggestion. Unfortunately, I don’t know enough about jQuery to adjust the script myself, but I will try to find some way to do this online.

    Thread Starter ctrlcs

    (@ctrlcs)

    Let me say that I just checked the network tab, and it appears that the reason for this delay is the fact that the file gets loaded both on page load and every time a button is clicked, for some reason. I just don’t know what the exact culprit is.

    Thread Starter ctrlcs

    (@ctrlcs)

    Problem solved; I just had to make some adjustments to the script. The problem didn’t really have anything to do with WP after all, it just got a bit more obvious on WP.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Slow execution of jQuery script’ is closed to new replies.