function not getting called in javascript. bundled by WebPack - javascript

I am facing an issue with JS function. I am able to open search bar but when i try to close it. The code is not getting triggered (My first event is getting called but anything after that is not getting called/triggered)
I am using WebPack which bundle the javascript into one bundle.js file
The code
html file
<div class="search-overlay">
<div class="search-overlay__top">
<div class="container">
<i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
<input type="text" name="" class="search-term " id="" placeholder="What are you looking for">
<i class="fa fa-window-close search-overlay__icon" aria-hidden="true"></i>
</div>
</div>
</div>
js file
import $ from 'jquery';
class Search {
constructor() {
this.openScreen = $(".js-search-trigger");
this.closeScreen = $(".search__close");
this.searchOverlay = $(".search-overlay");
this.events();
}
// 2. Events
events() {
this.openScreen.on("click", this.openOverlay.bind(this));
this.closeScreen.on("click", this.closeOverlay.bind(this));
}
// 3. Methods
openOverlay() {
this.searchOverlay.addClass("search-overlay--active");
$("body").addClass("body-no-scroll");
}
closeOverlay(){
this.searchOverlay.removeClass("search-overlay--active");
$("body").removeClass("body-no-scroll");
}
}
export default Search

On your code the error was the timing, probably you are doing that to fast.
What I mean is, when you call to close de overlay, i'll probably does not have the class yet.
Another theory is that you have more than one .search-overlay on the scream and the removeClass function was trying to remove a class from another element.
Try to execute the selector on console to see how much elements you select with this selector. Then, try to execute your code, step by step, on console too.

Related

Production vs Dev Server Javascript Function not Defined Error

I have an html section that looks like this
<span onclick="like_logic(this)">
<button class="btn btn-outline-dark btn-lg" hx-post="/update_like/{{posts[i][6]}}" hx-trigger="click" hx-target="#like_location{{i}}" hx-swap="innerHTML" id="like_button_{{i}}">
<span id="like_location{{i}}">
{{posts[i][7]}}
{{likes}}
</span>
</button>
</span>
And a javascript section that looks like this:
function like_logic(value){
let tag = value.firstChild.nextElementSibling;
console.log(tag)
if ( $(tag).hasClass("btn btn-outline-danger")){
console.log("1")
$(tag).removeClass("btn btn-outline-danger");
$(tag).addClass("btn btn-outline-dark");
}
else{
console.log("2")
$(tag).removeClass("btn btn-outline-dark");
$(tag).addClass("btn btn-outline-danger");
}
}
It's just supposed to change the color at the same time as using htmx to update the backend at the same time, this works fine in my dev encironment, but when I'm in production I get
Uncaught ReferenceError: like_logic is not defined
at HTMLSpanElement.onclick
Anyone know what might be causing that? Thanks for your time.

Having trouble getting .siblings() to work in jQuery

I have a form on my site that allows people to create a document containing Sections, each of which contains Steps. Basically, the problem is that I can create Sections just fine, but Steps are not being created for some reason.
The HTML for each Section and each Step is created with underscore templates, which you can see in the two scripts below:
<script id="tmpl-section" type="text/html">
<div class="section">
<div class="form-group row">
// inputs
</div>
<div class="form-group row">
// more inputs
</div>
<a href="#" onclick="addSection($(this), true)">
Add section after
</a>
<a href="#" onclick="addSection($(this), false)">
Add section before
</a>
<h5>Steps</h5>
<div class="step-body"></div>
<hr />
</div>
</script>
<script id="tmpl-step" type="text/html">
<div class="step">
<div class="form-group row">
// inputs
</div>
<div class="form-group row">
// inputs
</div>
</div>
</script>
When someone clicks "Add section (before or after)", the following function is called:
function addSection(element, after) {
var sectionStructure = _.template($('#tmpl-section').html()),
$sectionBody = $('.section-body');
if ($('.section').length) {
if (after) {
element.closest('.section').after(sectionStructure);
} else {
element.closest('.section').before(sectionStructure);
}
} else {
$sectionBody.append(sectionStructure);
}
addStep($(this), true); // '$(this)' should refer to whichever "add section" link was clicked
}
($sectionBody refers to the part of the page that contains all the sections.) Basically, it's checking to see if there are any other sections on the page yet for when the page is first loaded, and if there aren't any, it adds one. If there are other sections, it adds another before or after whatever section was clicked. Not super relevant, but I wanted to explain the if statements in there.
Every time addSection() is called, it also calls another function called addStep() to initialize each new section with one step.
function addStep(element, after) {
var stepStructure = _.template($('#tmpl-step').html()),
$thisStepBody = element.siblings('.step-body');
$thisStepBody.append(stepStructure);
}
Eventually I will add a link in each Step to add another step before/after like each Section has, but I'm not that far yet.
The problem is, $thisStepBody.append(stepStructure); is not doing anything. My guess is that $thisStepBody.siblings('.step-body'), which is supposed to point to the ('.step-body') inside whichever section was clicked, is the problem. I've tried this a ton of different ways, and I don't know why it isn't working.
It seems like it should be a simple thing to do, but I'm worried the rest of what I'm trying to do is so overly complicated that it's messing up in a way I can't even think of.
addStep($(this), true);
should be
addStep(element, true);
The addSection() function isn't bound to the element that's clicked, the element is being passed as a parameter.

CSS Animation not firing with Knockout code on click of a button - and not dispatching click event

