I'm using a plugin to rate values: http://www.radioactivethinking.com/rateit/example/example.htm
The following code works if I put directly into the HTML.
<li>
<p><strong>Product</strong>
<br/>
<input type="range" value="0" step="1" id="rateit" data-role="none">
<div class="rateit" id="rateitHover" data-rateit-backingfld="#rateit" data-rateit-resetable="false" data-rateit-ispreset="true"
data-rateit-min="0" data-rateit-max="5">
</div>
</p>
</li>
The code below doesn't work, it retrieves the default <input type="range"> by html.
$.getJSON(url, function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'>" +
"<p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false' data-rateit-ispreset='true' " +
"data-rateit-min='0' data-rateit-max='5'></div></p></li>";
});
$("#listviewA").append(info);
$("#listviewA").trigger("change");
$("#listviewA").listview("refresh");
});
How do I turn this into that plugin? Thanks!
You have a syntax error on your 4th/5th line. Take a look at your "'s you have an extra.
info += "<li id='" + item.id + "'><p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false' data-rateit-ispreset='true' " +
"data-rateit-min='0' data-rateit-max='5'></div></p></li>";
Ok, I've found that this is some kind of bug or something. I've tested with another plugins and doesn't work either. I'm now using a better plugin, which is more easier.
https://github.com/wbotelhos/raty
The html is very simple: <div id="score"></div>, although it is necessary to call it on jQuery.
$("#score").raty({
score: function() {
return $(this).attr('data-rating');
}
});
I've tried to adapt it and make all IDs uniques:
$.getJSON(url, function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'>" +
"<p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div id=" + 'score' + item.id + "></div></p></li>";
});
$("#listviewA").append(info);
$("#listviewA").trigger("change");
$("#listviewA").listview("refresh");
});
But continues not to work. I've tried in vain also:
$.getJSON(url, function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'>" +
"<p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div id=" + 'score' + item.id + "></div></p></li>";
$("#score" + item.id).raty({
score: function() {
return $(this).attr('data-rating');
}
});
});
$("#listviewA").append(info);
$("#listviewA").trigger("change");
$("#listviewA").listview("refresh");
});
Btw, I'm loading this function before page show..I don't know if that's the problem.
$(document).on("pagebeforeshow", "#main", function() {
$(function(){
get_info();
});
})
Related
I have a page in which I have to show list of data in UI through ajax & append the list data in html table save that list data into Local Storage with Jquery, My question is that I want to implement lazy load in UI such that user clicks a button (Click to view more list), and after clicking the button the ajax calls another list with limit & offset to show more list & append the new list below the existing list in UI and also save the data into local storage along with the existing data present.
My Ajax Call for List Data
var sendingData = {
limit: "50000",
offset: "0"
};
$.ajax({
type: 'POST',
url: "/Common/Item/getselleritems?SellerId=" + userid,
data: sendingData ,
crossDomain: true,
success: function (data)
{
localStorage.setItem("productCode", JSON.stringify(data));
},
error()
{
//Do something
}
});
``
My Html design Function
function showProducts()
{
var productsStorage = localStorage.getItem("productCode");
var products = JSON.parse(productsStorage);
var trHTML = '';
$("table tbody").html("");
$.each(products.Data, function (key, value)
{
trHTML += '<tr>'
+ '<td class="d-md-flex align-items-center">' + '<figure style="' + imgStyle + '"><a href="" title="Photo title" data-effect="mfp-zoom-in">' +
'<img src="' + imgSrc + '" alt="thumb" class="lazy"></a></figure>' +
'<div class="flex-md-column">' +
'<h4 class="package_name" id="itemdescription_' + value.Id + '" onclick = "packageDetails(\'' + value.Price + '\',\'' + value.Name + '\',\'' + value.Description
+ '\',\'' + itemTimeSlotType + '\',\'' + value.ServiceName + '\',\'' + value.PreparationTime + '\',\'' + value.Quantity + '\')" >' +
'<i class="icon_box-selected" style="' + style + '; margin-right:3px"></i>' +
value.Name + '</h4>' +
'<p>' + value.Description + '</p>' +
'<em>' + "Available In: " + itemTimeSlotType + '</em>' + '<br>' +
'<span class="stars_sellerItem" style="' + starStyle + '">' + value.FoodtestAvgRating + ' <i class="icon_star"> </i> ' +
'</span>' +
'</div>' +
'</td>' + '<td style="padding: 0.75rem 0 0.75rem 0;">' +
'<strong id="itemprice_' + value.Id + '">' +
'<i class="fa fa-inr" aria-hidden="true"></i>' + value.Price +
'</strong>' +
'</td>' +
'<td class="options">' +
'<div class="dropdown dropdown-options">' +
'<i class="icon_plus_alt2"></i>' +
'<div class="numbers-row number" id="item2_' + value.Id + '" data-id="' + value.Id + '">' +
'<input type="text" value="1" class="form-control" name="quantity" id="itemvalue_' + value.Id + '" onchange="getval(' + itemId + ');" readonly>' +
'<div class="inc button_inc plus">' + '+' + '</div><div class="dec button_inc minus">' + '-' + '</div>' + '</div>' +
'</td>' + '</tr>';
}
$("table tbody").append(trHTML);
}
I have to dynamically create buttons in an Ajax success function. There isn't a fixed number of buttons and
each time the number is different.
I can do it, but not knowing the exact number of elements that will be created, I don't know how to add the correct number of button listener.
AJAX:
success : function(data, status, xhr) {
$("#risultatoLibriCercati").empty();
var divContent = "";
for (var i = 0; i < data.length; i++) {
divContent +=
"<div class='col-sm-2 mt-4'><a data-toggle='modal' data-target='#bookPage" +
[i] +
"'><div class='card shadow-sm'><img style='height:250px' src='" +
data[i].imgLink +
"' class='img-thumbnail rounded'></div></a></div><div class='modal fade' id='bookPage" +
[i] +
"'><div class='modal-dialog'><div class='modal-content'><div class='modal-header text-center'><h4 class='modal-title w-100 dark-grey-text font-weight-bold'>" +
data[i].titolo +
"</h4><button type='button' class='close' data-dismiss='modal' aria-lable='close'>×</button></div><div class='mt-4' style='background: url(" +
data[i].imgLink +
") no-repeat;background-size: contain; background-position: center; min-height: 300px;'></div><div class='modal-body mx-4'><div class='md-form'><p class='font-small'>" +
data[i].autore +
"</p></div><div class='md-form'><p>" +
data[i].descrizione +
"</p></div><div class='text-center mb-3'><button class='btn btn-primary btn-block z-depth-1a' id='aggiungi" +
[i] +
"'>Aggiungi a libreria</button><a href='" +
data[i].isbn13.replace("'", " ") +
"' target='_blank' style='border:none;text-decoration:none'><img src='https://www.niftybuttons.com/amazon/amazon-button2.png'></a></div></div></div></div></div><input type='hidden' id='categoria" +
[i] +
"' value='" +
data[i].categoria +
"'><input type='hidden' id='googleID" +
[i] +
"' value='" +
data[i].googleID +
"'><input type='hidden' id='titolo" +
[i] +
"' value='" +
data[i].titolo.replace("'", " ") +
"'><input type='hidden' id='descrizione" +
[i] +
"' value='" +
data[i].descrizione.replace("'", " ") +
"'><input type='hidden' id='autore" +
[i] +
"' value='" +
data[i].autore +
"'><input type='hidden' id='isbn" +
[i] +
"' value='" +
data[i].isbn13.replace("'", " ") +
"'><input type='hidden' id='voto" +
[i] +
"' value='" +
data[i].voto +
"'><input type='hidden' id='imgLink" +
[i] +
"' value='" +
data[i].imgLink +
"'>";
}
$("#risultatoLibriCercati").append(divContent);
}
BUTTON ON CLICK LISTENER:
$(document).on('click', '#aggiungi0', function(){
var book = {
googleID: $("#googleID0").val(),
titolo: $("#titolo0").val(),
descrizione: $("#descrizione0").val(),
isbn13: $("#isbn0").val(),
voto: $("#voto0").val(),
imgLink: $("#imgLink0").val(),
autore: $("#autore0").val(),
categoria: $("#categoria0").val(),
userId: getCookie("userId"),
};
$.ajax({
[...]
You can add class attribute for those buttons and attach event and index for them as below
var btnIndex = 0;
$('#add').on('click', function() {
$('.container').append(`<button class="new-btn" data-index=${btnIndex++}>Button test</button>`);
});
$('.container').on('click', '.new-btn', function(e) {
console.log("clicked" + $(e.target).data("index"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div class="container"></div>
And passing these values by index into ajax call like this:
$(document).on('click', '.new-btn', function(e){
const idx = $(e.target).data("index");
var book = {
googleID: $("#googleID" + idx).val(),
titolo: $("#titolo" + idx).val(),
descrizione: $("#descrizione" + idx).val(),
isbn13: $("#isbn" + idx).val(),
voto: $("#voto" + idx).val(),
imgLink: $("#imgLink0" + idx).val(),
autore: $("#autore" + idx).val(),
categoria: $("#categoria" + idx).val(),
userId: getCookie("userId"),
};
$.ajax({
[...]
I add fields dynamically in my View. It's working good, but rules and events don't work for the new field. How do I can apply rules for new fields, like when you load the page for the first time.
If I added a new record in the database and refreshed the page, when rules and validation are working.
$(function addIstPIR() {
var i = #Model.pt3041iResourseBlockedSnyatyZamechaniya.Count-1;
$('.addIstPIR').click(function () {
i++;
var html2Add = "<div class='col-xs-12 col-sm-12 col-md-9 col-lg-6 form-material floating padding-horizontal-3 '>" +
"<select class='form-control' data-val='true' data-val-required='This field is required * !.' id='pt3041iResourseBlockedSnyatyZamechaniya_" + i + "__pt3041iResourseBlockedSnyatyZamechaniya' name='pt3041iResourseBlockedSnyatyZamechaniya[" + i + "].pt3041iResourseBlockedSnyatyZamechaniya'>" +
"<option selected='selected'></option>" +
"<option value='1'>Select 1</option>" +
"<option value='2'>Select 2</option>" +
"<option value='5'>Select 3</option>" +
"<option value='6'>Select 4</option>" +
"</select>" +
"<label class='floating-label text-truncate' for='pt3041iResourseBlockedSnyatyZamechaniya_" + i + "__pt3041iResourseBlockedSnyatyZamechaniya'>Some text</label>" +
"<span class='text-danger field-validation-valid' data-valmsg-for='pt3041iResourseBlockedSnyatyZamechaniya[" + i + "].pt3041iResourseBlockedSnyatyZamechaniya' data-valmsg-replace='true'></span>" +
"</div>" +
"<div class='form-material floating'>" +
"<input id='pt3041iResourseBlockedSnyatyZamechaniya_" + i + "__ppt3041id' name='pt3041iResourseBlockedSnyatyZamechaniya[" + i + "].ppt3041id' value='0' type='hidden'/>" +
"</div>" +
"<div class='col-xs-12 col-sm-9 col-md-7 col-lg-5 form-material floating'>" +
"<input class='form-control tDecimal3' data-val='true' data-val-number='The field Some text must be a number' data-val-required='Some text.' id='pt3041iResourseBlockedSnyatyZamechaniya_" + i + "__pt3041ivolume' name='pt3041iResourseBlockedSnyatyZamechaniya[" + i + "].pt3041ivolume' value='' type='text'>" +
"<label class='floating-label text-truncate' for='pt3041iResourseBlockedSnyatyZamechaniya_" + i + "__pt3041ivolume'>Some Text</label>" +
"</div>";
$('#IFPIRBlock').append(html2Add);
})
})
I am appending check-boxes in a div by jQuery. Div is scroll when overflow. But I see that when checkbox names are large then div does not horizontally scroll but extra content goes to next line while vertical scroll works fine . below is some code
below is code of div creation
<div id="legendBox" style="overflow:scroll;width:145px;height:300px;"></div>
This code is to add check boxes in DIV
if (legendChecked == "T")
{
legendtest = "<input type='checkbox' class='" + legendClass + "' name='" + legendName + "' style='background-color:" + legendColor + "' value='" + legendName + "' checked onClick=legendChanged(); title='" + legendName + "' />" + legendName;
} else
{
legendtest = "<input type='checkbox' class='" + legendClass + "' name='" + legendName + "' style='background-color:" + legendColor + "' value='" + legendName + "' onClick=legendChanged(); title='" + legendName + "' />" + legendName;
}
$("#legendBox").append(legendtest+"</br>");
Please tell me where is mistake.
Or add display:inline: http://jsfiddle.net/eq3r9/
Edit:
This is a better solution: http://jsfiddle.net/eq3r9/1/
I have a json file which contains questions and answers like this.
{
"Questions": [
{ "Q": "I enjoy playing video games" },
{ "Q": "I enjoy reading" },
{ "Q": "I enjoy watching tv" }
],
"Answers": [
{
"a": "Strongly Agree",
"b": "Agree",
"c": "Neutral",
"d": "Disagree",
"e": "Strongly Disagree"
}
]
}
The answers are always the same for each question. I am trying to do a loop in javascript to display each questiona the answers under it, something like this
1.I enjoy video games
RadioButton:Strongly agree RadioButton:Agree etc...
2. I enjoy reading
RadioButton:Strongly agree RadioButton:Agree etc...
right now i have this, but it doesn't really work
$.getJSON("questions.json",function(data)
{
$.each(data, function(i,data)
{
var div = document.createElement("div");
div.setAttribute("id", i);
document.createElement("div").setAttribute("id", i);
var div_data = "<div class='questions'><h2>" + data.Questions.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + 1+"' value='"+data.Answers.a+"'/>" +
"<label for='q" + i + 1+"'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + 2+"' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + 2+"'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 3+"' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + 3+"'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 4+"' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + 4+"'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 5+"' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + 5+"'>" + data.Answers.e + "</label>"
+"</div>" ;
document.getElementById("box").appendChild(div);
div.innerHTML = div_data;
});
});
You have to loop through data.Questions. See the code below. I have also optimized your code, so that the HTML is appended at once, rather than separately for each element.
Another note: You should change the i + 1, 1 + 2, 1 + 3, etc part to something more appropriate. Currently, it's just added, because it's inside a string context. Even if you add parentheses, the logic is still flawed: For i=1, i+2 = 3. For i=2, i+1 is also 3.
I have replaced i + 1 + "' with i + "_1', to give you an idea of the right approach.
$.getJSON("questions.json",function(data)
{
var html = "";
$.each(data.Questions, function(i, question)
{
html += "<div id=" + i + ">" +
"<div class='questions'><h2>" + question.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + "_1' value='"+data.Answers.a+"'/>" +
"<label for='q" + (i + "_1'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + "_2' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + "_2'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_3' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + "_3'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_4' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + "_4'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_5' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + "_5'>" + data.Answers.e + "</label>"
+ "</div></div>" ;
});
$("#box").append(html);
});
You aren't accessing the JSON properly. data.Questions.Q and data.Answers.a is not correct.
Both data.Questions and data.Answers are arrays. You would have to loop through those arrays and access them like data.Questions[i].Q.
Or change your JSON to match how you want the code to be able to iterate them. You can fix one or the other, but the two must match. It looks to me like you want to fix the code for the questions and fix the JSON for the answers, but that's a design decision that you can make.