locked
dynamic divs using jquery and web service RRS feed

  • Question

  • User-674342078 posted

    i want to populate records from database using web service and than call that web service using jquery ajax to read each record and create a new div element in particular div which has class name customs-row.

    here is my web service code

      public List<TeacherSearch> GetAllTeachersByFirstName(string _name)
            {
                List<TeacherSearch> listteacherSearches = new List<TeacherSearch>();
                myDatabase.CreateConnection();
                myDatabase.InitializeSQLCommandObject(myDatabase.GetCurrentConnection, "sp_SearchTeacherByFirstName", true);
                myDatabase.obj_sqlcommand.Parameters.AddWithValue("@TeacherName", _name);
                try
                {
                    myDatabase.OpenConnection();
                    myDatabase.obj_reader = myDatabase.obj_sqlcommand.ExecuteReader();
                    if (myDatabase.obj_reader.HasRows)
                    {
                        while (myDatabase.obj_reader.Read())
                        {
                            TeacherSearch teacherSearch = new TeacherSearch();
                            teacherSearch.FirstName = myDatabase.obj_reader["firstname"].ToString();
                            teacherSearch.LastName = myDatabase.obj_reader["lastname"].ToString();
                            teacherSearch.Photo = myDatabase.obj_reader["photo"].ToString();
                            teacherSearch.DateOfJoin = myDatabase.obj_reader["date_of_join"].ToString();
                            teacherSearch.CNIC = myDatabase.obj_reader["cnic_no"].ToString();
                            listteacherSearches.Add(teacherSearch);
                        }
                    }
                    else
                        HttpContext.Current.Response.Write("No teacher record found.");
    
                }
                catch (Exception exception)
                {
                    HttpContext.Current.Response.Write(exception.ToString());
                }
                finally
                {
                    myDatabase.CloseConnection();
                    myDatabase.obj_reader.Dispose();
                }
    
                return listteacherSearches;
            }

    and here is the output of the web service on input "sa"

    now i want to use jquery to read this information by calling this web service and for each TeacherSearch node create a separate div inside div which has class name customs-row.

    here is the code for calling this web service

      $('#btnsubmit').click(function() {
                    search();
                });
    
            function search() {
                var SearchdKey = $('#' + <%=txtSearch.ClientID%>).val();
                $.ajax({
                    url: 'source/WebServices/GetAllTeachers.asmx/GetAllTeachersByFirstName',
                    data: { _name: SearchdKey },
                    method: 'post',
                    datatype: 'xml',
                    success: function(data) {
                        var jqueryXml = $(data);
                        jqueryXml.each(function() {
                            var fname = jqueryXml.find('FirstName').text();
                            var lname = jqueryXml.find('LastName').text;
                            var photo = 'images/teachers/'+jqueryXml.find('Photo').text();
                            var CINC = jqueryXml.find('CNIC').text();
                            var dob = jqueryXml.find('DateOfBirth').text();
                            appendteacher(photo, fname, lname, CINC, dob);
                        });
                    },
                    error: function(error) {
                        alert(error);
                    }
    
                });
            }
    
    
    
    
    
    
            function appendteacher(imagepath,firstname,lastname,cnic,dateofjoin) {
                
                var parentdiv = $('div[class=customs-row]');
                parentdiv.append(' <div class="col-md-4 col-sm-6">');
                parentdiv.append(' <div class="edugate-layout-3">');
                parentdiv.append(' <div class="edugate-layout-3-wrapper">');
                parentdiv.append('<a class="edugate-image">');
                parentdiv.append('<img src="images/teachers/' + imagepath + '" alt="" class="img-responsive" /></a>');
                parentdiv.append('<div class="edugate-content">');
                parentdiv.append('<a href="#" class="title">' + firstname + ' ' + lastname + '</a>');
                parentdiv.append('<ul>');
                parentdiv.append('<li>CNIC Number: <b>' + cnic + '</b></li>');
                parentdiv.append('<li>Date Of Join: <b>' + dateofjoin + '</b></li>');
                parentdiv.append('</ul>');
                parentdiv.append('</div>');
                parentdiv.append('<div class="total-courses"><i class="fa fa-list"></i><a href="#">total courses 92</a></div>');
                parentdiv.append('<button class="btn btn-green"><span>View Details</span></button>');
                parentdiv.append('</div></div></div></div>');
    
            }

    the appendteacher function is used to append new div inside div which has class of customs-row.

    how can i make this possible to work correctly. 

    Saturday, September 3, 2016 3:48 PM

All replies

  • User-1142886626 posted

    Hi Jahangeer,

    i want to populate records from database using web service and than call that web service using jquery ajax to read each record and create a new div element in particular div which has class name customs-row.

    You need set breakpoint in your JavaScript to check the ajax get the data correctly.

    This article explained how to make a call to ASP.Net WebMethod using jQuery AJAX,you could refer to it.

    http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

    Best Regards,

    Ailleen

    Monday, September 5, 2016 8:41 AM