-1

I like working with the Brackets code editor for most of my projects. However, my team is doing a particular project right now for which we are going to need to create multiple re-usable components to provide prototype demos. We've used a GIT workflow to build all the various components and put them together on multiple prototype HTML pages.

However, every time the designer wants to make an update to a particular component/widget - we need to update it manually across all of the prototype pages.

I'm seeking a way to make a reusable code block like how Adobe Dreamweaver uses Library Items to streamline this workflow https://helpx.adobe.com/dreamweaver/using/library-items.html

I can't locate the equivalent in Brackets. I looked at this plugin https://github.com/chuyik/brackets-snippets - but I don't think it's what I need.

Is there a convenient solution to this? Perhaps I can just use import functions embedded in the HTML code to insert/import widget HTML code from another dir?

Update:

I have just attempted to use a JQuery solution as proposed here Include another HTML file in a HTML file but previewing the file locally - it does not appear to work. It gives an error like so

XMLHttpRequest cannot load file:///D:/Ryan%20GitHub/SLQ-Homepage-with-packery/html/widget-social.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.k.cors.a.crossDomain.send @ jquery.js:8625

I think I need to try this on a local server - shame it won't work on local preview :@

Community
  • 1
  • 1
Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44

2 Answers2

1

Best solution I can come up with for the time being is to use jQuery as I'm already using the library for interactions on our pages.

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Unfortunately, it does not work or preview locally in my Chrome browser because of the cross domain blocking protocol. It's not that fast either but it will do.

Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44
1

Well you could use PHP includes. They work similarly as what you are describing with jquery. Simply put, create the file that has the code you want and name it something.php Then do a simple php include.

<?php 
    include('something.php');
?>

You can also organize the includes into a folder called inc to keep it more organized. I do this for all my website for footers, nav's, menues, etc. I update one file and boom, it updates across every webpage at once. Been doing this for years. Hope this helps anyone else that comes across this, since it is an older thread.

Peter Steele
  • 224
  • 3
  • 11