I want to create rows based on input box blur event. so I have tried the for loop with jquery to append the rows in a table but it will take more time or some time page not respond when loop value reach more than 10000.
$("#place_count").blur(function () {
var row_count = 1;
if ($(this).val() > 1) {
row_count = parseInt($(this).val());
}
var intial_count = $('#route_places_table tr').length;
for (var i = (intial_count + 1); i <= row_count; i++) {
$('#route_places_table tbody').append('<tr><td>' + i + '</td><td>
< input type = "text" class= "place_input" name = "places[]" ></td >
<td>
<span class="add_row_below row_icons">
<i class="fa fa- plus" aria-hidden="true"></i>
</span> <span class="move_row_up row_icons">
<i class="fa fa-arrow-up"></i> </span>
<span class="move_row_down row_icons">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</span><span class="close_row row_icons">
<i class="fa fa-window-close" aria-hidden="true"></i></span>
</td></tr >'
);
}
});
so how to reduce the delay time? or if any problem with my code please help me to improve the code.
You can try to append only once after the loop has ended, but i strongly suggest to limit the number of rows you append to the page, you don't usually need that many, many dom nodes make the page slow, i suggest you use some king of pagination
var html ='';
for(var i=(intial_count+1);i<=row_count;i++){
html+= '<tr><td>'+i+'</td><td>
<input type="text" class="place_input" name="places[]"></td>
<td>
<span class="add_row_below row_icons">
<i class="fa fa- plus" aria-hidden="true"></i>
</span> <span class="move_row_up row_icons">
<i class="fa fa-arrow-up"></i> </span>
<span class="move_row_down row_icons">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</span><span class="close_row row_icons">
<i class="fa fa-window-close" aria-hidden="true"></i></span>
</td></tr>';
}
$('#route_places_table tbody').append(html);
Instead of appending each row one by one, append the whole template at once. This way the time should get reduced.
var rows = [];
for (var i = (intial_count + 1); i <= row_count; i++) {
rows.push('<tr><td>'+i+'</td><td>
<input type="text" class="place_input" name="places[]"></td>
<td>
<span class="add_row_below row_icons">
<i class="fa fa- plus" aria-hidden="true"></i>
</span> <span class="move_row_up row_icons">
<i class="fa fa-arrow-up"></i> </span>
<span class="move_row_down row_icons">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</span><span class="close_row row_icons">
<i class="fa fa-window-close" aria-hidden="true"></i></span>
</td></tr>');
}
$('#route_places_table tbody').append(rows.join(''));
Related
I'm trying to have a mouse icon show up when I hover over the stars in this script using Bootstrap 4.
This is the form.
<div class="form-group">
<h4>Rate this product</h4>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="product_id" name="product_id" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
And here is the Javascript
$( ".rateButton" ).click(function() {
if($(this).hasClass('star-grey')) {
$(this).removeClass('star-grey').addClass('star-highlight star-selected');
$(this).prevAll('.rateButton').removeClass('star-grey').addClass('star-highlight star-selected');
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
} else {
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
}
$("#rating").val($('.star-selected').length); //count the num of star selected
});
This is how I want it to look https://imgur.com/a/sTkSQR2
I'm trying to have a mouse icon show up when I hover over the stars in
this script using Bootstrap 4
Showing mouse cursor to look like pointed hand (as in image) can be done using below css.
.rateButton {
cursor: pointer
}
Bootstrap way of doing it
Add role="button", then a cursor turns to hand. Bootstrap reference
Reboot includes an enhancement for role="button" to change the default
cursor to pointer. Add this attribute to elements to help indicate
elements are interactive. This role isn’t necessary for
elements, which get their own cursor change.
Your code will look like
<i role="button" class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<i role="button"> I am an i tag, hovering me should change the cursor to a hand</i>
<br />
<br />
<i> I am an i tag, but I dont have role="button" hovering me WILL NOT change cursor to a hand</i>
I prefer the first method if you don't want to edit the html
I am trying to use the "i" tag with the ternary operator. The two strings "unavailable","available" are working perfectly, but instead of those, I want to use 2 icons like a check sign(fa fa-check) and an X sign(fa fa-times).
Any help would be appreciated.
<td th:text="${phone.assigned == true ? 'unavailable' : 'available'}" >Availability</td>
<td class="checkSign"><i class="fa fa-check" aria-hidden="true"></i></td>
<td class="xSign"><i class="fa fa-times" aria-hidden="true"></i></td>
Using IF?
<td>
<i th:if="${phone.assigned == true}" class="fa fa-check" aria-hidden="true"></i>
<i th:if="${phone.assigned == false}" class="fa fa-times" aria-hidden="true"></i>
</td>
Try to use the th:classappend
<td class="checkSign"><i class="fa" th:classappend="${phone.assigned} ? fa-check : fa-times" aria-hidden="true"></i></td>
<td class="checkSign"><i class="${phone.assigned === true ? fa fa-check : fa fa-times}" aria-hidden="true"></i>Availability</td>
The appropriate way to do this is what th:classappend (the other answer is missing quotes around the values which would cause an error). This works:
<td>
<i class="fa" th:classappend="${phone.assigned ? 'fa-check' : 'fa-times'}" aria-hidden="true"></i>
</td>
That being said, the other solution does work, but it's a bit silly to compare booleans to true and false. If you go with that solution, it should look like this:
<td>
<i th:if="${phone.assigned}" class="fa fa-check" aria-hidden="true"></i>
<i th:if="${!phone.assigned}" class="fa fa-times" aria-hidden="true"></i>
</td>
or this:
<td>
<i th:if="${phone.assigned}" class="fa fa-check" aria-hidden="true"></i>
<i th:unless="${phone.assigned}" class="fa fa-times" aria-hidden="true"></i>
</td>
I know this is almost 2 years old but if someone needs it.
I use it this way.
<td>
<i th:class="${phone.assigned}?'fa fa-check':'fa fa times'" aria-hidden="true"></i>
</td>
I need to increment the count of a fa-heart value on click and decrement on the second click.
Problem is I have multiple fa-heart in the same page, so unable to increment/decrement on the clicked fa-heart.
Here is my fiddle below
https://jsfiddle.net/mehbub/d9e2qotg/1/
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
$(document).on('click', ".notliked", function() {
var $this = $(this);
$this.removeClass('notliked');
$this.addClass('liked')
$count = $('.likes-count');
$count.text(function(idx, txt) {
return (+txt == 0) ? 0 : (+txt - 1);
heart.classList.toggle('grey');
});
});
$(document).on('click', ".liked", function() {
var $this = $(this);
$this.removeClass('liked');
$this.addClass('notliked');
$count = $('.likes-count');
$count.text(function(idx, txt) {
return +txt + 1;
heart.classList.toggle('red');
});
});
$count.text(function(idx, txt) {
// convert text to number and increment by one
return +txt + 1;
});
#heart {
color: grey;
font-size: 20px;
}
#heart.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
robert stephen</p><i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 100 </span><br>
<p>
James Camroon</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 101 </span><br>
<p>
John Wick</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 37 </span><br>
<p>
James Bond</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 22 </span><br>
<p>
Avengers</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 90 </span>
I need individual click increment/decrement for each fa-heart to color change to red if increment, or grey if the decrement
Thanks
You should remove the duplicate id heart or just remove it since you've already a class heart then attach the click to this common class and toggle the classes liked/notliked, you could use those classes as a rules in your CSS so no need for red/grey classes, something like :
$(document).on('click', ".heart", function() {
var count = $(this).next('span');
$(this).toggleClass('notliked liked');
if ($(this).hasClass('liked')) {
count.text(Number(count.text()) + 1);
} else {
count.text(Number(count.text()) - 1);
}
});
.heart.notliked {
color: grey;
font-size: 20px;
}
.heart.liked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p>robert stephen</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 100 </span><br>
<p>James Camroon</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 101 </span><br>
<p>John Wick</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 37 </span><br>
<p>James Bond</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 22 </span><br>
<p>Avengers</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 90 </span>
I am trying to implement rating system.
What I tried:
When user clicks any of the stars, I try to add a class to stars before it and clicked star.
But it adds class to all the stars in the td
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th> </th>
<th>Rating </th>
</tr>
</thead>
<tbody>
<tr>
<td class="hd">usertext1</td>
<td> </td>
<td>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td class="hd">usertext</td>
<td> </td>
<td>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td class="hd">feedback text</td>
<td> </td>
<td>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
<i class="fa fa-star rating" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
<style>
.ratingstar{
color:#FFD700
}
</style>
<script type="text/javascript">
$('.rating').on('click', function(){
var sel = $(this);
var td = sel.parents('td').find('.rating');
td.each(function(item){
if($(this)==sel){
console.log(item);//I tried break here but It throws error
}
$(this).addClass('ratingstar');
})
});
</script>
This is actually really easy with chaining:
$('.rating').on('click', function(){
$(this) // Our starting point, we're going left/right of this one
.addClass('starred') // Of course, activate the one selected
.nextAll() // Select the "unstarred"
.removeClass('starred') // Deactivate greater ratings not selected
.end() // This cancels the .nextAll() sub-selector, back to this
.prevAll() // Get the lower stars
.addClass('starred') // Activate them
;
});
https://jsfiddle.net/9364fusb/2
This will work for modern browsers:
$('.rating').on('click', function(){
$(this).addClass('ratingstar');
var prev = this.previousElementSibling;
while (prev) {
$(prev).addClass('ratingstar');
prev = prev.previousElementSibling;
}
});
To explain your actual problem, jQuery returns an array-like object. $(this) == sel will always evaluate false in the same way [] == [] is false because each array has a unique reference. To test for equivalence the API includes the $.is function. e.g. (sticking with your original code):
$('.rating').on('click', function() {
var sel = $(this);
var td = sel.parents('td').find('.rating');
td.removeClass('ratingstar').each(function(item) {
$(this).addClass('ratingstar');
if ($(this).is(sel))
return false;
});
});
» Fiddle
I'm trying to use data-bind click for one my spans, but when I'm trying to do it, the function start when the page became active, and don't wait for user press.
Any idea why???
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 rate">{{rate}}
<span class="fa fa-fw fa-lg fa-edit" data-bind="click: $root.edit($parent ,$index())"></span>
<span class="fa fa-fw fa-lg fa-times" data-bind="click: $root.delete($parent ,min)"></span>
</div>
If you want to pass additional arguments to your click handler function need to wrap your function calls into anonymous functions:
<span class="fa fa-fw fa-lg fa-edit"
data-bind="click: function () { $root.edit($parent ,$index()) }"></span>
<span class="fa fa-fw fa-lg fa-times"
data-bind="click: function () { $root.delete($parent ,min) } "></span>
See also in the documentation: Note 2: Accessing the event object, or passing more parameters