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
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 have created an filter in my website using AJAX.Filtering is worked when I called the AJAX using click event on an interval fine .But When I am clicked the Submit button multiple times simultaneously I am getting the repeated result over my page.I am not gives here whole details .
I am appending the result in my page on the base of div count. That is the problem I think.
if ($("#holiday-list-loaded-view-start").nextAll("div").first().hasClass('hotel-list-view')) {
$(".hotel-list-view").last().after('<div class="hotel-list-view"><div class="wrapper"><div class="col-md-4 col-sm-6 switch-img clear-padding"><img src="'+img+'"alt="cruise"></div><div class="col-md-6 col-sm-6 hotel-info"><div><div class="hotel-header"><h5>'+value["package_name"].substr(0,120)+'<!--<span><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star-o colored"></i></span>--></h5><p class="small"><i class="fa fa-map-marker"></i>'+shortest_itinerary+' <span id="packagepopup'+value['id']+'" class="package_modal_details" ><i class="fa fa-info-circle" title="View Details" ></i></span><!--<i class="fa fa-phone"></i>123456789--></p></div><div class="hotel-header"><p>Inclusions</p></div><div class="hotel-desc"><p>'+inclusions+'</p></div><!--<div class="hotel-header"><p>Themes</p></div><div class="hotel-desc"><p>'+themes+'</p></div>--></div></div><div class="clearfix visible-sm-block"></div><div class="col-md-2 rating-price-box text-center clear-padding"><div class="rating-box"><div class=""><strong>Themes</strong></div><div class="small">'+themes+'</div></div><div class="room-book-box"><div class="price"><h5>Rs '+value["package_price"]+'/Person</h5></div><div class="book">QUERYDETAIL</div></div></div></div></div>');
} else {
$("#holiday-list-loaded-view-start").after('<div class="hotel-list-view"><div class="wrapper"><div class="col-md-4 col-sm-6 switch-img clear-padding"><img src="'+img+'"alt="cruise"></div><div class="col-md-6 col-sm-6 hotel-info"><div><div class="hotel-header"><h5>'+value["package_name"].substr(0,120)+'<!--<span><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star-o colored"></i></span>--></h5><p class="small"><i class="fa fa-map-marker"></i>'+shortest_itinerary+'<span id="packagepopup'+value['id']+'" class="package_modal_details" ><i class="fa fa-info-circle" title="View Details" ></i></span><!--<i class="fa fa-phone"></i>123456789--></p></div><div class="hotel-header"><p>Inclusions</p></div><div class="hotel-desc"><p>'+inclusions+'</p></div><!--<div class="hotel-header"><p>Themes</p></div><div class="hotel-desc"><p>'+themes+'</p></div>--></div></div><div class="clearfix visible-sm-block"></div><div class="col-md-2 rating-price-box text-center clear-padding"><div class="rating-box"><div class=""><strong>Themes</strong></div><div class="small">'+themes+'</div></div><div class="room-book-box"><div class="price"><h5>Rs '+value["package_price"]+'/Person</h5></div><div class="book"> QUERYDETAIL</div></div></div></div></div>');
}
Oh yeah I got It when the page is rendered .It takes Time mean while if another filtering event occur then Its result is also appended to the same block due to the improper match of div element therefor result is repeated.
But How to resolve It. I don't know.
then make use of empty() function to clear previous result(the possible place is just before loop starts),
//this will erase previous result
$(".hotel-list-view").empty();
// or
$("#holiday-list-loaded-view-start").empty();
// then append function may be before/after/append
i have this template:
Problem is that, i am able to ng-if, but statement
<h2>{{$verification.state}}</h2>
Does not provide any visible output (H2 tag is empty, without text)
<div ng-controller="UsersCtrl" ng-init="verifyUser()" class="jumbotron">
<!- Verification Progres Icon-->
<p class="lead">
<i ng-if="verification.state == 'progress'" class="fa fa-thumbs-o-up fa-5x"></i>
<i ng-if="verification.state == 'success'" class="fa fa-thumbs-o-up fa-5x"></i>
<i ng-if="verification.state == 'error'" class="fa fa-exclamation-circle fa-5x"></i>
</p>
<!- Verification Progres Text Description-->
<h2>{{$verification.state}}</h2>
<h2>{{$verification}}</h2>
<!- Verification Progres Buttons-->
<p>
<a ng-if="verification.state == 'success'" class="btn btn-lg btn-success" ng-href="#/users/login">
Let me to login!
<span class="glyphicon glyphicon-ok"></span>
</a>
<a ng-if="verification.state == 'error'" class="btn btn-lg btn-success" ng-href="#/users/verify/token/{{verification.token}}">
Try it again
<span class="glyphicon glyphicon glyphicon-exclamation-sign"></span>
</a>
</p>
</div>
In controller I'm setting up values to templet like this:
// set initial progress state
$scope.verification = {
state:"progress"
};
How can I pass correctly and display values to the:
<h2>{{$verification.state}}</h2>
Thanks for any help.
Omit the dollar sign:
<h2>{{verification.state}}</h2>
Instead of {{$verification.state}} use {{verification.state}} it should work
I have the following function:
$('[data-toggle=popover]').hover(
function () {
$(this).popover('show');
}, function () {
$(this).popover('hide');
}
);
It works on this link (displays popover):
<p class="pull-right" style="margin-top: .5em;">
<i class="fa fa-question-circle fa-2x" data-toggle="popover" data-placement="left" title="Export Sets Help" data-content="foo"> </i>
</p>
but not this one (nothing fires):
<span class="green" data-toggle="popover" data-placement="left" title=""
data-content="foo" data-original-title="Status Detail">
<i class="fa fa-check"> </i>Success
</span>
The later link was created via a datatable row so the function actions were not attached. Adding the function to fnDrawCallback worked.
I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.
Javascript:
$('.ui.dropdown').dropdown({on:'hover'});
HTML:
<div class="ui dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Fiddle Demo
This is the same answer as above, just cleaner.
$('.dropdown').dropdown({transition: 'drop', on: 'hover' });
you can take this, it works for me
$('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });
I use this:
$('.menu > .ui.dropdown').dropdown({
on: 'hover'
});
And it works well. On your case, try to select the parent of dropdown item.