You may need to inject your own custom HTML content inside of a WeatherBlox view or layout, such as inserting ads or other analytics content. This is easy if you’re using the client-side integration, or if you’re using the server-side integration with our PHP package that provides utility methods for inserting your content.
Inserting your custom HTML into a WeatherBlox view via client-side is simple by using JavaScript for prepending or appending your HTML content into an existing DOM element within a rendered view or layout. Note that you will need to insert your HTML within an event handler for the view’s render:done event:
const $ = aeris.wxblox.$;
const view = new aeris.wxblox.layouts.local.Main(target);
view.on('render:done', function(e) {
$('.awxb-view-obs .obs').append('<div>This is just an custom content block area.</div>');
});
view.load({
p: 'seattle,wa'
});The WeatherBlox library exposes its internal DOM selector utility via the Aeris.wxblox.$ property that functions similarly to jQuery for you to use to select and insert HTML content. Alternatively, you can use jQuery or your method of choice for accessing and manipulating the DOM.
The easiest way to insert your own HTML into WeatherBlox views via server-side is by using our PHP package and associated View class for requesting and rendering the view. This class offers methods that make it easy for you to insert your own custom content into the view’s HTML before outputting it to your page.
Use the following methods on your View instance to insert your HTML into the desired location within the view:
| Method | Description |
|---|---|
find($selector, $context) |
Searches the view’s HTML for the element specified by the $selector string and within the optional `$contextselector string. If found, this method will return a [DOMNode](http://php.net/manual/en/class.domnode.php) as it uses PHP's [DOMXPath](http://php.net/manual/en/class.domxpath.php) internally for performing the queries and converts your selector strings to the proper XPath format. | |prepend($selector, $html)` | Inserts the provided `$htmlcontent as the first child within the DOM element specified by$selector` if it exists within the view's HTML. | | `append($selector, $html)` | Inserts the provided `$htmlcontent as the last child within the DOM element specified by$selector` if it exists within the view's HTML. | | `insertBefore($selector, $html)` | Inserts the provided `$htmlcontent before the DOM element specified by$selector` if it exists within the view's HTML. | | `insertAfter($selector, $html)` | Inserts the provided `$htmlcontent after the DOM element specified by$selector` if it exists within the view’s HTML. |
For instance, if you want to insert a custom block of HTML content in a local weather layout after the observations block but before the short-term forecast phrasing, you’re code could be:
$view = new Aeris\WxBlox\View('layouts/local', 'seattle,wa');
$view->insertAfter('.awxb-view-obs', '<div>This is just an custom content block area.</div>');
$content = $view->html();
...
echo $content;You can also insert custom HTML into an existing DOM container within the view using prepend() and append(). For example, you want to insert custom HTML into the Observation view before existing child nodes within the .obs .weather selector target:
$view = new Aeris\WxBlox\View('obs', 'seattle,wa');
$view->prepend('.awxb-view-obs .obs .weather', '<div>This is just an custom content block area.</div>');
$content = $view->html();
...
echo $content;If you’re not using PHP or our library for interacting with the WeatherBlox API, you can use regular expressions or a DOM helper library for your language of choice in order to manipulate a view’s HTML before rendering it to the page.
Last modified: July 15, 2019