Develop Reference

Dynamically number of buttons after ajax call

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({
[...]

Is it possible to pass a list/array of arguments to a JS function from C#?

For instance Is it possible to pass the following parameters as arguments to a JS function from code-behind?:
ddlLines.Attributes.Add("onchange", "setPanel("
+ " '" + ddlAdd.ClientID + "', "
+ " '" + nCkPTitle.ClientID + "', "
+ " '" + manCkEntry.ClientID + "', "
+ " '" + nCkLabel.ClientID + "', "
+ " '" + txtRefNo.ClientID + "', "
+ " '" + TCEE.pval + "', "
+ " '" + TCEE.ptxt + "', "
+ " '" + ddlLines.ClientID + "' "
+ ");"
At this time my JS function argument list is as follows:
function setPanel(ddlClientId, lblClientId, lblManCLientId,
lblRefNo, altRefNo, altValParm, altTxtParm, ddlLinesClientId){
...
}
I would like to be able to dynamically send an indeterminate list of parameters as arguments to the JS function from the code behind.
I have researched the .apply() function, but have not been able to use it successfully.

You just need to add [] ,it is means Array in js
ddlLines.Attributes.Add("onchange", "setPanel("
+ " ['" + ddlAdd.ClientID + "', "
+ " '" + nCkPTitle.ClientID + "', "
+ " '" + manCkEntry.ClientID + "', "
+ " '" + nCkLabel.ClientID + "', "
+ " '" + txtRefNo.ClientID + "', "
+ " '" + TCEE.pval + "', "
+ " '" + TCEE.ptxt + "', "
+ " '" + ddlLines.ClientID + "'] )"
);
But I suggest that you can use json here,such as
ddlLines.Attributes.Add("onchange", "setPanel("
+ " {'aaaID':'" + ddlAdd.ClientID + "', "
//...
+ " 'zzzID':'" + ddlLines.ClientID + "'} )"
);

Insert image in Bootstrap Popover

I am using Bootstrap Popver. I have inserted some data in the popover and want to insert a image as well. This is what I have tried.
Code:
var img = '<div id = "image"><img src = "http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" /></div>';
var button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + metric_name[metric] + ": " + display_val + img + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
Initialisation:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});
I have seen some examples on Stack Overflow, but it didn't work for me as I want to insert it inside the button declaration.

Make use of the content setting of the popover function:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true,
content: img //loads the image inside the popover container
});
DEMO

I have solved it using the code below.
button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + returnPOContent(metric_name[metric], display_val) + "\"" +
//" data-content = \"" + metric_name[metric] + ": " + display_val + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
function returnPOContent(mName, dVal) {
var popOverContent = mName + ": " +dVal+"</br><div id='test'><img src='http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg'/></div>";
return popOverContent;
}
$("button").popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});

Move Table Rows

I have my table like this, I want to move up and down these rows on click these arrows can anybody help me out ......
function MoveRowDown(tableId, index)
{
var rows = $("#" + tableId + " tr");
rows.eq(index).insertAfter(rows.eq(index + 1));
}
function MoveRowUp(tableId, index)
{
var rows = $("#" + tableId + " tr");
rows.eq(index).insertBefore(rows.eq(index - 1));
}
int ItemSetupID = EBusiness.GetCommonSetupID(this.Data.WFID, EBusiness.CommonSetupID.ItemSetup);
MModules objItemSetupModules = new MModules();
objItemSetupModules.LoadModules(ItemSetupID);
StringBuilder ret = new StringBuilder(4000);
ret.Append("<table class=\"box-table-a\"><tr><td><img id=\"left\" src=\"../../images/downarrow.png\" onclick=\"MoveRowDown(tableId,index);\"></td></tr><tr><td>");
ret.Append("<table id=\"tableId\" class=\"box-table-a\"><tr><th>Items</th></tr>");
int index = 0;
foreach (MModule module in objItemSetupModules.Modules)
{
ret.Append("<tr><td><input type=\"hidden\" name=\"Items" + module.ModuleID + "\" id=\"Items" + module.ModuleID + "\" />");
ret.Append("<tr><td><input type=\"hidden\" name=\"index" + index + "\" id=\"index" + index + "\" />");
ret.Append("<a href=\"#\" class=\"lnkShowFilter\" onclick=\"$('#index" + index + "').val('#index" + index + "'); $('.lnkShowFilter').css('color', '#000000');this.style.color='#FF0000';ShowFilterSaleMargin('" + module.TableName + "', '" + module.Title + "', 'divFilter" + module.ModuleID + "')\">");
ret.Append("" + module.Title + "</a> ");
ret.Append("<input type=\"hidden\" id=\"hidShowFilter" + module.Title + "\" value=\"false\" />");
ret.Append("<div id=\"divFilter" + module.ModuleID + "\" style=\"text-align:left;border:1px SOLID #333333;background-color:White;display:none;position:absolute;\">");
ret.Append("<div id=\"sdivFilter" + module.ModuleID + "\" style=\"border:1px SOLID #EEEEEE;background-color:#AAAABB; width:150px;height:100px;overflow-y:auto;\"></div>");
ret.Append("<input type=\"button\" value=\" OK \" class=\"button\" onclick=\"$('#' + openedDivID).hide();GetItemData('" + module.ModuleID + "', '" + module.Title + "');\" />");
ret.Append("</div></td></tr>");
index++;
}
ret.Append("</table></td><td>");
ret.Append("<table class=\"box-table-a\"><tr><th>Data</th></tr>");
foreach (MModule module in objItemSetupModules.Modules)
{
ret.Append("<tr id=\"tdModule" + module.ModuleID + "\"><td ></td></tr>");
}
ret.Append("</table></td></tr><tr><td><img id=\"left\" src=\"../../images/uparrow.png\" onclick=\"MoveRowUp(tableId, index);\"></td></tr></table>");
this.Output = ret.ToString();

