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.
Related
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.
I'm trying to insert "Blog" into the breadcrumb where blog posts are being viewed.
I tried this with Javascript/Jquery by trying to see if "blog" is in the url, if so, then find & replace. Example that I used:
JS
if(window.location.href.indexOf("blog") > -1) {
$('#crumbs > a:first-of-type').replaceWith('<i class="fa fa-map-marker"></i>Blog')
}
HTML
<div id="crumbs">
<i class="fa fa-map-marker"></i>
Uncategorized <span class="current">Hello world!</span>
</div>
URL(domain replaced with #):
https://#/blog/uncategorized/hello-world
Although this doesn't seem to work without error. Rather, nothing has changed and there is no error in the Google Chrome console.
UPDATE:
I took the code out of the script.js file and placed it at the bottom of the footer like so:
<script>
$(document).ready(function() {
if(window.location.href.indexOf("blog") > -1) {
$('#crumbs').replaceWith('<i class="fa fa-map-marker"></i>Blog')
}
});
</script>
Now I get the error in chrome console: $ is not a function.
I found a good example of using cookie alert based on bootstrap. I am trying to amend the code and use it as a form to ask user to rank a page/website.
<div id="cookie-alert" data-expire="30" class="alert alert-primary alert-position-bottom">
<div class="container">
<button type="button" class="close" data-dismiss="alert">
<span class="cookie-close-btn" aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<p class="fs-13">
<i class="fa fa-warning"></i>
We use cookies to provide you with a better service.
Carry on browsing if you're happy with this, or find out how to
manage cookies.
</p>
</div>
</div>
Is there any way to show it after a delay 5-10 mins or after a number of visits of a specific page?
i found the code here:
https://theme.stepofweb.com/Smarty/v2.1.0/HTML_BS4/page-cookie-alert.html
This is just a simple example. Add the following to the file.
CSS:
#cookie-alert{
display:none;
}
JS:
(function(){
setTimeout(showAlert, 2000)
})();
function showAlert()
{
document.getElementById("cookie-alert").style.display = "block";
}
Change the time to whatever you'd like. Keep in mind that this is just a simple example.
To show that message with a delay you can use something simple like this:
// Vanilla JS to show it after period of time
var cookieDiv = document.getElementById('cookie-alert');
cookieDiv.style.display = 'none';
setTimeout(function(){
cookieDiv.style.display='block';
},5000) // Show it after 5000ms
Example here:
https://jsfiddle.net/cgn6qj98/2/
I'm currently working on Chrome extenstion and I need to find a way to understand what javascript function is being called by an element.
<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-text yt-uix-button-empty yt-uix-button-has-icon appbar-guide-toggle appbar-guide-clickable-ancestor"
id="appbar-guide-button" type="button" onclick=";return false;"
aria-label="Przewodnik" aria-controls="appbar-guide-menu" aria-expanded="false">
<span class="yt-uix-button-icon-wrapper">
<span class="yt-uix-button-icon yt-uix-button-icon-appbar-guide yt-sprite">
</span>
</span>
</button>
As you can see, the only reference to javascript function is onclick=";return false;" which gives me nothing. It has to be called outside.
When I click it, a javascript function is being executed, but I need to find what function is that. How do I do that?
You can use F12 developer tools to view all the function calls that occur in response to a mouse click.
I have a django template as follows ..
...
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="related"}>KIRK</button>
</div>
</div>
...
And a script in the same template
<script>
$(document).ready( function() {
$("#related").click( function(event) {
alert("You clicked the button using JQuery!");
});
});
</script>
On button click I want to show an alert, however, this does not seem to work for me ? I cannot figure out what I am doing wrong ? Is it the way the script is defined or am not using the right selector ?
Change your html to look like this:
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="related">KIRK</button>
</div>
</div>
(remove the } )
Use whatever debugger/javascript console you prefer (I use Firebug, but you can do it with the Firefox and Chrome built-in consoles as well, I don't know about IE developer tools, which suck):
Verify that you load jQuery (and not just some javascript file of your own named jquery.js)
Verify that jQuery is loaded, and that you have one and only one node in the DOM with the id related by typing $('#related')`.
Verify that your .click line is executed after jQuery is loaded.
Try using a version of Firefox that isn't years old. I'm using 38.0, and you're using 10.0? That was released in 2013.