Adding Checkboxes into jquery dilaogue box dynamically

Question

I have a jquery dialogue box which is showing checkboxes .These checkboxes are hardcoded .Now i have got a requirement where i need to show the checkboxes dynamically from database. To get the values for checkboxes from database i implemented ajax call on window.load()

$(window).load(function() {
        $.ajax({
            type: 'GET',
            url: 'Sites',
            success: function(data) {
                debugger;
                var city=JSON.parse(data);
            for(var i in city)
            {
              output ='<input type="checkbox"   id="'+city[i]+'" name="'+city[i]+'" value="'+city[i]+'" />'+city[i]+'<br />'
            }
            console.log(output)
            }
        });
    });

Here data is present in the formate [Mumbai, Delhi, Bangalore] and this data is retrived from java servlet in the form of arraylist..

Here is my code to show checkboxes in dialogue box but checkboxes values are hardcoded which i need to show dynamically from window.load data ..Checkboxes names ,id and value should be the same as the value got from window.load ajax call..

Here is my hardcoded script in jquery..

var $dialog = $('<div></div>')
        .html('<form id="myform" action="">'+output+'</form>')
        .dialog({
            autoOpen: false,
            title: 'Select Sites',
            buttons: {
                "Submit": function() {  $('form#myform').submit();},
                "Cancel": function() {$(this).dialog("close");}
            }
        });
        });

And this is the button click in which i need to open the dialogue box..

 $('#ssites').click(function(evt) {
            variable="";
            $dialog.dialog('open');
            evt.preventDefault();
            // prevent the default action, e.g., following a link
            return false;
        });

Any help will be highly appreciated.

Sridhar R · Accepted Answer · 2013-10-29T11:53:21.300

2

''Try this..

$(window).load(function() {
        $.ajax({
            type: 'GET',
            url: 'Sites',
            success: function(data) {
                var city=data.city
                for(var i in city)
                {
                   var output='<input type="checkbox"   id="'+city[i]+'" name="'+city[i]+'" value="'+city[i]+'" />'+city[i]+'<br />'
                }
                consoloe.log(output)
            }
        });
    });

edited Oct 29 '13 at 11:53

answered Oct 29 '13 at 11:47

Sridhar R

20,190
6
38
35

thank you Sir for answer i have one doubt how to take var output and use in dialogue box .. – Adi Oct 29 '13 at 11:59
create an empty div on your page
after get data in output you can append to dialog like this and open dialog $('#dialog-confirm').html(output); $('#dialog-confirm').dialog('open');
– Sridhar R Oct 29 '13 at 12:05
if you have doubt refer this with my ans sute you will get idea http://stackoverflow.com/questions/3694693/how-to-have-jqueryui-dialog-box-dynamically-load-content – Sridhar R Oct 29 '13 at 12:05
sir my dialogue box needs to open on click event of link then how to do it – Adi Oct 29 '13 at 12:10
$("#someButton").click(function() { //your functionss } – Sridhar R Oct 29 '13 at 12:12
sir i updated my code with my current code.Checkboxes are not coming in dialogue box – Adi Oct 29 '13 at 12:36

score 0 · Answer 2 · answered Oct 29 '13 at 11:51

1) Create empty unique div

<div id="content"></div>

2) Load and parse DB data. Depends on input format - html/json

success: function(data) { $("content").html(data); // or json parse }

3) Create dialog from #content

Adding Checkboxes into jquery dilaogue box dynamically

2 Answers2