0

I'm loading HTML files into my parent webpage using jQuery .load(). I want to execute jQuery/JS from the parent page against the HTML file I loaded into it. I believe I can do that with a callback function.

I am using this jQuery for a dropdown menu which I use to load these HTML files into a targetPane <div id="targetPane"></div> when an option is selected in my dropdown.

jQuery($ => {
    $('#courses').on('change', e => {
        $('#targetPane').load(e.target.value);
        path = (e.target.value);
        $('#targetPane').load('path', function() {
            $('#test').html("20");
        });
    });
});

I am using $('#targetPane').load('path', function(){ as my callback function and I can execute $('#test').html("20"); and change a value in the loaded HTML file as a test. Now I want to execute the following code in the callback function:

$(function() {
  function getTotal() {
    var total = 0;
    $("input, select").each(function(i, el) {
      if ($(el).is("input:checked")) {
        $($(el).data("rel")).show();
        total += parseInt($(el).val());
      } else {
        $($(el).data("rel")).hide();
      }
      if ($(el).is("select")) {
        if ($(el).val() !== "0") {
          $($(el).data("rel")).html($(el).val()).show();
          total += parseInt($(el).val());
        }
      }
    });
   
    return total;
  }

  $('input[type="checkbox"], select').change(function() {
  
    $("#sum").text(getTotal());
  });
});

...but can you call functions from within a callback function? How can I execute this large chunk of code (function getTotal()) against the loaded HTML file? path will return the value includes/inc_1.html or similar.

<select name="myCourses" id="courses">
                    <option value="">Please Select Course</option>
                    <option value="includes/inc_1.html">Item 1</option>
                    <option value="includes/inc_2.html">Item 2</option>
</select>

It's the HTML file being loaded in. If I try adding this large chunk of JS in the includes/inc.html file my total variable returns a NaN as opposed to the correct value. https://jsfiddle.net/Twisty/hpd415fj/46/ demonstrates how the total should work. Any help appreciated. Thanks

  • 1
    It's hard to tell what you're trying to do, but the answer to the basic question is yes you can call a function while in the context of another function; in fact your own code does it in several places. – Pointy Aug 12 '21 at 22:23
  • This thread https://stackoverflow.com/questions/68746908/jquery-load-how-to-target-the-loaded-file-with-javascript-and-jquery/68747422#68747422 illuminates the issue. The "dom objects might not exist " as the HTML included file (inc_1.html) gets loaded into the parent page (index.html) hence the need for the "Callback Function" referenced at https://api.jquery.com/load/. I'm wondering if this "Callback Function" specifically can take functions (and what the syntax would be) as opposed to just things like `$('#test').html("20");` –  Aug 13 '21 at 01:05

1 Answers1

0

I learned a callback function can indeed execute functions within.