I have a ajax json retrieving all query results in a div.I'm not sure how to introduce pagination though.
<script>
$(document).ready(function () {
var hdnIds = document.getElementById('<%= HiddenField1.ClientID %>').value;
$.ajax({
type: "POST",
url: "WebService1.asmx/GetEmployees",
data: "{userid: " + JSON.stringify(hdnIds) + " }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (list) {
$("#Something").append("<ul id='bullets' class='ul1'></ul>");
for (i = 0; i < list.d.length; i++) {
$("#bullets").append("<li class='li1'>"
+ "<div style='float:left; width:20%'>"
+ "<img id='image' src='Handler3.ashx?id=" + list.d[i].id + "' />"
+ "<p style='margin-left:2px; position:relative;color:DodgerBlue;font-size:small; font-style:bold'>" + list.d[i].UserName + "</p>"
+ "<p style='margin-left:2px; position:relative;color:DodgerBlue;font-size:small'>" + list.d[i].Created_on + "</p>"
+ "</div>"
+ "<div style='float:left; width:80%'>"
+ "<p class='p11'>" + list.d[i].Statusmes + "</p>"
+ "</div>"
+ "</li>");
}
},
error: function (e) {
$("#Something").html("There was an error retrieving records");
}
});
});
</script>
And html as
<div id="Something"></div>
ANy help will be greatly appreciated!
First, I would read up on javascript templating. There are a lot of libraries out there that will allow you to remove the bloated html code from your JS code so that it's easier to manage. Something like this: https://github.com/BorisMoore/jquery-tmpl.
After that, you should put the responsibility of pagination on the server side and let the JS/Ajax handle the calls to retrieve the data set. For instance:
//server side
var start = request.params.start //retrieve start index for data set
var limit = request.params.limit //retrieve max number of data set size
return db.Model.find({start: start, limit: limit, ...})
//client side JS/Ajax
//load first page 0-9
$.ajax({
url: '/my/data/url',
params: {
start: 0, //start at first record in db
limit: 10 //only return 10 results
}
}).success(function(data) {
//render data set using template
$.template('#my-data-template', data).renderTo('#someDiv');
});
//load second page 10-19
$.ajax({
url: '/my/data/url',
params: {
start: 10, //start at nth record in db
limit: 10 //only return 10 results
}
}).success(function(data) {
//render data set using template
$.template('#my-data-template', data).renderTo('#someDiv');
});
If I understand the question correctly, you already know about append which is what you need, but you need to change all your ids to classes since there will be more than 1 of them. Then, put all of the html you want to append into a string and just append that html.
HTML:
<div id = "parent">
<div class = "Something"></div>
</div>
JAVASCRIPT (replace to the success AJAX call):
var htmlList = "<div class = "Something"><ul class='bullets ul1'>";
for (i = 0; i < list.d.length; i++) {
htmlList += "<li class='li1'>"
+ "<div style='float:left; width:20%'>"
+ "<img id='image' src='Handler3.ashx?id=" + list.d[i].id + "' />"
+ "<p style='margin-left:2px; position:relative;color:DodgerBlue;font-size:small; font-style:bold'>" + list.d[i].UserName + "</p>"
+ "<p style='margin-left:2px; position:relative;color:DodgerBlue;font-size:small'>" + list.d[i].Created_on + "</p>"
+ "</div>"
+ "<div style='float:left; width:80%'>"
+ "<p class='p11'>" + list.d[i].Statusmes + "</p>"
+ "</div>"
+ "</li>");
}
htmlList += "</ul></div>";
$("#parent").append(htmlList);
Related
I did ajax get request on php file that takes temperature data via snmp and give back a json array of data.
Now for every location I'm trying to generate only once the divs and then only update the values.
Treid to do on the first ajax request to generate the divs with the values inside already to an array and then display them but they won't display in the specific div.
I can see in the console that the array is properly populated. But I can't make it display all the elements in the div with id=data. Tried html(), append(), text() and nothing works.
How should I modify the code so the request won't take that much time?
I'm thinking of creating containers for every location temperature once with the first ajax request and then using setIntervals only getting the value and updating it so I guess it won't take that much time on the request and I will avoid page flickering cause only the numbers will change but how can I achieve that?
I don't want to reload the page.
$(document).ready(function(){
var tr_str = [];
var menu_list = [];
$.ajax({
url: 'getData.php',
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var location = response[i].location;
var temp_int = response[i].temp_int;
var temp = response[i].temp;
var hum = response[i].hum;
var dew = response[i].dew;
tr_str[i] = "<div id='locc" + i + "' class='location'>" +
"<span class='title'>" + location + "</span>" +
"<div class='temp'" + i + "><span>Temperatura: </span><span id='check'>" + temp + " °C</span></div>" +
"<div><span>Względna wilgotność: </span><span>" + hum + " %RH</span></div>" +
"<div><span>Punkt rosy: </span><span>" + dew + " °C</span></div>" +
"</div>";
menu_list[i] = "<label for='loc" + i + "'>" +
"<input type='checkbox' id='loc" + i + "' />" +
"<span class='css-checkbox'></span>" +
"<p>" + location + "</p>" +
"</label>";
}
},
});
console.log(tr_str);
console.log(menu_list);
$("#data").html(tr_str[0]);
<!-- language: lang-html -->
<body>
<div id="data" class="wrapper"></div>
</body>
I'm working on fetching data from a JSON URL in jQuery with $ajax call and I'm using bootstrap in the HTML.
$.ajax({
url: 'https://services.web.bilinfo.dk/api/vehicle/?user=demo&password=ocfB6XzF73&format=json',
type: 'GET',
data: {
format: 'JSON'
},
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
success: function(data) {
$.each(data, function(index, data) {
$('.col-md-4')
.append("picture" + '<img src= "' + data[0].Pictures + '">')
.append("<h1> Model:" + data[0].Model + "</h1>")
.append("<h1> make:" + data[0].Make + "</h1>")
.append("<p> variant:" + data[0].Variant + "</p>")
.append("<p> registrationDate:" + data[0].RegistrationDate + "</p>");
})
},
});
The image doesn't seem to come out, but displays a broken img like thing, any hints or suggestions?
And right now I'm only getting one car out, at data[0].
Now I'm using a $.each, but what if I would receive all cars?
I would generate a complete example, but the access control on that site does not allow it.
In your success handler try:
$.each(data.Vehicles, function(index, item) {
$(".col-md-4")
.append("picture" + '<img src= "' + item.Pictures[0] + '">')
.append("<h1> Model:" + item.Model + "</h1>")
.append("<h1> make:" + item.Make + "</h1>")
.append("<p> variant:" + item.Variant + "</p>")
.append("<p> registrationDate:" + item.RegistrationDate + "</p>");
})
I am finishing up a TwitchTV project but have been struggling to figure out how to append some code with jQuery. This code needs to check the API to see if a user is streaming or not, then, depending on if he or she is or not, append information to an already dynamic, jQuery produced html.
Take a look at my JavaScript code. Right now, under the “status” row, you will see each user has info. If the user is offline, I would simply like to have the html read “offline.” If the user is online, I would like it to read "Online: " plus a short description of what the channel is about (the stream information is stored in a variable called “stream,” and the short description is stored in a variable called “statusWhat”).
I’m sorry if that is a bit confusing. I think seeing the code will make things clear: https://codepen.io/JayDevelopment/pen/bMKrLK 1
$(function() {
var twitchers = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
//FREECODECAMP STREAM INFO AND API CALL
var url =
"https://api.twitch.tv/kraken/streams/freecodecamp?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd";
$.getJSON(url, function(data) {
if (data.stream === null) {
$("#fccStatus").html("OFFLINE");
} else {
$("#fccStatus").html("FreeCodeCamp is ONLINE");
}
$('#fccGame').html()
});
for (var i = 0; i < twitchers.length; i++) {
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/channels/" +
twitchers[i] +
"?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd",
success: function(dataFor) {
$.getJSON(
"https://api.twitch.tv/kraken/streams/" +
dataFor.name +
"?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd").done(function(data2) {
var name = dataFor.name;
var logo = dataFor.logo;
var statusWhat = dataFor.status;
var stream = data2.stream;
$('#info').append('<div class="row block">' +
'<div class="col-sm">' +
'<h1>' + '<img src=' + logo + '>' + '</h1>' +
'</div>' +
'<div class="col-sm">' +
'<h1>' + name + '</h1>' +
'</div>' +
'<div class="col-sm" id="change">' +
'<a href="https://www.twitch.tv/' + name + '"' + ' target="blank">' +
'<h1 id="status">' + stream + ': ' + statusWhat + '</h1>' +
'</a></div></div></div>')
/* if (stream === null) {
$("#status").append('OFFLINE');
} else {
$("#status").append('ONLINE: ' + statusWhat);
} */
}
);
},
error: function(error) {
$("#logo").append('<img src=' + '#' + '>' + "<br>");
$("#name").append('Invalid' + "<br>");
$('#status').append('Not found');
}
});
}
});
You can do it when you assign to the stream variable:
if (data2.stream) {
stream = data2.stream + " ONLINE: " + statusWhat;
} else {
stream = "OFFLINE";
}
here, I am using form wizard. Using ajax to load the data and data are append in html.
ajax code :
$.ajax({
url: '<?php echo base_url(); ?>booking/listSiteUrl',
type: 'post',
dataType: 'json',
success: function (response) {
if (response.success == 1) {
var row = '';
var i = 1;
$.each(response.row_data, function (index, value) {
row += "<tr><td>" + i + "</td><td>" + value.url + "</td><td>" + value.p1_name + "</td><td hidden>" + value.id + "</td><td hidden>" + value.f_n + "</td><td><div class='radio-list'><label><input type='radio' id='f_n_val' name='select_val' data-url='" + value.url + "' data-pub='" + value.p1_name + "' data-id='" + value.id + "' data-follow='" + value.f_n + "' required='required'></label></div></td></tr>";
i++;
});
$("#results").html(row);
// $("input[type=radio]").uniform();
} else {
var row = '';
row += "<tr><td colspan='4' class='text-center'>No Records Found</td></tr>";
$("#results").html(row);
}
}
});
How to apply style sheet on a radio button? you can show in image very clearly...
When I am using uniform style i.e. ($("input[type=radio]").uniform();) work fine and radio button style is applied bt problem in when I am checking validation that time it will look like in below image :
Please help me to find out the way to solve this.
You can create your class in css as
.myradio{
// your code here
}
and then
$("input[type=radio]").addClass('myradio');
I am trying to get the thumbnails to display in a list
I have a database where the video name, type (video provider: youtube or vimeo), and video id, but the thumbnails are not displaying at all. I am doing this inside a loop, i.e, writing the HTML doc in a for loop to get the whole list from the database. I did a lot of research but it is still not working. Any idea why?
here is a portion of the code:
if (resp[0].recstatus != "NOTFOUND") {
for (var i = 0; i < resp.length; i++) {
p_str_li += "<li onclick=\"app.frmvideoGalleryService.viewModel.onVListClick('" + resp[i].drill_id + "')\" id='vid1" + i + "' class='videoPreview'>"
p_str_li += " <div id='vid2" + i + "' class='vid_thumb'>"
p_str_li += " <a id='vid3" + i + "' >"
p_str_li += " <img id='vid4" + i + "' src='styles/images/placeholders/thumbnail.jpg' alt='commentPic'>"
if (resp[i].video_type == 'VIMEO') {
$.ajax({
type: 'GET',
url: 'http://vimeo.com/api/v2/video/' + resp[i].video_id + '.json',
async: true,
jsonp: 'callback',
dataType: 'jsonp',
success: function (data) {
thumbnail_src = data[0].thumbnail_medium;
$('#vid4' + i).attr('src', thumbnail_src);
}
});
}
else if (resp[i].video_type == 'YOUTUBE') {
var thumbnail_src = 'http://i2.ytimg.com/vi/' + resp[i].video_id + '/hqdefault.jpg';
$('#vid4' + i).attr('src', thumbnail_src);
}
else {
$('#vid4' + i).attr('src', 'styles/images/placeholders/thumbnail.jpg');
}
p_str_li += " </a>"
p_str_li += " </div>"
}
}
Check these solutions:
Youtube: http://salman-w.blogspot.it/2010/01/retrieve-youtube-video-title.html
Vimeo: Dynamically get thumbnails and titles of vimeo videos [SOLVED!]