CODEWITHSUNDEEP
javascriptjqueryajax
Vidhyadhar Galande
Vidhyadhar Galande

Reputation: 585

Loop inside ajax append not working

I have an Ajax call as follows

$.ajax({
    type: "POST",
    url: '@Url.Action("SubMenuOrderingGetId", "Admin")',
    data: JSON.stringify({ selectManuId: selectManuId }),
    dataType: "text",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        $('#SubMenuTable12').empty();
        var count = 1;
        $('#SubMenuTable12').append("<tr><th>Id</th><th>Menu Name</th><th>Ordering</th><th>Status</th></tr>");
        var yourArray = $.parseJSON(data);
        if (yourArray != null) {
            var select = '';
            for (var j = 1; j <= 4; j++) {
                select.html = '<option value="' + j + '">' + j + '</option>';
                console.log(j);
            }
            console.log(select);
            for (var i = 0; i < yourArray.length; i++) {
                $('#SubMenuTable12').append(" <tr><td>" + count + "</td><td>" + yourArray[i].MenuName + "</td><td><select name='MenuOrdering211' class='form-control'><option value='Null'>Select Order....</option>'" + select + "'< /select><input type='hidden' class='chkHide1' name='chkHide' value='" + yourArray[i].Id + "'/></td><td><input type='checkbox' class='chkMenuStatus1' name='chkMenuStatus1' value='" + yourArray[i].Id + "' /></td></tr>");
                count++;
            }
        }
    },
    error: function (response) {
        if (response != 1) {
            alert("Error!!!!");
        }
   }
});

In my table with id SubMenuTable12 I have an Option with name='MenuOrdering211' I need to show value of j like (Select Order, 1, 2, 3, 4) as my loop will run 4 times I have used loop inside it it didn't work.Also I tried append by using another but shows string is empty.

Any help in this will be appreciated

Upvotes: 2

Views: 575

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Try:

if (yourArray != null) {
            var select = "<select name='MenuOrdering211' class='form-control'><option value='Null'>Select Order....</option>";
            for (var j = 1; j <= 4; j++) {
                select+= '<option value="' + j + '">' + j + '</option>';
                console.log(j);
            }
            select+='</select>';

 for (var i = 0; i < yourArray.length; i++) {
                $('#SubMenuTable12').append(" <tr><td>" + count + "</td><td>" + yourArray[i].MenuName + "</td><td>" + select + "<input type='hidden' class='chkHide1' name='chkHide' value='" + yourArray[i].Id + "'/></td><td><input type='checkbox' class='chkMenuStatus1' name='chkMenuStatus1' value='" + yourArray[i].Id + "' /></td></tr>");
                count++;
            }

Upvotes: 3

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

You are trying to modify html property of a string. Moreover, you overwrite this value, instead of appending.

Try the following:

if (yourArray != null) {
    var selectHtml = '';
    for (var j = 1; j <= 4; j++) {
        selectHtml += '<option value="' + j + '">' + j + '</option>';
        console.log(j);
    }

    console.log(selectHtml);

    for (var i = 0; i < yourArray.length; i++) {
        $('#SubMenuTable12').append(" <tr><td>" + count + "</td><td>" + yourArray[i].MenuName + "</td><td><select name='MenuOrdering211' class='form-control'><option value='Null'>Select Order....</option>'" + selectHtml + "'< /select><input type='hidden' class='chkHide1' name='chkHide' value='" + yourArray[i].Id + "'/></td><td><input type='checkbox' class='chkMenuStatus1' name='chkMenuStatus1' value='" + yourArray[i].Id + "' /></td></tr>");
        count++;
    }
}

Upvotes: 3

Related Questions