SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    $('#toolbar').load('toolbar.html');  // loaded later sometime
    
    $("#action").change(function() { 
    alert("hello");
     });
    will become

    Code:
    $('#toolbar').load('toolbar.html');  // loaded later sometime
    
    $("#action").on("change", function(){
      alert("hello);
    });

  2. #2
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    $('#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.

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jbhx4 View Post
    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.
    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.




    Quote Originally Posted by jbhx4 View Post
    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.
    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.

  5. #5
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am finding that newCompany() function is not executing and I dont know why.

    console error: Uncaught ReferenceError: newCatalogue is not defined

    index.js

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

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

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Do you have the script tags immediately before the </body> tag or have you accidentally placed them higher up in the HTML?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •