How to Display JSON Parsed Data in Popup Using jQuery

Question

I am using image map and i want to display data in popup when i click any coords then data display in popup. How to show data in popup if i write code in jQuery?

Below, is my HTML, jQuery and C# Code. The Data is fetched frpm the database and should be displayed in popup. C# code and jQuery code working fine but, how to display data in popup?

HTML

        <img src="~/image/map.jpg" usemap="#image-map" class="map" />

        <map name="image-map" class="map">
            <area target="" alt="" title="" href="" id="2" coords="1008,370,33" shape="circle">
            <area target="" alt="" title="" href="" coords="962,420,23" shape="circle">
            <area target="" alt="" title="" href="" coords="932,461,18" shape="circle">
            <area target="" alt="" title="" href="" coords="888,464,867,485,907,541,929,501" shape="poly">
            <area target="" alt="" title="" href="" coords="851,507,836,532,876,566,907,541" shape="poly">
        </map>

        <label id="mname"></label>
        <label id="city"></label>
        <label id="mid"></label>
        <label id="cordsid"></label>


    </form>

Script

<script>

        $(".map area").click(function () {

            $.ajax({
                url:'@Url.Action("Member_Detail")',
                data: { 'cords': this.id },
                type: "post",
                cache: false,
                dataType: "JSONP",
                success: function (resdata) {
                    alert("success", resdata);
                },
                error: function (result, status, err) {
                    console.log("error", result.responseText);
                    console.log("error", status.responseText);
                    console.log("error", err.Message);
                }
            });
        });
</script>

C#

public JsonResult Member_Detail(int cords)
        {
            string constr = ConfigurationManager.ConnectionStrings["Test"].ConnectionString;

            MemberDetail m_Detail = new MemberDetail();
            using (SqlConnection con=new SqlConnection(constr))
            {
                SqlCommand cmd = new SqlCommand("select * from Employee where EmployeeID='" + cords+"'", con);
                cmd.CommandType = System.Data.CommandType.Text;

                con.Open();
                DataTable dt = new DataTable();
                dt.Load(cmd.ExecuteReader());

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    m_Detail.EmployeeID = Convert.ToInt32(dt.Rows[i]["EmployeeID"]);
                    m_Detail.Name = dt.Rows[i]["Name"].ToString();
                    m_Detail.Position = dt.Rows[i]["Position"].ToString();
                    m_Detail.Address = dt.Rows[i]["Address"].ToString();
                    m_Detail.Salary = dt.Rows[i]["Salary"].ToString();
                    m_Detail.Office = dt.Rows[i]["Office"].ToString();

                }
            }
            return Json(m_Detail, JsonRequestBehavior.AllowGet);
        }

Answer 1

Using jQuery UI

CSS:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

jQuery and jQuery UI scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

On your script:

$(document).ready(function(){
        $(".map area").on("click", function(e){
        e.preventDefault();
            $.ajax({
                url:'@Url.Action("Member_Detail")',
                data: { 'cords': this.id },
                type: "post",
                cache: false,
                dataType: "JSONP",
                success: function (resdata) {
                    var dataResult = JSON.parse(resdata);
                    $("#popup").append('<p>' + "" /* print dataResult here */ + '</p>');
                    $("#popup").dialog();
                },
                error: function (result, status, err) {
                    console.log("error", result.responseText);
                    console.log("error", status.responseText);
                    console.log("error", err.Message);
                }
            });
        });
});

HTML:

<div id="popup" title="MyPopup">
<p>sample_content</p>
</div>