Loading HTML forms after DOM load, Use of on()

I am loading the same html forms to different pages of my site and I have noticed that the jquery functions are not executing as expected on these other forms (at all). I believe I need to use .on() handler to connect the event handlers after the load. Is this correct. In this case index.html has a toolbar.html loaded after a click event which has a select box with the id of #action

currently my jquery is in common.js loaded via script tags in index.html

so

$('#toolbar').load('toolbar.html');  // loaded later sometime

$("#action").change(function() {
alert("hello");
 }); 

will become

$('#toolbar').load('toolbar.html');  // loaded later sometime

$("#action").on("change", function(){
  alert("hello);
});

It looks like you try to add an event listener before toolbar.html is loaded onto the page.

Try using a callback for when the load request is complete, like this:

$('#toolbar').load('toolbar.html', function () {

    // this will be run when toolbar.html is loaded into #toolbar
    $("#action").on("change", function () {
        alert("hello");
    });

});

By the way, both code examples you posted perform the exact same thing, so it doesn’t matter which method you use.

Cool thanks.

If I have a more complex form (like a ‘quick add contact’ (QAC) form ) that has alot more methods and functions but it can be loaded from different pages this solution would require me to duplicate the quick add code on the different pages, or should I have any methods and functions related to the QAC as a seperate qac.js file.

I am still a little lost as to how many js files are too many, js files by form, one with everything etc. Is there a recommended way to structure them, for a web business app. contacts, notes projects etc.

James

An external .js file would be best, aside from having it included in the main .js that your site uses.
That would not only allow easy changes to one file, but would produce a more readable HTML source file and wouldn’t require you to copy the full code to each page.

As few as possible, ideally. I think the best way is to put as much as you can into one .js file, and the rest into separate .js files.
In order to put all the .js files into one file, that would require each one to not interfere with each other (different namespaces, ideally). The ones that interfere can be kept as separate .js files.

I am finding that newCompany() function is not executing and I dont know why.

console error: Uncaught ReferenceError: newCatalogue is not defined

index.js

 function loadCompany() {
    $('#dialog1').load('company_form.html', function () {
      $.getScript("javascript/company_form.js");
    });
    newCompany();
  };

company_form.js

function newCompany() {		
      	showDialog('dialog1');
	    // resetDialog();
	    $('.myform h1').text("New");
	    $('#company_name').focus();
};

Do you have the script tags immediately before the </body> tag or have you accidentally placed them higher up in the HTML?