I'm running into an issue with some Knockout code firing off a CSS3 animation. It works with one block of code, and doesn't on another. The idea is to show an animation when you add an item to the cart. The object in the code not working is coming up empty, where as the one working displays the product notification' div. The other issue is that $('#cart-nav a.first').click(); is not getting dispatched when this action is performed. This is not working in either scenario.
Below is where the code works (for the animation), and another where it does not. Appreciate any help. Thanks
Working code where CSS3 Animation fires off when you add an item to the cart. The class 'rise' triggers the animation. One working block of code, the other not working, and the JS below that. Thank you
Works
<div class="thumbnail product-image medium">
<div class="actions">
<div class="product-notification-cont">
<div class="product-notification"> Added to cart!</div>
</div>
Add to Cart
More Info
</div>
<a href="" data-bind="attr:{href:'/#products/'+$data.id}">
<img src="" data-bind="attr:{alt:$data.name, src:$root.servicePath+'products/'+$data.id+'/images/preview_image/medium?auth='+ax.JRR}" />
</a>
</div>
Doesn't work
<div class="product-info" data-bind="visible:!(productLoading())">
<h2 data-bind="text:product().name"></h2>
<div class="product-description" data-bind="html:product().description">
</div>
<div class="product-notification-cont">
<div class="product-notification"> Added to cart! </div>
</div>
<button class="button" data-bind="click:addProductToCart.bind($data,productMoreInfo())">Add to Cart</button>
<? } else { ?>
<h3><?=l(23)?></h3>
<? } ?>
</div>
JS (console.log in there for debugging purposes)
self.addProductToCart = function(data, event) {
var $productNotification = $(event.target).prev().children('.product-notification');
console.log($productNotification);
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
$('#cart-nav a.first').click();
$productNotification.addClass('rise');
$productNotification.on('animationend',function() {
$(this).removeClass('rise');
});
};
The main difference I spot is this:
The working data-bind binds $data as this:
data-bind="click:$root.addProductToCart.bind($data)"
The not-working data-bind binds $data and the first argument of addProductToCart:
data-bind="click:addProductToCart.bind($data,productMoreInfo())"
Knockout's default click handler signature is:
function(data, event) { }
which matches your addProductToCart signature. The second (faulty) data-bind creates these parameters:
productMoreInfo(), $data, clickEvent
I.e.: it adds the additional parameters in bind to the front of the arguments list.
The quick solution would be to create a new event listener that handles the extra parameters. However, I'd strongly suggest changing your approach altogether. You should look in to afterRender, the css binding and custom bindings. Avoid DOM related jQuery code in your view models.

Add class on hover on Angular JS

I'm trying to add a class when hovering the li element in the code below with Angular
<li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}">
<a href="interna.html">
<img src="assets/images/cola.png">
</a>
</li>
This is all the functionality the page will have, so I though maybe it is not necessarily to add a new js file for the js.
When the mouse enter to the li it should have the new class selected. The code above it is not working, and I cannot figure out why.
Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/
Why do you need an extra file if you can write the logic in your angular application?
I assume you make use of ng-app and have a so called javascript file where your logic is, and you should include it in here.
Here is an example of the proper way of adding/removing a class.
<div ng-app>
<div
class="italic"
ng-class="{red: hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
Test 1 2 3.
</div>
</div>
NB I found this in another stackoverflow question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.
* EDIT *
It seems like you're not yet familiar with AngularJS. You need to include your 'app.js' or 'script.js' whatever you want to call it. In there you define your application using
var app = angular.module('yourappname', [/* add your dependencies here*/]);
//Other logic like controllers or services
And your HTML should be
<div ng-app="yourappname">
<div ng-controller="yourController">
PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS
Try using ng-mouseover attr
<li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}">
write a function hoverIn() in your script and assign value when hover over
$scope.hoverIn = function() {
this.applyClass = "red";
}
Working Demo

Calling server-side script within a sidebar GAS

I am trying to call another sidebar within a different sidebar to create a sort of tabbed interface in google docs. I cannot figure out how to call the server-side function that displays the new sidebar within the html file of the present sidebar.
Here is my html sidebar button layout...(doesn't work)
<div id='menu'>
<button class="action" id="functions_nav">Functions</button>
<button class="action" id="navbar">NavBar</button>
<button class="action" id="settings" onClick="google.script.run.showSettings()">Settings</button>
</div>
and my gs file...
function showSettings() {
var html = HtmlService.createHtmlOutputFromFile('settings')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('DebateDocs')
.setWidth(300);
DocumentApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}
The documentation on google deals with calling the buttons via "input type="button"..." however that will screw with my styling. Additionally they always call the scripts within javascript "script" tags. Is there some way I can route the button to a javascript event within the html file that points to the server?
Thanks for your help! Any is appreciated.
your code is working fine for me.
The IFRAME Sandbox mode is new and has some bugs, try removing it or setting to NATIVE.
Also please share if you can find any error if you see the execution transcript.
Cheers.
PS: Sorry, I know this should be inserted as a comment, but don't yet have reputation to do so :(
You don't need to call the .gs script directly from a button. You can use this configuration.
Button
<div id='menu'>
<button class="action" id="settings" onClick="fncShowSettings()">Settings</button>
</div>
HTML Script Tag
<script>
window.fncShowSettings=function(){
console.log("fncShowSettings ran");
google.script.run
.showSettings(); //Runs server side .gs function
</script>
Code.gs
function showSettings() {
Code here . . .
return someValue;
};
I'm not clear as to what you are asking, so if this doesn't help, just leave a comment.

Categories

Resources