Develop Reference

Trying to hide/show partials based on if a input has text node.js handlebars

so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks

using JS to place <script> objects into html dom -in a specific place- , after the page has loaded

Here's my js script file, specifically the if statement used to add too my chatbots messages. This is then output on a separate html frontend chat bot window. how can i make this snippet of code show up on the html file? I know JavaScript well enough so this seemed like a simple thing to do, but now I've hit a brick wall with my current knowledge. I have tried putting the script inside the ${data.message} variable within my python web api but to no avail.
if(data.message.includes("Great now, heres our payment portal, once the payment has been confirmed I shall book you in.<br>"))
{
$('.chat-window').append(`
<li class="right clearfix">
<div class="chat-body clearfix">
<div class="header">
<strong class="pull-left primary-font">Peggy</strong><br>
</div>
<p>
${data.message}<br> Doing the thing
<img alt="Checkout" class="v-button" role="button" src="www.example.com/sandbox"/>
<script type="text/javascript" src="www.example.com/sandbox"></script>
</p>
</div>
</li>
`)
}
else {
$('.chat-window').append(`
<li class="right clearfix">
<div class="chat-body clearfix">
<div class="header">
<strong class="pull-left primary-font">Peggy</strong><br>
</div>
<p>
${data.message}
</p>
</div>
</li>
`)
^^ js script file
\/ html file
<div class="panel-body">
<ul class="chat-window">
<li class="right clearfix">
<div class="chat-body clearfix">
<div class="header">
<strong class="pull-left primary-font">Peggy: </strong><br>
</div>
<p>
Hi my name is Peggy Booking assistant, how can I assist you today?
</p>
</div>
</li>
</ul>
</div>
Basically I'm asking how do i add the <script type="text/js" src="example.com/sandbox"> <script/> to my main html file in the browser after the page has loaded inside the <div class"chat-window">. I can get the image to show up just fine using the data.message object, its just the script. a week of googling has not helped.

There is many ways, but our browsers have now this capabilities built-in!
Dynamic Imports
Example using a lib suncalc.js, the server must have CORS enabled to works this way!
Example, getting a lib from a CDN, after DOM load, directly available in the current context:
(async () => {
// Get and import the lib
await import('https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js')
.then(function(){
// Lib ready to use
let times = SunCalc.getTimes(new Date(), 51.5,-0.1);
console.log("Golden Hour today in London: " + times.goldenHour.getHours() + ':' + times.sunrise.getMinutes() + ". Take your pics!")
})
})()
From

"Cannot read property 'offsetWidth' of undefined or null reference" after commenting out div

I'm getting the error "Cannot read property 'offsetWidth' of undefined or null reference" in my website since I commented out 2 divs in a bootstrap carousel. This carousel was developed by someone else who is unavailable to me. I don't see how commenting out a div would cause this error. It does not occur when the divs are left in.
<!-- Carousel -->
<div id="homepage-slider">
<div id="feature-wrap">
<div class="iosSlider">
<div class="slider">
{2}
<div class="item" id="2">
<img src="{0}/Content/images/home/index/myPic.jpg" style="width: 100%;" />
</div>
<div class="item" id="3">
<img src="{0}/Content/images/home/index/myPic2.jpg" style="width: 100%;" />
</div>
<div class="item" id="4">
<img src="{0}/Content/images/home/index/myPic3.jpg" style="width: 100%;" />
</div> <!-- Commenting out this div -->
</div>
<div class="iosSliderButtons">
{3}
<div class="button"></div>
<div class="button"></div>
<div class="button"></div> <!-- Commenting out this div -->
</div>
</div>
<div id="nextSlide"></div>
<div id="previousSlide"></div>
</div>
</div>
This HTML is called from another file, called Index.cshtml like so:
<div id="view-home">
#Html.Raw(Resources.HtmlContent.HomePageContent.FormatWith(host,
currentWebAlias, myHTML1, myHTML2))
</div>
myHTML1 & myHTML2 are set earlier in the file, and this HTML is then used to populate the placeholders (marked {2} and {3}) in the page above.
I'm also getting a similar error, except it refers to 'unobtrusive'.
This all works fine when the divs are not commented out, but I don't see how removing a div would cause these errors to occur all of a sudden.
Any help greatly appreciated!

Commenting out a div can cause an error since that element is referenced in carrousel plugin. To be precise since javascript cannot find that element which is now undefined, accessing elements property of undefined causes this error.
Whoever wrote this plugin did not have in mind for you to play around with its structure, since he made it error prone.
This property is most likely used in calculation for carrousel plugin slide effects, you can check more about it here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

ng-if not found or not working outside ng-view

For sample: please check the link http://plnkr.co/edit/Q3Z669FeRHqMORcQ9v6K?p=preview.
I am working in Visual studio 2013.
I am trying to hide or based on authentication, I want to show the menu. But ng-if not working outside the ng-view.
Actually ng-if is not coming with the intellisense. Though I pasted the code, I didn't get. But ng-hide is working.
I am getting the ng-hide. But I don't like to use ng-hide, because this will just hide the element. So using inspect element, we can enable the menu.
Why I am not getting ng-if? Am I doing in the wrong way
<div id="page-wrapper" ng-controller="indexController">
<div id="page-header" class="bg-gradient-9" ng-if="!authentication.isAuth">
<div id="mobile-navigation">
<button id="nav-toggle" class="collapsed" data-toggle="collapse" data-target="#page-sidebar" aria-expanded="false" aria-controls="navbar"><span></span></button>
</div>
<!--Logo for all the screen-->
<div id="mobile-navigation">
</div>
<div id="header-logo" class="logo-bg mobile-hidden">
<a href="#/" class="logo-content-big" title="">
</a>
<a href="#/" class="logo-content-small" title="NoteReport">
NoteReport
</a>
</div>
</div>
<div id="page-content-wrapper ">
<!--Partial loading of the content-->
<div class="angular-ngview-content" ng-view>
</div>
</div>
</div>

This is the ancient old issue if child scopes created by ng-if, try:
ng-if="!$parent.authentication.isAuth"
EDIT
The ng-if directive was provided after angular 1.1.5, you are using 1.0.5. Working plunk.

This is because of ng-if creating a child scope and how prototypical inheritance works with primitives.just check once like
ng-if="authentication.isAuth"
change angularjs version to 1.3.8...It will work

JQuery not working on elements inside ng-view

I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.

Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk