Remove From My Forums

How to load data form database to boostrap modal using ajax

Question

User-19694853 posted

i need to load database and bingding to texbox and checkbox or dropdownlist using ajax

anyone suggest me. thanks in advance

i use code this page

http://www.aspsnippets.com/Articles/ASPNet-jQuery-AJAX-CRUD-Select-Insert-Edit-Update-and-Delete-in-ASPNet-GridView-using-jQuery-AJAX.aspx

[WebMethod]
public static string GetCustomers(string id)
{
    string query = "SELECT * from customer where id='+ id +'";
    SqlCommand cmd = new SqlCommand(query);
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds.GetXml();
            }
        }
    }
}

but i don't know how to load to textbox and checkbox.

function about return Xml how to get that.

Friday, September 23, 2016 12:46 AM

Answers

User-707554951 posted

Hi zjm_zjm
From your description, I make an simple example, it works well in my application, you could refer to the code below:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
    function getUserName() {
        var $modal = $('#editUserPopUp'),
            $userName = $modal.find('#userName');      
        var text = "555"; 
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCurrentTime",
            data: '{id: "User" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {             
                var s = response.d;
                $userName.val(s);
                $modal.modal("show");
            },
            failure: function (response) {
                alert(response.d);
            }
        });             
    }
</script>

<body>
    <button onclick="getUserName()" id="Foo Bar">Open Modal</button>

<div class="modal fade" id="editUserPopUp" tabindex="-1" 
    role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Update Password</h4>
        </div>
        <div class="modal-body">                                                                                    
        <form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
          <div class="input-group col-md-8">
           <span class="input-group-addon">User Name</span>
             <input class="form-control" id="userName" type="text" class="input-medium" disabled />
          </div>           
        </form> 
       </div>   
    </div>
  </div>
</div>
</body>

 [System.Web.Services.WebMethod]
        public static string GetCurrentTime(string id)
        {
            string s = "Hello" + id;
            return s;
        }

Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know.
Best regards
Cathy

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, September 23, 2016 10:30 AM

Answered by:

How to load data form database to boostrap modal using ajax

Question

Answers