Initialize rating plugin using angularjs variable - javascript

I am using this rating plugin (http://metroui.org.ua/rating.html) in angularjs to show rating in star. I tried to initialize the current rating when page loads.
data-score="3"
is working but this
data-score="{{userreviewRatings.rating}}"
is not working
<div id="rating-stars" class="large fg-white rating active" style="height: auto;" data-score="{{userreviewRatings.rating}}">
</div>
<form id="rating-form">
<input type="text" id="website-rating" ng-click="submitrating()" name="rating">
</form>
<script>
$(function(){
$("#rating-stars").rating({
static: false,
stars: 5,
showHint: true,
showScore: false,
click: function(value, rating){
rating.rate(value);
$('#website-rating').val(value);
$('#website-rating').trigger('click');
}
});
});
</script>
can someone please tell me how can i give rating using angular variable?

I don't it's good to use both angular and jquery. they are very different in thought.
if you really want to use both of them. you should use $scope.$digest()after
$scope.userreviewRatings.ratinghas changed.
or use
```
$scope.$apply(function () {
$(function () {
$("#rating-stars").rating({
static: false,
stars: 5,
showHint: true,
showScore: false,
click: function (value, rating) {
rating.rate(value);
$('#website-rating').val(value);
$('#website-rating').trigger('click');
}
});
});
})
```

Related

Trigger an event within a jquery plugin from outside

I use the jquery easy autocomplete plugin which has an internal event "onSelectItemEvent".
now i want to call this event from outside (since it is bound to an extensive function i wrote already).
I prepared a fiddle, but triggering the plugins event with this doesn't work :)
$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
$(document).ready(function() {
var options_ac = {
url: "https://fcgi.msk.link/model-json.pl?site=test",
getValue: function(element) {
//console.log(element);
return element;
},
list: {
match: {
enabled: true
},
sort: {
enabled: true
},
maxNumberOfElements: 8,
onSelectItemEvent: function() {
$("output").html($("#example-ac").val())
}
},
theme: "square"
};
$("#example-ac").easyAutocomplete(options_ac);
$("#trigga").click(function() {
$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<input id="example-ac" />
<br>
<input id="example-ac" /><br/>
<output></output>
<button id="trigga">
trigger
</button>
http://jsfiddle.net/Lgetus29/
Thanks for a hint if this works or if the solution has to be done another way. the codepen example is just small code while the real coding for this internal function is massive, so i want to reuse. maybe i better create a function outside the plugin then reuse this function in the "onSelectItemEvent()", is that even possible?
THANKS !!
Why not use it like
$("#trigga").click(function() {
options_ac.list.onSelectItemEvent()
});
So your final code will look like
$(document).ready(function() {
var options_ac = {
url: "https://fcgi.msk.link/model-json.pl?site=test",
getValue: function(element) {
//console.log(element);
return element;
},
list: {
match: {
enabled: true
},
sort: {
enabled: true
},
maxNumberOfElements: 8,
onSelectItemEvent: function() {
$("output").html($("#example-ac").val())
}
},
theme: "square"
};
$("#example-ac").easyAutocomplete(options_ac);
$("#trigga").click(function() {
options_ac.list.onSelectItemEvent();
});
});

slick slider creating last slide empty Angular JS?

Can users please explain why they are downvote this question?
Facing a problem in a slick slider that it creating an empty slide at last below is my code that is written in Angular JS. How can I deactivate or remove that empty slide?
<slick dots=false infinite=true speed=300 slides-to-show=3 touch-move=false slides-to-scroll=1 init-onload=true data="city_section">
<div ng-repeat="city_s in city_section" >
<img ng-if="city_s.search_city_image" src="<?php echo UPLOAD_PATH ?>city/{{city_s.search_city_image}}" class="img-responsive">
</div>
</slick>
Usage
Using bower to install it. bower install angular-slick-carousel
Add jquery, angular, slick-carousel and angular-slick-carousel to your code.
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/slick-carousel/slick/slick.js"></script>
<script src="../bower_components/angular-slick-carousel/dist/angular-slick.min.js"></script>
Add the sortable module as a dependency to your application module: slickCarousel
var myAppModule = angular.module('MyApp', ['slickCarousel'])
This directive allows you to use the slick-carousel plugin as an angular directive. It can be specified in your HTML as either a attribute or a element.
<slick infinite=true slides-to-show=3 slides-to-scroll=3>
...
</slick>
<slick
settings="slickConfig" ng-if="numberLoaded">
</slick>
Attributes & Event
settings: optional Object containing any of the slick options. Consult here.
enabled should slick be enabled or not. Default to true. Example below
method optional containing slick method. discussed below in detail
event optional containing slick event
$scope.slickConfig = {
enabled: true,
autoplay: true,
draggable: false,
autoplaySpeed: 3000,
method: {},
event: {
beforeChange: function (event, slick, currentSlide, nextSlide) {
},
afterChange: function (event, slick, currentSlide, nextSlide) {
}
}
};
Enable/disable slick
Slick can be easily switched on and off by using enabled settings flag.
$scope.slickConfig = {
enabled: true,
}
$scope.toggleSlick = function() {
$scope.slickConfig.enabled = !$scope.slickConfig.enabled;
}
<slick settings="slickConfig">
...
</slick>
<button ng-click="toggleSlick()">Toggle</button>
Method
All the functions in the plugin are exposed through a control attribute.
To utilize this architecture, and have two-way data-binding, define an empty control handle on scope:
$scope.slickConfig = {
method: {}
}
Pass it as the value to control attribute. Now, you can call any plugin methods as shown in the example.
<button ng-click="slickConfig.method.slickGoTo(2)">slickGoTo(2)</button>
<button ng-click="slickConfig.method.slickPrev()">slickPrev()</button>
<button ng-click="slickConfig.method.slickNext()">slickNext()</button>
<button ng-click='slickConfig.method.slickAdd("<div>New</div>")'>slickAdd()</button>
<button ng-click='slickConfig.method.slickRemove(3)'>slickRemove(3)</button>
<button ng-click='slickConfig.method.slickPlay()'>slickPlay()</button>
<button ng-click='slickConfig.method.slickPause()'>slickPause()</button>
Slide data
For change slide content, you have to set ng-if to destroy and init it
controller:
$scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
$scope.numberLoaded = true;
$scope.numberUpdate = function(){
$scope.numberLoaded = false; // disable slick
//number update
$scope.numberLoaded = true; // enable slick
};
html:
<script type="text/ng-template" id="tpl.html">
<h3>{{ i.label }}</h3>
</script>
<slick ng-if="numberLoaded">
<div ng-repeat="i in number">
<div class="" ng-include="'tpl.html'"></div>
</div>
</slick>
Global config
config(['slickCarouselConfig', function (slickCarouselConfig) {
slickCarouselConfig.dots = true;
slickCarouselConfig.autoplay = false;
}])
https://www.npmjs.com/package/angular-slick-carousel

Twitter search box widget

I am making calls to twitter dynamically to get the widget on the web site. http://twitter.com/about/resources/widgets/widget_search
Instead of user getting the code from the above website, I am giving a text box to enter the same details to get the twitter search widget box.
I am able to get the tweets, but its removing the previous content and which is already on the page and updating the same page with only twitter feeds.
Here is the code:
<label>Enter Search Keyword:</label>
<input type="text" id="twtKeyword"/>
<br/><br/>
<label>Enter Title:</label>
<input type="text" id="twtTitle"/>
<br/><br/>
<label>Enter Subject:</label>
<input type="text" id="twtSubject"/>
<br/><br/>
<input type="button" id="twtBtnClick" value="Click" onclick="getPageTwitter();"></input>
function getPageTwitter()
{
var searchWord=document.getElementById("twtKeyword").value;
var titleTwt=document.getElementById("twtTitle").value;
var subjectTwt=document.getElementById("twtSubject").value;
$( "#twitterWidget" ).dialog( "close" );
new TWTR.Widget({
version: 2,
type: 'search',
search: searchWord,
interval: 6000,
title: titleTwt,
subject: subjectTwt,
width: 250,
height: 300,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
}
But I want the widget to stay in the same page without effecting the previous content of the page
This isn't something the Search Widget was designed for. You will likely have to write your own JavaScript to poll the Search API and render the results with your own code.
I think i've the answer for you. I got some coding done to do exactly what you want, Maybe you could iframe a page i'd be willing to setup? up to you.
you can view the page here http://www.twitamix.com

What is wrong with this javascript?

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.
Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.

Insert a script into the DOM that calls AJAX

We have a tool that allows people to add code to a dynamic page.
A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...
I need to solve this.
Here is an example. Create a page with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>
Then paste this into the input and you'll see what I mean:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>
The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.
Here is a quick and dirty hack that will force it to work (tested in FireFox):
$(function(){
document.write = function(c) { $('#putWidget').append(c) };
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
Notice, I'm simply overriding the document.write function after the page is done loading.

Categories