0

I have a menu widget that I am trying to include on multiple pages. I have tried putting them in one php file and using php include. But the script part is being inserted right into the middle of the HTML and it comes before jQuery (at the bottom of the page) so it doesn't work.

How do I put the script part of the widget into the proper place (at the bottom of the page) while at the same time keeping the HTML and script together (in a file)?

allenylzhou
  • 1,431
  • 4
  • 19
  • 36
  • 1
    Typically you don't include the html as part of the js, especially when dealing with jquery. you include the script once at the bottom, and then include the html as many times as needed throughout the page. – Kevin B Jul 16 '14 at 19:09
  • Is there a way to modularize it so I remember which JS requires which HTML elements? It's very hard to manage with so many jQuery selectors that only work if the HTML element is on the page. – allenylzhou Jul 16 '14 at 19:11
  • 1
    I would never consider php/html + javascript a module. That isn't modular code at all. the javascript shouldn't care that the html has anything to do with php, or whether there's any html for it to reference at all. – Kevin B Jul 16 '14 at 19:11
  • that depends on how you want to do it. I would do it by passing the options as attributes in the html, giving the html element a class. Then, the javascript would (at load time) loop over all elements with said class, initializing using the attributes. That way, the javascript is completely reusable and doesn't need to change from page to page. All you need to change is the html, which php can easily work with. – Kevin B Jul 16 '14 at 19:13
  • But that still means every time I create a new view and want to use the menu widget. I have to copy over all the HTML along with all the jQuery selectors that operate on the HTML. Since they are from separate parts of the page, it's easy to forget some HTML or some JavaScript, and you end up with dysfunctional elements. – allenylzhou Jul 16 '14 at 19:18
  • Why would you need to copy over the javascript selectors every time? If they change from case to case, that isn't modular either. The only thing that should change from case to case is the html and the options passed to the plugin. – Kevin B Jul 16 '14 at 19:18
  • My JavaScript selector is adding a click handler to the menu and it needs to be there on every new page with the menu. – allenylzhou Jul 16 '14 at 19:20
  • so... make that part of the javascript that gets included at the bottom. It doesn't need to have any reference to the html relevant to that specific page. – Kevin B Jul 16 '14 at 19:20
  • It would be useless if the menu HTML element is not there, so I don't want to include it every time, only when its corresponding HTML element is there. There's a separation of concern between the JavaScript and HTML that I do not like. – allenylzhou Jul 16 '14 at 19:22
  • Why not? it's only downloaded the first time, after that it's cached so it doesn't really impact the page load. Mightaswell minify it up and concat it with the rest of your code. – Kevin B Jul 16 '14 at 19:23
  • 1
    But if you must, you can build a php script include manager that you can append scripts to during the page building process, then output them in the footer when you build the footer. – Kevin B Jul 16 '14 at 19:25
  • Thanks for the suggestion. I guess the reason it bothers me is because I don't want to include a whole bunch of anonymous JavaScript in the footer that are not being used. When I'm debugging a view, I want to know which JavaScript are operating on the view without having to sift through a large JavaScript file. – allenylzhou Jul 16 '14 at 19:30
  • if you want common and reusable code, that typically implies some repetition or loading more than you need. most sites don't use every feature of the jQuery library, but that doesn't stop them from loading the whole thing. if you had different js loaded on each page (just the stuff you need), that would be a nightmare to maintain. sounds like you could use lots of little scripts and just load the ones you need from a central dispatcher script like yepnope/require/etc – dandavis Jul 16 '14 at 19:34
  • Understood. I guess for me it's become far less of an issue due to introducing build processes into my development process. For example, my development environment may have 10-20 script includes in it allowing for easy development/debugging, however, when that is passed through the build process, it gets concatenated and minified into a single file that is then included for all pages. This means all of my download is upfront, additional requests to the site simply load from the cache, while still being able to easily debug in development. – Kevin B Jul 16 '14 at 19:36
  • That's one of two approaches i can think of to effectively load code, the other being dependency management such as requirejs. requirejs might be more along the lines of what your goals are since it only includes code when it is needed. – Kevin B Jul 16 '14 at 19:38

0 Answers0