How to make dynamic list in HTML

Question

0.00/5 (No votes)

See more:

Hello
in HTML file, I have a list that is being repeated to create the list as shown below:

HTML

<div class="item">
  <div class="gallery-carousel-item">                              
    
      
        <div class="hover-mask-container">
           <div class="hover-zoom">
            <a href="project-single.html">Product A
              <span class="icon-container">
                
              </span>
            </a>
           </div>
        </div> 
    
  </div>
</div>
<!-- The code will be repeated here -->
<div class="item">
  <div class="gallery-carousel-item">                              
    
      
        <div class="hover-mask-container">
           <div class="hover-zoom">
            <a href="project-single.html">Product B
              <span class="icon-container">
                
              </span>
            </a>
           </div>
        </div>
    
  </div>
</div>

How can I create this list dynamically based on my records in sql data base using JavaScript ?
Thanks in Advance

What I have tried:

I have tried jqxWidjets but it will not make the UI that i want. I have just can make it using asp:ListView control but I want to make it using HTML tags.
for example:

HTML

Try it


function myFunction() {
    var x = document.createElement("UL");
    x.setAttribute("id", "myUL");
    document.body.appendChild(x);

    var a = ["Alpha","Beta","Gama"];
    for(i=0 ; i<=2 ; i++)
    {
       var y = document.createElement("LI");
       var t = document.createTextNode(a[i]);
       y.appendChild(t);
       document.getElementById("myUL").appendChild(y);
    }
}

Produces:
Alpha
Beta
Gama

based on "a" variables data(JSON data), How can I make the mentioned List based on SQL server data base records

Posted 17-Nov-16 21:06pm

Ali Majed HA

Updated 22-Nov-16 7:28am

v2

Add a Solution

Comments

Cristina Carrasco Angulo 18-Nov-16 17:43pm

Can you use jquery?, why vanilla javascript?

Ali Majed HA 18-Nov-16 23:27pm

Hi Cristina, Yes I can use JQuery.

2 solutions

Solution 1

you can use jquery template for a neat soln to avoid manually creating dom structure.

Meanwhile more sophisticated soln is to use aspnet Repeater control to use plain html as u want.

Both above soln. are very easy in ASP.NET

for jquery template

Basics of jQuery Templates[^]

you could use Register array from server side if you don't want to use ajax call.

for repeater

How to: Add a Repeater Control to a Web Forms Page[^]

Posted 19-Nov-16 3:15am

Mohtshm Zubair

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Cristina Carrasco Angulo · Accepted Answer · 2016-11-22T07:28:00

Here's an example: c# asp.net
Jquery Examples

How it works:
Get List

Add this:
Json.NET

How to add...
Add Newton json

.js

JavaScript

function GetList() {
    $.ajax({
        async: false,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ExampleList.aspx/GetList",
        dataType: "json",
        success: function (data, textStatus) {
            if (textStatus == "success") {
                var datos = jQuery.parseJSON(data.d);

                $("#List").html('');
                var list = '<ul>'
                $.each(datos, function (i, v) {
                    //list += '<li id="'+v.id+'">' + v.id + "-" + v.value + '</li>'
                    list += '<li id="'+v.id+'">' + v.value + '</li>'
                }); 
                list += '</ul>'

                $("#List").append(list);
            }
        },
        error: function (request, status, error) {
            alert(jQuery.parseJSON(request.responseText).Message);
        }
    });
}

HTML|ASP

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExampleList.aspx.cs" Inherits="JqueryExamples.ExampleList" %>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="Get List" onclick="GetList()"/>
    <div id="List">
        
    </div>
    </form>
    <script src="Scripts/jquery.js"></script>
<script src="Scripts/ExampleListsa.js"></script>
</body>
</html>

Code Behind:

C#

        [WebMethod]
        public static string GetList()
        {
            List<data> data = new List<data>();
            try
            {
                data.Add(new Data { id = 1, value = "Alpha" });
                data.Add(new Data { id = 2, value = "Beta" });
                data.Add(new Data { id = 3, value = "Gamma" });
                data.Add(new Data { id = 4, value = "Delta" });
                data.Add(new Data { id = 5, value = "Epsilon" });
                data.Add(new Data { id = 6, value = "Zeta" });

                var rnd = new Random();
                data = data.OrderBy(item => rnd.Next()).ToList();
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message, ex);
            }
            return JsonConvert.SerializeObject(data);
        }


        public partial class Data {
            public int id { get; set; }
            public string value { get; set; }
        }

</data></data>

Can add a Class with a method to get the data from SQL, here's and example how to connect to SQL:
How to Connect SQL Database

In the Code Behind change the GetList Method for this:

C#

public static string GetList()
       {
           List<data> data = new List<data>();
           try
           {
               data = SqlClass.GetList();//Need to created the SqlClass
           }
           catch (Exception ex)
           {
               throw new Exception(ex.Message, ex);
           }
           return JsonConvert.SerializeObject(data);
       }

How to make dynamic list in HTML

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us