ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,502 questions
How to create html inside jQuery function dynamic instead of using html controls static ?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(262.40000000000003, 77%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAS%3C/text%3E%3C/svg%3E)
ahmed salah
3,216
Reputation points
I work on jQuery i have issue I can't append html inside jQuery script
SO jQuery function GET_ITO_PROJECTS_DASHBOARD_SP() will create all html scripts below
and i will remove html static and i will create all html at runtime within function
so exactly How to make function GET_ITO_PROJECTS_DASHBOARD_SP add html dynamic on function at run time .
so function will add and create html within it
so i will merge both html and jQuery inside function GET_ITO_PROJECTS_DASHBOARD_SP()
function GET_ITO_PROJECTS_DASHBOARD_SP() {
var P_OWENER_ORG_ID = $("#hiddenCompCivilNo").val();
var data = "{'P_OWENER_ORG_ID': '" + P_OWENER_ORG_ID +
"'}";
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../BusinessLayer/WebMethods.asmx/GET_ITO_PROJECTS_DASHBOARD_SP",
data: data,
dataType: "json",
success: function (Result) {
if (Result.d.Status == "1") {
$("#gvResultSub").empty();
$("#gvResultSub").html('<thead></thead><tbody></tbody>');
var rowNo = 0;
if (Result.d.P_PROJ_SUBMISSION_CUR != null) {
if (Result.d.P_PROJ_SUBMISSION_CUR.length > 0) {
$('.gvResultSub-container').show();
for (var i in Result.d.P_PROJ_SUBMISSION_CUR) {
if (rowNo == 0) {
if (MYLang.ReturnLang() == "ar-KW") {
$("#gvResultSub >thead").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>اسم المشروع</th><th>التاريخ </th></tr>");
}
}
var row = `<tr ${rowStyle} align='center' id='tr${Result.d.P_PROJ_SUBMISSION_CUR[i].PROJECT_NAME}' class='record'>
<td class='tdCount'>${rowNo + 1}</td>
<td>${Result.d.P_PROJ_SUBMISSION_CUR[i].PROJECT_NAME}</td>
<td>${Result.d.P_PROJ_SUBMISSION_CUR[i].stageDate}</td>
</tr>`;
$("#gvResultSub > tbody").append(row);
rowNo++;
}
}
}
$("#gvResultClose").empty();
$("#gvResultClose").html('<thead></thead><tbody></tbody>');
var rowNo = 0;
if (Result.d.P_PROJ_CLOSING_CUR != null) {
if (Result.d.P_PROJ_CLOSING_CUR.length > 0) {
$('.gvResultClose-container').show();
for (var i in Result.d.P_PROJ_CLOSING_CUR) {
if (rowNo == 0) {
if (MYLang.ReturnLang() == "ar-KW") {
$("#gvResultClose >thead").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>اسم المشروع</th><th>التاريخ </th></tr>");
}
}
var row = `<tr ${rowStyle} align='center' id='tr${Result.d.P_PROJ_CLOSING_CUR[i].PROJECT_NAME}' class='record'>
<td class='tdCount'>${rowNo + 1}</td>
<td>${Result.d.P_PROJ_CLOSING_CUR[i].PROJECT_NAME}</td>
<td>${Result.d.P_PROJ_SUBMISSION_CUR[i].stageDate}</td>
</tr>`;
$("#gvResultClose > tbody").append(row);
rowNo++;
}
}
}
}
}
}
}
});
}
html script I need add it to function GET_ITO_PROJECTS_DASHBOARD_SP
<div class="row">
<div class="col-12">
<div id="card-main_Index" class="card customCard card-outline-primary" style='background-color:rgba(255, 255, 255, 0.3);'>
<div class="card-header">
<h4 class="m-b-0 text-white card-title text-center">
</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-lg-1">
</div>
<div class="col-12 col-lg-5 gvResultSub-container hide">
<div class="form-group">
<div class="card card-outline-success">
<div style="background-color: #006400;font-size:18px;padding: .75rem 1.25rem;font-weight: 600;height: 50px;color: #ffffff;">
الطرح
</div>
<div class="card-body">
<table id="gvResultSub" class="table table-striped table-hover table-bordered">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-5 gvResultClose-container hide">
<div class="form-group">
<div class="card card-outline-success">
<div class="card-header bg-danger text-light">
الاغلاق
</div>
<div class="card-body">
<table id="gvResultClose" class="table table-striped table-hover table-bordered">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-1">
</div>
</div>
</div>
</div>
</div>
</div>
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(262.40000000000003, 36%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ELH%3C/text%3E%3C/svg%3E)
Lan Huang-MSFT 29,666 Reputation points Microsoft Vendor2024-07-01T03:56:03.6933333+00:00 Hi @ahmed salah,
You'd better provide the code of ASMX method.
Or you can check whether the data is returned by yourself. Use
console.log(Result);oralert(Result);Here are a few points to note:
Change "hide" to: style="display: none".
<div class="col-12 col-lg-5 gvResultSub-container" style="display: none">You did not provide ${rowStyle} in your code.
Here is a working example I tested for your reference.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { var P_OWENER_ORG_ID = 1; var data = "{'P_OWENER_ORG_ID': '" + P_OWENER_ORG_ID + "'}"; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "../BusinessLayer/WebMethods.asmx/GET_ITO_PROJECTS_DASHBOARD_SP", data: data, dataType: "json", success: function (Result) { //console.log(Result); //alert(Result); $("#gvResultSub").empty(); $("#gvResultSub").html('<thead></thead><tbody></tbody>'); var rowNo = 0; if (Result.d != null) { if (Result.d.length > 0) { $('.gvResultSub-container').show(); for (var i in Result.d) { if (rowNo == 0) { $("#gvResultSub >thead").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>اسم المشروع</th><th>التاريخ </th></tr>"); } var row = `<tr align='center' id='tr${Result.d[i].PROJECT_NAME}' class='record'> <td class='tdCount'>${rowNo + 1}</td> <td>${Result.d[i].PROJECT_NAME}</td> <td>${Result.d[i].stageDate}</td></tr>`; $("#gvResultSub > tbody").append(row); rowNo++; } } } } }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="row"> <div class="col-12"> <div id="card-main_Index" class="card customCard card-outline-primary" style='background-color: rgba(255, 255, 255, 0.3);'> <div class="card-header"> <h4 class="m-b-0 text-white card-title text-center"></h4> </div> <div class="card-body"> <div class="row"> <div class="col-12 col-lg-1"> </div> <div class="col-12 col-lg-5 gvResultSub-container" style="display: none"> <div class="form-group"> <div class="card card-outline-success"> <div style="background-color: #006400; font-size: 18px; padding: .75rem 1.25rem; font-weight: 600; height: 50px; color: #ffffff;"> الطرح </div> <div class="card-body"> <table id="gvResultSub" class="table table-striped table-hover table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="col-12 col-lg-5 gvResultClose-container " style="display: none"> <div class="form-group"> <div class="card card-outline-success"> <div class="card-header bg-danger text-light"> الاغلاق </div> <div class="card-body"> <table id="gvResultClose" class="table table-striped table-hover table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="col-12 col-lg-1"> </div> </div> </div> </div> </div> </div> </form> </body> </html>[WebMethod] public P_PROJ_SUBMISSION_CUR[] GET_ITO_PROJECTS_DASHBOARD_SP(int P_OWENER_ORG_ID) { P_PROJ_SUBMISSION_CUR[] catalog = new P_PROJ_SUBMISSION_CUR[1]; P_PROJ_SUBMISSION_CUR cat = new P_PROJ_SUBMISSION_CUR(); cat.P_OWENER_ORG_ID = P_OWENER_ORG_ID; cat.stageDate = "His Book"; cat.PROJECT_NAME = "asd"; catalog.SetValue(cat, 0); return catalog; } public class P_PROJ_SUBMISSION_CUR { public int P_OWENER_ORG_ID { get; set; } public string PROJECT_NAME { get; set; } public string stageDate { get; set; } } -
ahmed salah 3,216 Reputation points
2024-07-01T06:48:29.53+00:00 thanks
this answer Not what I need
I need jQuery create html within function jQuery
examplefunction GET_ITO_PROJECTS_DASHBOARD_SP() {
var row=" <div id="card-main_Index" class="card customCard card-outline-primary" style='background-color: rgba(255, 255, 255, 0.3);'>
<div class="card-header"> <h4 class="m-b-0 text-white card-title text-center"></h4> </div> <div class="card-body"> .................................................................... until end of script"; ```} -
Lan Huang-MSFT 29,666 Reputation points Microsoft Vendor
2024-07-01T08:00:40.8333333+00:00 Hi @ahmed salah,
I think I understand what you mean, you want to put the html part in JS. Just append the html to form.
var row = `***`; $("#form1").append(row);Complete example:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-3.4.1.min.js"></script> <script> function GET_ITO_PROJECTS_DASHBOARD_SP() { var row = `<div class="row"> <div class="col-12"> <div id="card-main_Index" class="card customCard card-outline-primary" style='background-color: rgba(255, 255, 255, 0.3);'> <div class="card-header"> <h4 class="m-b-0 text-white card-title text-center"></h4> </div> <div class="card-body"> <div class="row"> <div class="col-12 col-lg-1"> </div> <div class="col-12 col-lg-5 gvResultSub-container" style="display: none"> <div class="form-group"> <div class="card card-outline-success"> <div style="background-color: #006400; font-size: 18px; padding: .75rem 1.25rem; font-weight: 600; height: 50px; color: #ffffff;"> الطرح </div> <div class="card-body"> <table id="gvResultSub" class="table table-striped table-hover table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="col-12 col-lg-5 gvResultClose-container " style="display: none"> <div class="form-group"> <div class="card card-outline-success"> <div class="card-header bg-danger text-light"> الاغلاق </div> <div class="card-body"> <table id="gvResultClose" class="table table-striped table-hover table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="col-12 col-lg-1"> </div> </div> </div> </div> </div> </div>`; $("#form1").append(row); var P_OWENER_ORG_ID = 1; var data = "{'P_OWENER_ORG_ID': '" + P_OWENER_ORG_ID + "'}"; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "../BusinessLayer/WebMethods.asmx/GET_ITO_PROJECTS_DASHBOARD_SP", data: data, dataType: "json", success: function (Result) { //console.log(Result); //alert(Result); $("#gvResultSub").empty(); $("#gvResultSub").html('<thead></thead><tbody></tbody>'); var rowNo = 0; if (Result.d != null) { if (Result.d.length > 0) { $('.gvResultSub-container').show(); for (var i in Result.d) { if (rowNo == 0) { $("#gvResultSub >thead").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>اسم المشروع</th><th>التاريخ </th></tr>"); } var row = `<tr align='center' id='tr${Result.d[i].PROJECT_NAME}' class='record'> <td class='tdCount'>${rowNo + 1}</td> <td>${Result.d[i].PROJECT_NAME}</td> <td>${Result.d[i].stageDate}</td></tr>`; $("#gvResultSub > tbody").append(row); rowNo++; } } } } }); } </script> </head> <body> <form id="form1" runat="server"> <button type="button" onclick="GET_ITO_PROJECTS_DASHBOARD_SP()">Add</button> </form> </body> </html>
Sign in to comment
Sign in to answer