CODEWITHSUNDEEP
javascriptjqueryhtmlajaxcheckbox
Adi
Adi

Reputation: 1455

Adding Checkboxes into jquery dilaogue box dynamically

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.

Upvotes: 1

Views: 834

Answers (2)

Sridhar R
Sridhar R

Reputation: 20408

''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)
            }
        });
    });

Upvotes: 2

Jirka Kopřiva
Jirka Kopřiva

Reputation: 3089

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

Upvotes: 0

Related Questions