locked
Populating DIVs in li control using javascript RRS feed

  • Question

  • User378463056 posted

    Hi Folk,

    I have a <ul> control and I want to embed couple divs in this ul and use the Ids of these DIVs to populate them. For instance; here is the hmtl

     <div>
            <h2>All Products</h2>
            <ul id="products">
                <li>
                    <div id="customer"></div>
                    <div id="custId"></div>
                </li>
            </ul>
        </div>

    What I want to do is using javascript/jquery to populate records in the divs inside the li. Here is the javascript script. It can only populate the ul and li. I need help to modify the javascript and use the div ids to populate individually. Here is javascript

        <script>
            var uri = 'api/Values';
    
        $(document).ready(function () {
          // Send an AJAX request
          $.getJSON(uri)
              .done(function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, item) {
                  // Add a list item for the product.
                  $('<li>', { text: formatItem(item) }).appendTo($('#products'));
                });
              });
        });
        function formatItem(item) {
            var customer = item.CustomerName;
            var custId = item.CustomerId;
            return;
        }
        </script>

    Friday, December 18, 2015 10:24 PM

Answers

  • User61956409 posted

    Hi pafeth,

    It seems that products list will be returned, would you like to dynamically create a html list to display returned data? If that is the case, you could refer to the following code.

    var uri = 'api/chatgroups';
    
    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON(uri)
            .done(function (data) {
                // On success, 'data' contains a list of products.
                var itemlist = "";
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    var item = "<li><div class='customer'>" + item.phone + "</div><div class='custId'>" + item.groupname + "</div></li>";
                    itemlist += item;
                });
    
                $("#products").append(itemlist);
            });
    });
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 22, 2015 6:25 AM
  • User378463056 posted

    OK guys, I got it. This is my answer

     $('ul').append('<li><div>' + blogname + '</div><div>' + phone + '</div><div>' + photo + '</div></li>');
                   

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 25, 2015 7:49 PM

All replies

  • User61956409 posted

    Hi pafeth,

    You could refer to the following code to find <div> from <li> using jQuery id selector.

    $("#customer")
    $("#custId")

    Then you could populate the divs using following code.

    $("#custId").text("the text");
                
    //or $("#custId").html("the text");
    

    Best Regards,

    Fei Han



    Saturday, December 19, 2015 9:39 AM
  • User378463056 posted

    Hi Fei,

    I am not much into javascript but looking at your example I changed the code. It is still wrong. Can you help modify this for me in the right location if you could? Here is the code

    var uri = 'api/chatgroups';
    
        $(document).ready(function () {
          // Send an AJAX request
          $.getJSON(uri)
              .done(function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    $('custId').text(item.groupname);
                    $('customer').text(item.phone);
                    //$('<li>', { text: formatItem(item) }).appendTo($('#products')
    
                    //    );
                });
              });
        });

    Sunday, December 20, 2015 8:03 PM
  • User61956409 posted

    Hi pafeth,

    It seems that products list will be returned, would you like to dynamically create a html list to display returned data? If that is the case, you could refer to the following code.

    var uri = 'api/chatgroups';
    
    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON(uri)
            .done(function (data) {
                // On success, 'data' contains a list of products.
                var itemlist = "";
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    var item = "<li><div class='customer'>" + item.phone + "</div><div class='custId'>" + item.groupname + "</div></li>";
                    itemlist += item;
                });
    
                $("#products").append(itemlist);
            });
    });
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 22, 2015 6:25 AM
  • User475983607 posted

    This is a duplicate post!

    http://forums.asp.net/t/2080702.aspx?Javascript+problem

    Tuesday, December 22, 2015 11:17 AM
  • User378463056 posted
    
    

    Your code works but it create new li divs instead of the predefined ones. I want to the predefined DIVs in the UL. Can u change the

     var item = "<li><div class='customer'>" + item.phone + "</div><div class='custId'>" + item.groupname + "</div></li>";
                    itemlist += item;
    

    to populate these predefined control by id?

     <ul id="products">
                    <li>
                        <div id="groupname"></div>
                        <div id="phone"></div>
                        <div id="photo"></div>
                    </li>
               </ul>

    Friday, December 25, 2015 6:09 AM
  • User378463056 posted

    OK guys,

    I tried to change the script like this.

    var uri = 'api/bloggers';
    
        $(document).ready(function () {
            // Send an AJAX request
            $.getJSON(uri)
                .done(function (data) {
                    // On success, 'data' contains a list of products.
                    var itemlist = "";
                    $.each(data, function (key, item) {
                        // Add a list item for the product.
                        var item = $("#displayname").html(item.blogname) +
                                   $("#phone").html(item.Phone) +
                                   $("#photo").html(item.photo);
                                    
                        itemlist += item;
                    });
    
                    $("#products").append(itemlist);
                });
        
                    //Helpers
                function createData(blogname, photo, phone) {
                    
                        var item = new Object();
                        item.phone = Phone;
                        item.BlogName = blogname;
                        item.photo = photo;
                    
                        return item;});

    These are the div tag I want to populate inside a li

    <ul id="products">
                    <li>
                        <div id="displayname"></div>
                        <div id="phone"></div>
                        <div id="photo"></div>
                    </li>
     </ul>

    If you are a javascript guru you should know the output based on the script above. It gives me an output of

    [object Object][object Object][object Object][object Object][object Object][object Object]

    Please help if you know how to do that. I am not a JavaScript guy.

    thanks in advance

    Friday, December 25, 2015 7:30 PM
  • User378463056 posted

    OK guys, I got it. This is my answer

     $('ul').append('<li><div>' + blogname + '</div><div>' + phone + '</div><div>' + photo + '</div></li>');
                   

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 25, 2015 7:49 PM