How to create multi range time slider in jQuery UI - javascript

I am using JQuery UI Time Slider.I want to get multiple Ranges with multiple Handles.
such like given below :
Start point 10:00 AM--Range---2:00 PM 4:00 PM---Range------8:00 PM 9:00 PM---Range---11:00 PM Endpoint
I have tried this
$("#slider2").timeslider({
sliderOptions: {
ranges: [false, true, false, true],
min: 300,
max: 3179,
values: [400, 800,1100,1600,2000,2500],
step:5
},
errorMessage: '#max2',
timeDisplay: '#time2',
clickSubmit: function (e){
var that = $(this).siblings('#slider2');
$('#schedule2 tbody').append('<tr>' +
'<td>' + that.attr('id') + '</td>' +
'<td>' + that.timeslider('getTime', that.slider("values", 0)) + '</td>' +
'<td>' + that.timeslider('getTime', that.slider("values", 1)) + '</td>' +
'<td>' + that.timeslider('getTime', that.slider("values", 2)) + '</td>' +
'<td>' + that.timeslider('getTime', that.slider("values", 3)) + '</td>' +
'<td>' + that.timeslider('getTime', that.slider("values", 4)) + '</td>' +
'<td>' + that.timeslider('getTime', that.slider("values", 5)) + '</td>' +
'</tr>');
e.preventDefault();
}
});
If anybody have a good example please share link with me to get these kind of output or please help me to modify this above code.
Thank you
"Have a nice day ahead"

I have been searching for a solution myself, but it is hard to find a (good) solution. Elessar seems a good option. It was given as an answer here: jquery-slider-plugin-that-supports-multiple-ranged-handles.
It's usage can be found on Elassar's GitHub page.

Related

Pulling data with spaces in json [duplicate]

This question already has answers here:
Access JSON output with spaces
(4 answers)
Closed 3 months ago.
I can't extract the data with spaces in the area that I have shown with the red pen, how can I do this?
$.ajax({
url: "../api/api.php",
type: "POST",
data: {
tc: $("#tcx").val(),
},
success: (res) => {
if (res) {
var json = JSON.parse(res);
$('tbody').html("");
$.each(json, function(key, value) {
$('tbody').append('<tr>' +
'<td>' + value.YAKINLIK + '</td>' +
'<td>' + value.TC + '</td>' +
'<td>' + value.ADI + '</td>' +
'<td>' + value.SOYADI + '</td>' +
'<td>' + value.DOGUM TARIHI + '</td>' +
'<td>' + value.NUFUS IL + '</td>' +
'<td>' + value.NUFUS ILCE + '</td>' +
'<td>' + value.ANNE ADI + '</td>' +
'<td>' + value.ANNE TC + '</td>' +
'<td>' + value.BABA ADI + '</td>' +
'<td>' + value.BABA TC + '</td>' +
'</tr>');
});
} else {
alert("Hata oluştu!");
return;
}
},
error: () => {
alert("Hata oluştu!");
}
});
}
I tried to parse but without success
enter image description here
If you're just trying to read out the value from an object, based on a key that has spaces in it, you can use this syntax:
const myObject = { withoutSpaces: 1, "with spaces": 2 };
const valueOne = myObject.withoutSpaces;
const valueTwo = myObject["with spaces"];
So in your case you want to use something like:
value["DOGUM TARIHI"]

Display sum of two db records in javascript

I'm stucked in a situation now, i need to replace grand_score with paper_score + final_score (i.e the sum of paper_score and final_score). I've tried different alternations but still no fruitful result. please help me.
'<td>' + result['records'][i]['paper_score'] + '</td>' + //continuous assessment
'<td>' + result['records'][i]['final_score'] + '</td>' + //examination
'<td>' + result['records'][i]['grand_score'] + '</td>' + //ca + exam
You can simply use the + operator to add them together:
'<td>' + result['records'][i]['paper_score'] + '</td>' + //continuous assessment
'<td>' + result['records'][i]['final_score'] + '</td>' + //examination
'<td>' + (result['records'][i]['paper_score'] + result['records'][i]['final_score']) + '</td>' + //ca + exam
If paper_score and final_score are strings instead of numbers, you'll need to cast them first (assuming floats here, you could also use parseInt() for whole numbers):
'<td>' + (parseFloat(result['records'][i]['paper_score']) + parseFloat(result['records'][i]['final_score'])) + '</td>' + //ca + exam

Returning string result into a new line in a table cell

I have this data that i need to split into 3 lines within the same cell.
var Ms = '<tr>'
Ms += '<td>' + 'Where' + '\n\r' + 'are' + '\n\r' + 'you' + '</td>';
Ms += '</tr>'
I tried \n, \r and \n\r but seems not to work.
I need the result in this format:
Where
are
you
Why don't you use <br>
var Ms = '<tr>'
Ms += '<td>' + 'Where' + '<br>' + 'are' + '<br>' + 'you' + '</td>';
Ms += '</tr>'

Make an iteration more functional in JavaScript / JQuery

