My question is releated to Extjs 3.4 Slider control. I want to get values i.e. min value and max value of two way slider on change event and dsiplay them in tag. But i cannot get two values for two different thumbs. In short i want get separate values of two thumbs. Here is my code
Ext.onReady(function(){
var tip = new Ext.slider.Tip({
getText: function(thumb){
if(thumb)
{
document.getElementById("lblAge").innerHTML= thumb.value;
}
}
});
new Ext.slider.MultiSlider({
renderTo: 'ageslider',
width : 124,
minValue: 0,
maxValue: 100,
values : [0, 90],
plugins : tip
});
I am not able to figure out the solution,Please check the code.
Thanks Inadvance.
there is a thumbs array in slider. You can make loop and get value for each thumb. Something similar:
getText: function(thumb){
var slider = thumb.slider;
values = [];
for (i = 0; i < slider.thumbs.length; i++) {
values.push(slider.thumbs[i].value);
}
console.log(values);
}
Related
So I've looked at a few questions so far, and none of these I've seen have really helped me get to my solution.
I need to get a counter on my slider that's using Owl Carousel. I need to get a current slide count and the number of items in the slider.
The thing is, that I am telling the slider to loop back to the beginning when it hits the last slide.
Some of the code examples I've looked at work, except for one thing. It seems Owl Carousel adds 2 items at the beginning and 2 items at the end, with the class cloned appended to them. That messes with the code counts I've been using.
I've tried to isolate the cloned count and that works, but the currentIndex is where I am falling into problems. Trying to get that count to be accurate isn't working. If I have say 4 slides, currentIndex starts at 3 and goes up to 8 while totalItems shows 4.
Any help is appreciated!
I am using OwlCarousel 2
Here is the code I am using:
var = mapSliderOptions = {
loop: true,
margin: 0,
items: 1,
autoWidth: false,
mouseDrag: true,
touchDrag: true,
dots: false,
onInitialized : counter, //When the plugin has initialized.
onTranslated : counter,
responsive: {
0: {
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
},
768: {
autoplay: false,
items: 1
}
}
},
function counter(event) {
var totalItems = $('.owl-item:not(.cloned)' ).length;
var currentIndex = $('div.active').index() + 1 ;
$('#counter').html("item "+ currentIndex +" of " + totalItems);
}
$('.map-hero-slider').owlCarousel( mapSliderOptions );
I have found this solution online which works great
https://codepen.io/maer2k/pen/qPVWEd
I broke it down to a more understandable code.
var gallery = $('.owl-carousel');
gallery.owlCarousel({
items: 1,
loop: true,
onInitialized: counter,
onChanged: counter,
});
function counter(event) {
if (!event.namespace) {
return;
}
var slides = event.relatedTarget;
$('.slider-counter').text(slides.relative(slides.current()) + 1 + '/' + slides.items().length);
}
It does what it promises. But i have no idea of what event.relatedTarget and .relative() actually do, it's the first time i see them implemented. Also the namespace related if statement isn't really required for it to work.
It doesnt look like it's owl-carousel base code. Would love if someone tryed to explain to me how this magic works :D
So this answer is for those who are using php and running a foreach loop.
What I did was I set the data-dot with the incremental number. I then took a count of the number of items in the array, and passed that through as the final count of items.
Then calling to the container and with some position absolute for the CSS, I was able to "trick" the front end viewer into the count in a sense.
Not very effective, but it works for me.
I am using Jquery-option-tree plugin on a standalone website not based on Wordpress as in example 7 on the demo page, except that I am not passing a .txt file but a PHP page is generating the array of < options > to be passed to the plugin.
http://kotowicz.net/jquery-option-tree/demo/demo.html
This perfectly works: so let's say that the user wants to select a category for a new product, the plugin suits the purpose generating a nice: " Food -> fruit -> apples " upon user clicks. (see demo page ex. 7)
What instead if a product already exists with its categories assigned? I want to show it to the user when he edit that product, preloading the tree.
I have the ids path coming from database, so it would just be a matter of having the plugin to run without the user interact, using the value I pass. I saw this question: jQuery simulate click event on select option
and tried to simulate user' click with this (and other) methods with no luck.
$('#select')
.val(value)
.trigger('click');
Here the call to the function:
$(function() {
var options = {
empty_value: '',
set_value_on: 'each',
indexed: true, // the data in tree is indexed by values (ids), not by labels
on_each_change: '/js/jquery-option-tree/get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
choose: function(level) {
return 'Choose level ' + level;
},
loading_image: '/js/jquery-option-tree/ajax-load.gif',
show_multiple: 10, // if true - will set the size to show all options
choose: ''
};
$.getJSON('/js/jquery-option-tree/get-subtree.php', function(tree) { // initialize the tree by loading the file first
$('input[name=parent_category_id]').optionTree(tree, options);
});
});
Here you can see the plugin:
https://code.google.com/p/jquery-option-tree/
I don't know that plugin, but looking at the examples there seems to be one that fits your need; Example 6 - AJAX lazy loading & setting value on each level change.
This would, in theory, just require some config options:
preselect: {'demo6': ['220','226']}, // array of default values - if on any level option value will be in this list, it will be selected
preselect_only_once: true, // prevent auto selecting whole branch when user maniputales one of branch levels
get_parent_value_if_empty: true,
attr: "id" // we'll use input id instead of name
If this doesn't fit you need though, you could initiate it from an event, like change, keyup, etc.
$(document).on('change', '#select', function() {
$('#nextSelect').val($(this).val());
})
$(document).on('change', '#nextSelect', function() {
$('#finalInput').val($(this).val());
})
Yes, you are right Mackan ! I saw that "preselect" option but I was initially unable to use it transferring the path from database to javascript, I ended up with my "newbie" solution to match the syntax:
preselect: {'parent_category_id': [0,'2','22']},
PHP
$category_path comes from DB query and is like "0,2,76,140,"
$path = explode(',', $category_path);
$preselect="";
foreach ($path as $value) {
$int = (int)$value;
if ($int != 0) $preselect.= "'". $int ."',";
else $preselect.= $int.","; // have to do this as ZERO in my case has to be without apostrophes ''
}
$preselect = "{'parent_category_id':[".$preselect."]}"
JS
var presel= <?php echo($preselect); ?>;
var options = {
preselect: (presel),
}
Any suggestion for a better code ?
Thanks a lot !!
I'm working on a Extjs 4 application and I'm at a point where I need to create view components dynamically.
I have a store that's loaded with new items when I select a value from a combobox. And I want to create a new view component for each item the new store has.
I'm using Extjs 4 with the MVC architecture.
This is the function that creates a new combobox that's fired when I choose an Item from another combo :
function createComboBox(label) {
var combo = new Ext.form.ComboBox({
displayField: 'combo',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select item...',
selectOnFocus: true,
fieldLabel: label
});
return combo;
}
This is the code inside my "select combobox" handler event :
onSelectedValue: function (combo) {
var selected = combo.getValue();
var guiDataStore = this.getGuiDataStore();
guiDataStore.getProxy().url = 'gui_comp_items.php?id_metric=' + selected;
guiDataStore.load({
params: {
id_metric: selected
},
scope: this,
callback: function () {
var paramsRef = this.getParams();//this is the view where I'd like to create the combobox
var total = guiDataStore.getTotalCount();
if (total > 0) {
guiDataStore.each(function (model) {
if (model.get('type_guicomp') == 'combobox') {
paramsRef.down('fieldset[id=filterfieldset]').add(createComboBox(model.get('name_filter')));
paramsRef.down('fieldset[id=filterfieldset]').doLayout();
}
})
}
}
})
}
So my problem is, the first time I choose an item from the existing combobox and total = 0 , no combobox is created and everything is fine, then when I choose a value that returns total = 2, 2 new comboboxes are created, that's perfect. BUT, when right after that, I choose again a value with total = 0, the store is not updated and I STILL get 2 new comboboxes.
Is there a problem with my callback? Please any help would be much appreciated.
Once guiDataStore has 2 records in it, why would it be empty next time?
As in, do you empty the store between the various callback calls?
I am using jquery star rating plugin "Raty" https://github.com/wbotelhos/raty.
i am generating a result set from database with PHP. that includes score also. I want set score property for every individual rating component. how can I do that?
I am using this syntax for showing the stars.
$('.stars_small').raty({
readOnly : true,
half : true,
score : 2,
space : false
});
<div class="stars_small"></div>
there are many div in a single page with the class "stars_small" generated dynamically. I want to set "score" for every div.
$('.stars_small').raty({
readOnly : true,
half : true,
score: function() {
return $(this).attr('data-rating');
}
space : false
});
this worked fine for me.
the plugin is adding a hidden textbox in every div with class="stars_small"
like this
<div class="stars_small">
<input type="hidden" name="score" value="3.5" readonly="readonly">
</div>
So I just set the value attribute with number coming from database query.
Try this
$('.stars_small').each(function() {
$(this).raty({
readOnly : true,
half : true,
score : 2,
space : false
});
});
Assuming that you have generated with PHP the JS lines:
// lines of JS generated with a loop in PHP (for the rate content)
var rates = [];
rates.push({...one rate coming from PHP...});
rates.push({...one rate coming from PHP...});
// etc...
You can run you rating star with :
$(document).ready(function() {
$(".starts_small").each(function(index, element) {
$(this).raty(rates[index]);
});
});
Here is what i did:
I created a separate class for each of those star divs:
<div class="star s0"></div>
<div class="star s1"></div>
<div class="star s2"></div>
I also generate the array of values in my template (that is, pass the values from my server-side script to the web page). Like so:
var array = new Array(2.4, 2.9, 5.0);
And then I declare the thing common for all the three "star banners" in the $(".star") call, and set the values in a cycle:
$('.star').raty({
half : true
});
for (i = 0; i < array.length; i++) {
$('.s' + i).raty({
score:array[i]
});
}
For V.2.7 Jquery raty is the form:
If you need to start you score depending of a dynamic value, you can to use callback for it.
You can pass any value for it, not necessarily a data- value. You can use a field value for example.
<div data-score="1"></div>
$('div').raty({
score: function() {
return $(this).attr('data-score');
}
});
I have a multiselect drop down, on selecting multiple items from it, i need to pass the value of this multiselect into an ajax file, and create divisions dynamically and load the data retreived from the ajax files into these dynamic divisions.
var itemvalues= [];
$('#MultiSelectItemID :selected').each(function(i, selected) {
itemvalues[i] = $(selected).val();
});
$('#itemContent').html(LoadHTML);
$('#itemDetailsContainer').fadeIn('',function(){
$('#itemContent').load('ajax_calls/item_details.php?ItemID='+$('select[name=MultiSelectItemID]').val() || [],
function(){
$(this).show('highlight');
}); });
Now , i want to loop through each value in the itemvalues[] array and pass it to my php file and get the data and load it into a new division.
Please help.
Will this do the job? (Note I 've changed "MultiSelectItemID" to simply "ItemID" and serialize()d it.)
http://jsfiddle.net/svzsY/8/
var itemvalues = [];
$('#itemContent').html(LoadHTML);
$('#itemDetailsContainer').fadeIn('', function() {
$('#itemContent').load('ajax_calls/item_details.php', ($('select[name=ItemID]').serialize() || []), function() {
$(this).show('highlight');
});
});