JavaScript function call not triggering - javascript

Can anyone help in this one?
I have a simple link:
<a href="javascript:ShareOnFacebook()" title="Share on Facebook"
class="btn btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>
and a simple function call:
function ShareOnFacebook() {
alert("shared");
}
And the function is just not called. I really don't know what is going on. There must be a solution but I'm not seeing it.
The debugger says:
Uncaught ReferenceError: ShareOnFacebook is not defined
UPDATE
The method is called correctly when the page is loaded for the first time. Every time I reload the page the method is not being called.

The following seems to work fine. Just make sure you define the function in a way that your HTML can see it. For example, before you use it in the HTML.
function ShareOnFacebook() {
alert('hello')
}
<a href="javascript:ShareOnFacebook()" title="Share on Facebook"
class="btn btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>

You use the following script instead of your html.
<a onclick="ShareOnFacebook()" title="Share on Facebook" class="btn btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>

Related

Redirect to another page and scroll to specific <div> are not working together

Ok, this is my very first question posted to this forum so please be kind.. :)
I'm using ASP.NET MVC 5 and I am trying to do a two step process when an icon is clicked.
Select the correct page
Scroll down to a certain section on that page.
Here is what I got so far:
<a class="sidebar-brand d-flex align-items-center justify-content-start" >
<div class="notification-bell" style="color:red">
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToElement("CommentSection");'></i>
</div>
</a>
And the Javascript
<script type='text/javascript'>
function scrollToElement(id) {
// Set correct page
window.location.replace("/TodoListDashboard");
//Get target
var target = document.getElementById(id).offsetTop;
//Scrolls to that target location
window.scrollTo(0, target);
}
</script>
The funny thing is that either of these actions work by themselves but they won't work together.
Any ideas would be greatly appreciated!!!
Ok, I feel kind of foolish but I figured out an easy fix...
For this problem, I just created a javascript function and added both items together like this:
<script type='text/javascript'>
function scrollToComments() {
window.location.replace("/TodoListDashboard#CommentSection");
}
</script>
Then I just changed my onclick call to:
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToComments();'></i>

How to use innerHTML safely?

Instead of retyping repeated codes for a side bar in Javascript, I made a sidebar function which is used to populate similar codes for every pages. it looks like this:
function addSidebarTemplate(){
const template = document.createElement('template');
template.innerHTML = `<aside class="aside-container">
<header>
link here
<a class="mr-1" href="#">
<i class="fab fa-linkedin"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-facebook"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-github"></i>
</a>
</header>`
document.querySelector('#sidebar').appendChild(sidebar.content);
There are other elements below this code. But none of them requires user's input. I just wonder is this safe to use innerHTML in this case? If not, is there better way to insert the side bar like this?
Thanks
If no user input is used, then innerHTML is fine to use. That being said, if you're doing a lot of this you may want to look into using a UI library like React to help you out.

How can i call the same fancyapp [fancybox 3.5] javascript from more than one link?

I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/

AngularJS elements located in components are fired only after the second click

I have AngularJS (1.x) component - or actually directive to be precise,
and the elements inside this directive are get fired/worked/actioned only in the second click.
For example: a dropdown will not toggle unless you click twice.
After the second click the toggle will be on each next click.
It's like the elements are not digested in the DOM.
This is the component call:
<dropdown-custom-component-example></dropdown-custom-component-example>
This is the component html file:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
you could try to digest by your own inside your directive, after you've checked if $digest isn't alreay in progress:
if(!$scope.$$phase) $scope.$digest();
// or $apply ..
hope this solves your issue :)
Most of the time AngularJS does not respond is because something is happening outside the Angular context, in those cases it's useful to try to replicate the functionality you want with built-in AngularJS directives.
It would be useful to have access to some of the implementation of your component. However, with all the information you have provided, you can use the ngClick built-in directive:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier" ng-click="yourFunctionHere(this)">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
AngularJS Docs - ngClick

Thymeleaf HREF server context

I have a basic SpringBoot 2.0.4.RELEASE app. using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file.
I have this href in a button that is working fine
<input type="button" value="CANCEL" th:onclick="'window.location.href = \'' + #{/user/list/} + '\''" />
nevertheless I have a href, where I have to put also the server.servlet.context-path defined the the application.properties file, otherwise the link goes to http://127.0.0.1/user/list
<a href="/myapp/user/list" class="pure-menu-link">
<i class="fa fa-id-card-o fa-lg fa-fw"></i> USERS
</a>
You can use th:href just like you're doing for your JavaScript:
<a th:href="#{/user/list/}" class="pure-menu-link">
<i class="fa fa-id-card-o fa-lg fa-fw"></i> USERS
</a>

Categories

Resources