CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcmodal-dialog
Brave Soul
Brave Soul

Reputation: 3620

Jquery Modal Popup dialog not loading content

I want to show a modal popup which will contain list of string

I tried this

in Jquery

$("#modalFilterDiv").load("<div><p>This is html generated from Jquery</p><ul><li>"+loopChartID+"</li></ul></div>").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        hieght: 450,
        width: 800,
        dialogClass: 'FilterSelectedList',
        modal: true

    }).dialog("open");

in Index.cshtml

<div id="modalFilterDiv" title="Select Controls To Filter">
</div>

I am calling this on one of the button click. it is showing blank modal popup without any data

without p tag and li tag

I want to load the data from load function which will return one item right now. When I debug this I am able to see value in loopChartID but it is not showing on modal popup.

<div><p>Heading for List goes here</p><ul><li>"+loopChartID+"</li></ul></div>"

Please help me understand this and to make it work.

Upvotes: 0

Views: 511

Answers (1)

Satpal
Satpal

Reputation: 133403

$.fn.load() loads data from the server and place the returned HTML into the matched element. Where as you need to set the HTML content so instead of $.fn.load() use $.fn.html()

$("#modalFilterDiv")
    .html("<div><p>This is html generated from Jquery</p><ul><li>"+loopChartID+"</li></ul></div>")
    .dialog({
    });

Use loop to generate HTML

var ul = $('<ul />');
for(var i =0;i <10; i++){
    ul.append($('<li />', { text : i }));
}

var div = $('<div />')
            .html('<p>This is html generated from Jquery</p>')
            .append(ul);

$("#modalFilterDiv")
    .html(div)
    .dialog({
    });


$(function() {
  var ul = $('<ul />');
  for (var i = 0; i < 10; i++) {
    ul.append($('<li />', {
      text: i
    }));
  }

  var div = $('<div />')
    .html('<p>This is html generated from Jquery</p>')
    .append(ul);

  $("#modalFilterDiv")
    .html(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalFilterDiv"></div>

Upvotes: 2

Related Questions