Develop Reference

Jquery click function for a second time do not works

when user click for a second time click do not work, user need to reload the page again to it works
<script>
$(document).ready(function() {
$("#like_post").click(function(e) {
// $("#like_post").on("click", "#like_post", function (e) {
e.preventDefault();
var post_info = $("#post_info :input").serialize();
$.post("backend/ajax/like_post.php", post_info).done(function(data) {
$("#like_post").html(data);
$("#like").load(location.href+" #like>*","");
}).fail(function() {
//alert("Error submitting forms!");
})
})
})
</script>
this is the backend return from db
if user liked it will show
<div id="like_post><a href="" id="l"><input type="hidden" value="unlike" name="like_button" /><i style="color:red" class="fa fa-heart fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['you_liked_it'].'"></i>
</a></div>
else it will show
<div id="like_post"> <a href="" id="l"><input type="hidden" value="like" name="like_button" /><i class="fa fa-heart-o fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['like_it'].'"></i>
</a></div>
the same validation is on frontend where is will change the hidden input to like, or unlike , my backend check is fine and returning all ok when I check the html response, but the problem is that jquery do not work when user like and unlike without reload the page, it just get the first click and after that user need to reload the page to it works.
I had a similar issue before and it was something with event delegation.

Use the comment line in your code without "#like_post":
$("#like_post").on("click", function (e) {
});

Write HTML tag inside Javascript text

I have a Javascript function that prints "like" and "Unlike" like this:
$(".liketoggle").click(function () {
$(this).text(function(i, v){
return v === 'Like' ? 'Unlike' : 'Like'
})
});
I have an HTML tag that shows a heart in an tag as:
<i class="fas fa-heart"></i>
How can I show the heart icon next to the like/unlike button. This is the HTML so far:
<button type="submit"
class="btn btn-custom btn-sm liketoggle"
name ="like">Like
</button>
<i class="fas fa-heart"></i>
How I can write to the JS to be included when toggling it?
Similar Function here: http://jsfiddle.net/dFZyv/ but same issue

button is refreshing page instead of calling function

I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.

You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>

Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>

Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.

Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>

How to make the content text "rtl" in popover button via bootstrap

I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>

add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >

A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers

try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here

To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.

Knockout js hide button if value is greater than

I am defining a variable after the page load (storing numerical json data)
I can successfully put this variable in:
<span data-bind="text: extQty"></span>
And when the variable changes it updates the span with the appropriate variable (That works fine).
But it doesn't update my variable within my enable:
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>
I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.

Knockout enable binding do not work with anchor tags.
So you have 2 solution to this.
Solution 1
<a href='#' title="edit" class="btn btn-primary" data-bind='click: function() {
if(pagedList().length < extQty())
{
//call the desired method from here
}' >
Solution 2
This button displays only when your condition is success and it has click binding
<a class="btn btn-primary" data-bind="click: $root.add, visible: pagedList().length < extQty()" href="#" title="edit">
This button displays only when your negative condition is success and it do not have click binding
<a class="btn btn-primary" data-bind="visible: pagedList().length >= extQty()" href="#" title="edit">

Try using
<p class="pull-right">
<a class="btn btn-primary" data-bind="style: { display: (pagedList().length < extQty) ? 'block' : 'none' }"
href="#" title="edit">
<i class="icon-plus"></i>Add Extension
</a>
</p>
Or else as pointed by #NaveenKumar.. You can use visible attribute...