I wrote a simple bit of JavaScript to create a HTML table.
It is populated by iterating over an array
var resultSet;
for (var i = 0, i < questions.length;; i++){
...
resultSet += '<tr>' + '<td>' + i + '</td><td>' + questions[i].question + '</td><td>' + questions[i].userAnswer + '</td><td>' +
questions[i].correctAnswer + '</td>' + '</tr>';
}
So this an imperative approach. I was reading about Scala where an example to something similar would be:
questions.map(n => '<tr>' + '<td>' + '</td><td>' + questions[i].question + ...);
Which is a functional. The emphasis being on the what rather than the how.
So I am wondering how to make my JavaScript more functional?
Use of JQuery of course permitted.
Javascript has Array.forEach however with limited compatibility: While all other browsers support it, IE only supports it from IE9 on - so you might need a shim for the other IEs.
Basically you could write:
questions.forEach(function(a){
resultSet += '<tr><td>' + a.question + '</td><td>' +
a.userAnswer + '</td><td>' +
a.correctAnswer + '</td></tr>';
});
jQuery provides .each() which gives you the same functionality:
$.each(questions, function(index, value) {
/* Do your stuff*/
});
First, correct Scala will be
questions.map(q => '<tr>' + '<td>' + '</td><td>' + q.question + ...);
where q is an element of questions, not an index.
JavaScript also has map (see Browser Compatibility at the end for browsers which support this method). So it's the same:
questions.map(function(q) {
return '<tr>' + '<td>' + '</td><td>' + q.question + ...
});

how to repeat the rows dynamically in .html() jqueryajax

In the below code am having one table with values from database.After executing the the query if am having 5 values am getting only the first value in my table(inside pop up).in this html() function how can i add the foreach and type of parametrs for for each,
i used ajax,json,jquery
My code is;
success: function (msg) {
var data = $.parseJSON(JSON.stringify(eval("(" + msg.d + ")")));
$('<div></div>')
.appendTo('body')
.html('<div><b>SHAREHOLDER DETAILS</b></br>' + data.Id + '</div>' +
'<div>' + data.name + '</div>' +
'<div>' + data.Id + '</div>' +
'<table border="1" style="background-color:silver;"><tr>' +
'<td>' + 'OwnedBy' + '</td>' +
'<td>' + 'ShareClass' + '</td>' +
'<td>' + 'EffectiveInterest' + '</td>' +
'<td>' + 'DeemedInterest' +'</td>' +
'<td>' + 'SharesOwned' + '</td>' +
'<td>' + 'SharesIssued' + '</td>' +
'</tr>' +
'<tr>' +
'<td>' + data.Id +'</td>' +
'<td>' + data.share + '</td>' +
'<td>' + data.effect + '</td>' +
'<td>' + data.deemed + '</td>' +
'<td>' + data.owned + '</td>' +
'<td>' + data.issued + '</td>' +
'</tr>' +
'</table>')
.dialog({
modal: true,
title: '<div>' + data.Id + '</div>',
zIndex: 10000,
autoOpen: true,
position: ['right', 'top'],
width: 'auto',
height: 'auto',
modal: false,
resizable: false,
closeOnEscape: false,
show: "slide",
hide: "explode",
close: function (event, ui) {
$(this).remove();
}
});
},
I don't know how much effort you've put into solving this on your own, but in the interest of fairness, I'll explain the thought process a bit. What you need to consider is conceptualizing and separating the "rows" from the "general entity", eg, "I have a table with rows which contain data".
The loop itself runs when creating the rows, and has to be performed as a separate action from creating the table itself. Even if you embed the loop logic into the table construction itself (as far as the markup generation itself goes, which I consider bad practice), you still have to consider each row as the result of a loop run, distinct from the table, thead, and tbody. Note, even with the rows (tr), you have another (potential) loop requirement in each cell in the row (td). In this case you don't need a loop at that level, but that points to conceptualizing the rudiments of loop design and utilization.
Here is a method using jQuery element caching and a jQuery.each() loop, which is a type of foreach loop. Note, in Javascript there is no dedicated foreach loop; there is, however, for(var i in object), which allows you to iterate over an object of this kind.
$(document).ready(function(){
var $table = $('<table>'),
$tbody = $('<tbody>'),
$thead = $('<thead>' +
'<tr>' +
'<th>OwnedBy</th>' +
'<th>ShareClass</th>' +
'<th>EffectiveInterest</th>' +
'<th>DeemedInterest</th>' +
'<th>SharesOwned</th>' +
'<th>SharesIssued</th>' +
'</tr>' +
'</thead>'),
$tr = $('<tr>'),
data = {
grp1: {
Id: 'id1',
share: 'share',
deemed: 'deemed',
effect: 'effect',
owned: 'owned',
issued: 'issued'
},
grp2: {
Id: 'id2',
share: 'share',
deemed: 'deemed',
effect: 'effect',
owned: 'owned',
issued: 'issued'
},
grp3: {
Id: 'id3',
share: 'share',
deemed: 'deemed',
effect: 'effect',
owned: 'owned',
issued: 'issued'
}
};
$table
.append($thead, $tbody)
.appendTo(document.body);
jQuery.each(data, function(i, val) {
$tr.clone()
.appendTo($tbody)
.append(
'<td>' + val.Id +'</td>' +
'<td>' + val.share + '</td>' +
'<td>' + val.effect + '</td>' +
'<td>' + val.deemed + '</td>' +
'<td>' + val.owned + '</td>' +
'<td>' + val.issued + '</td>'
);
});
});
http://jsfiddle.net/YFwTe/
You need some sort of iterator function, as you have it the code will only pull the first value.
My suggestion would be to use .each:
var element = $('<table></table>').appendTo('body');
jQuery.each(data, function(i, val) {
element.append(
'<tr>' +
'<td>' + val.Id +'</td>' +
'<td>' + val.share + '</td>' +
'<td>' + val.effect + '</td>' +
'<td>' + val.deemed + '</td>' +
'<td>' + val.owned + '</td>' +
'<td>' + val.issued + '</td>';
'</tr>';
);
});
Haven't tested it just because I don't have a data string, but hopefully that gets you close.

Categories

Resources