0

I am attempting to add an ajax function to a third-party javaScript code. The function is working… but too well… or at least too many times. My research and troubleshooting has led me to determine that the ajax "script" (function) is loading too many times.

I am not a javaScript programmer; though more and more I find the need to use ajax functions within my current code solutions. My solution is — obviously — to become a javaScript programmer. However, I am having some trouble grasping function context, and it has led to the issue I describe above.

Please tell me where/how to position this function so that it loads only for the current instance of the user's content. I know that I am close.

All of the existing answers to questions on this topic involve methods that have been deprecated in the jQuery codex: unbind, die, live, etc... I am using the on method and thus I am hoping for a more up-to-date answer.

Here is a summary of the content, :

(function ($) {
    /* initialize */
    var content = function(obj, settings) {
        /* populate content */
        var populate_content = function(el){
            var el_index = instance_vars.elem_index;
            if(content_curr_opts.download) {
                if(el.download) {
                    $('.content_download').show();
                    $('.content_download').on('click' , function(){ // AJAX query:
                        // for some reason, this is being fired for EACH content image that has been loaded:
                        // this is because it is LOADED every time the content image is changed
                        // when this button is clicked, the multiple instances (of this ajax function) all fire at once
                        var datumA = datum1NeededForAjaxFunction;
                        var datumB = datum2NeededForAjaxFunction;
                        $.ajax({ // POST to server using $.ajax:
                            url:    '/ajaxScripts/foobar.php',
                            type:   'POST',
                            dataType: 'json',
                            data: {
                                'dlLink': datumA,
                                'dlName': datumB
                            },
                            success: function(data){
                                // do the success things
                            }
                        });
                    });
                } else {
                    $('.content_download').hide();  
                }
            }
        };
    };
})(jQuery);

jQuery is, of course, active.

Please let me know if there is any other info that I might provide.

Thanks in advance.

evolutionxbox
  • 3,932
  • 6
  • 34
  • 51
Parapluie
  • 714
  • 1
  • 7
  • 22
  • You never call `content()` so it shouldn't be executing at all. – Barmar Sep 13 '21 at 21:21
  • And you never call `populate_content()` – Barmar Sep 13 '21 at 21:22
  • Thanks for looking into this. This is just a summary of a massive block of code. Can we assume that these are called, or do you need more information? – Parapluie Sep 13 '21 at 21:24
  • 1
    If it's being called too many times, we need to see HOW it's being called. – Barmar Sep 13 '21 at 21:24
  • What do the "success things" do? Could they be triggering this code again? – Barmar Sep 13 '21 at 21:25
  • No, there is no chance of a loop caused by the success function. I will edit my answer as best I can with the function calls. – Parapluie Sep 13 '21 at 21:27
  • 1
    Are you creating `.content_download` elements dynamically? Do you add the click handler each time you create more of them? – Barmar Sep 13 '21 at 21:28
  • 1
    There are so many side effects in this code it is impossible to determine the cause of your problem. Can you please put up a [example] in some REPL? – Randy Casburn Sep 13 '21 at 21:34
  • "_in the jQuery codex..._" - is your biggest issue. In 2021 jQuery is not needed and rather than add value, as you've discovered, it actually adds confusion. If you want to learn JavaScript, then do that. Here is a good starting point: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide -- If you want to go to the modern way of accomplishing your goal investigate this: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API -- finally, you'll need Async/Await: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await – Randy Casburn Sep 13 '21 at 21:44
  • @Barmar You said "Are you creating .content_download elements dynamically? Do you add the click handler each time you create more of them?" Yes, this is the case. What is the best way to avoid this? Sorry if this is an elementary question. – Parapluie Sep 13 '21 at 21:52
  • 1
    See the above duplicate link. – Barmar Sep 13 '21 at 21:59
  • Thanks, Barmar. That looks like it may just be the answer I was looking for. I'll investigate further in the morning. – Parapluie Sep 13 '21 at 22:35

0 Answers0