We have to use insertBefore and insertAfter methods of jQuery to insert before and after the dom element respectively.
The sample code is like:
if(e.target.innerHTML == "Up") {
if(index != 0) {
currRow.insertBefore($("tr:eq(" + (index-1) + ")"));
}
} else if(e.target.innerHTML == "Down") {
if(index != (totalTrs-1)) {
currRow.insertAfter($("tr:eq(" + (index+1) + ")"));
}
}
Working DEMO
Source:
Insert After jQuery
Insert Before jQuery

JavaScript-Move Up and Down HTML Table Row: Working Code
function MoveRowDown(tableId)
{
var index=parseInt(document.getElementById("HiddRowindex").value);
var rows = $("#" + tableId + " tr");
table= document.getElementById(tableId);
rowCount = table.rows.length;
if(index+1<rowCount)
{
rows.eq(parseInt(index)).insertAfter(rows.eq(index + 1));
index=(index+1);
document.getElementById("HiddRowindex").value=index;
}
}
function MoveRowUp(tableId)
{
var index=parseInt(document.getElementById("HiddRowindex").value);
var rows = $("#" + tableId + " tr");
table= document.getElementById(tableId);
rowCount = table.rows.length;
if(index-1>0)
{
rows.eq(index).insertBefore(rows.eq(index - 1));
index=(index-1);
document.getElementById("HiddRowindex").value=index;
}
}
///////////////////////////End JavaScript///////////////////////////////
///////////////////////////Code////////////////////////////////////////
int ItemSetupID = EBusiness.GetCommonSetupID(this.Data.WFID,
EBusiness.CommonSetupID.ItemSetup);
MModules objItemSetupModules = new MModules();
objItemSetupModules.LoadModules(ItemSetupID);
StringBuilder ret = new StringBuilder(4000);
ret.Append("<table class=\"box-table-a\"><tr><td><img id=\"left\" src=\"../../images/downarrow.png\" onclick=\"MoveRowDown('tableId');\"></td></tr><tr><td>");
ret.Append("<table id=\"tableId\" class=\"box-table-a\"><tr><th>Items</th><th>Data</th></tr><input type=\"hidden\" name=\"HiddRowindex\" id=\"HiddRowindex\" value=\"\" />");
int index = 1;
foreach (MModule module in objItemSetupModules.Modules)
{
ret.Append("<tr><td><input type=\"hidden\" name=\"Items" + module.ModuleID + "\" id=\"Items" + module.ModuleID + "\" />");
ret.Append("<a href=\"#\" class=\"lnkShowFilter\" onclick=\"$('#HiddRowindex').val($(this).closest('td').parent()[0].sectionRowIndex); $('.lnkShowFilter').css('color', '#000000');this.style.color='#FF0000';ShowFilterSaleMargin('" + module.TableName + "', '" + module.Title + "', 'divFilter" + module.ModuleID + "')\">");
ret.Append("" + module.Title + "</a> ");
ret.Append("<input type=\"hidden\" id=\"hidShowFilter" + module.Title + "\" value=\"false\" />");
ret.Append("<div id=\"divFilter" + module.ModuleID + "\" style=\"text-align:left;border:1px SOLID #333333;background-color:White;display:none;position:absolute;\">");
ret.Append("<div id=\"sdivFilter" + module.ModuleID + "\" style=\"border:1px SOLID #EEEEEE;background-color:#AAAABB; width:150px;height:100px;overflow-y:auto;\"></div>");
ret.Append("<input type=\"button\" value=\" OK \" class=\"button\" onclick=\"$('#' + openedDivID).hide();GetItemData('" + module.ModuleID + "', '" + module.Title + "');\" />");
ret.Append("</div></td>");
ret.Append("<td id=\"tdModule" + module.ModuleID + "\"></td>");
ret.Append("</tr>");
index++;
}
ret.Append("</table></td>");
ret.Append("</tr><tr><td><img id=\"left\" src=\"../../images/uparrow.png\" onclick=\"MoveRowUp('tableId');\"></td></tr></table>");
this.Output = ret.ToString();

jquery increase by 1

Afternoon,
I would like to increase the number in this code by 1 for each question displayed.
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question 1</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
With this it would show, question 1, question 2, and so on...
How would i go about doing this in jQuery please?
Update Victor provided what i needed, thanks all for your help. Updated code below.
var questionNumber = 1;
$.each(result, function (index, res) {
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question " + (questionNumber++) + "</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
$('#pinfos').append(new_question);

Declare a variable outside your loop and incremenet it inside your loop and use that in the markup.
var questionNumber=0;
$.each(someJsonData, function (index, res) {
{
questionNumber++;
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question "+questionNumber+"</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
}

Declare a var called questionNumber and increment it at each call
var questionNumber = 1;
$.each(result, function (index, res) {
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question " + (questionNumber++) + "</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
$('#pinfos').append(new_question);