locked
Need help creating a tooltip and having it display values from database RRS feed

  • Question

  • User585630792 posted

    Hey everyone.

    I'm trying to display a tooltip-like popup when you hover over an image on my page. The value for the title should be a "comment" value that gets populated from the database using the stored procedure in my ajax. But it's not working.

    My jquery:

    $(document).ready(function () {
            bind();
            $('#tablename').dataTable(
            {
                "bSort": true,
                "sScrollY": "550px",
                "iDisplayLength": 25,
                "bFilter": false,
                "fnDrawCallback": function (oSettings) {
                    bind();
                }
            });
    
        function bind() {
            var validOpen = true;
    
            $(document).mousemove(function (e) {
                var xPos = e.pageX + 10;
                var yPos = e.pageY - $(window).scrollTop() + 10;
                $("#commentDialog").dialog("option", { position: [xPos, yPos] });
            });
    
            $("#commentDialog").dialog({
                autoOpen: false,
                width: 350
            });
    
            $(".comment").bind("mouseover", function () {
                validOpen = true;
                $.ajax({
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    url: "/PersonFamily/GetInformationByID",
                    data: JSON.stringify({
                        Comment: $(this).data("Comment"),
                    }),
                    success: function (data) {
                        $("#commentParagraph").text(data.Comment);
                        if (validOpen) {
                            $("#commentDialog").dialog('open'); // open
                        }
                    }
                });
            });
    
            $(".comment").bind("mouseleave", function () {
                validOpen = false;
                $("#commentDialog").dialog('close'); // close
            });
        }
        });

    My html:

    <table id="tablename" class="table-a">
    ...
    ...
    ...
    ...
    <td id="comments">
        @if (Model.Referrals.Select(x => x.Comment) != null || Model.DTAReferrals.Select(x => x.Comment).ToString() != "")
    { <img class="comment" data-id="@Model.Referrals.Select(x => x.Comment)" src="~/Images/Comment.png" /> } <div id="commentDialog" style="display:none" title="Comment"> <p id="commentParagraph" style="margin:10px; border:1px solid black"></p> </div> </td>

    I think it should at least display the box, right?

    All of the code is taken from another part of the app (that I didn't write) that displays the box just fine.

    Picture here of what the popup should look like

    The only differences are the names/locations of the <div id="commentDialog"</div> and the fact that I am requesting "comment" from another stored procedure in the ajax.

    Any help would be greatly appreciated. I could even ask to fix both if there's a better way to create a good-sized tooltip.

    Edit:

    I wrote something like this as well, but it also doesn't bind to the @Model and display the values from the db. Kinda need it to do this so it will show the latest "comment" value each time you update. Any help would be most welcomed.

     $(document).ready(function () {
            $('.comment').tooltip({
                track: true
            });
    
            var title = $(this).attr('title');
            var elem = $(this);
    
            $.ajax({
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                type: "POST",
                url: "/PersonFamily/GetInformationByID",
                data: JSON.stringify({
                    text: dataRow["Comment"],
                    dtaID: dataRow["FamilyInformationID"]
                }),
                success: function (data) {
                    elem.attr('data-toggle', 'tooltip');
                    elem.attr('title', text);
                    elem.tooltip().tooltip("show");
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });
     <td id="comments">
          @if (Model.DTAReferrals.Select(x => x.Comment) != null || Model.DTAReferrals.Select(x => x.Comment).ToString() != "")
          {                     
              <img class="comment" data-id="@Model.DTAReferrals.Select(x => x.Comment)" src="~/Images/Comment.png" />
          }           
     </td>
    Monday, April 8, 2019 2:10 PM

All replies

  • User585630792 posted

    Got it to display using this:

    $(document).ready(function(){        
    bind(); function bind() { var validOpen = true; $(document).mousemove(function (e) { var xPos = e.pageX + 10; var yPos = e.pageY - $(window).scrollTop() + 10; $("#commentDialog").dialog("option", { position: [xPos, yPos] }); }); $("#commentDialog").dialog({ autoOpen: false }); $(".comment").bind("mouseover", function () { validOpen = true; $.ajax({ type: "POST", url: "/Family/GetFamilyInfoComment", contentType: 'application/json; charset=utf-8', dataType: "json", data: JSON.stringify({ FamilyInformationID: $(this).data("FamilyInformationID"), Comment: $(this).data("Comment")}), success: function (data) { if (validOpen) { $("#commentDialog").dialog('open'); // open $("#commentParagraph").attr('text', data.Comment); } } }); }); $(".comment").bind("mouseleave", function () { validOpen = false; $("#commentDialog").dialog('close'); // close }); }
    });

    So that binds it to the image from above, but the ajax doesn't GET or POST anything. My "#commentParagraph" is always blank.

    Here's the view section I'm using to create the tooltip-like element:

    <td id="comments">
    <img class="comment" data-id="@Model.Comments" src="~/Images/Comment.png" />
    </td>

    <div id="commentDialog" style="display:none" title="Comment"> <p id="commentParagraph" style="margin:10px;"></p> </div>

    Here's the controller JSON:

    public virtual JsonResult GetFamilyInfoComment(int FamilyInformationID)
            {
                List<string> results = new List<string>();
                FamilyInformation Info = new FamilyInformation();
                if (FamilyInformationID > 0)
                {
                    try
                    {
                        Info = Manager.GetFamilyInformationById(FamilyInformationID);
                        results.Add(dtaInfo.Comment);
                    }
                    catch
                    {
                        results.Add("An error occurred for " + FamilyInformationID);
                        return Json(results);
                    }
                }
                else
                {
                    results.Add("An error occurred");
                    return Json(results);
                }
                return Json(Info);
            }

    Anyone have any clues as to what's going wrong here? Why doesn't the ajax set the value of "#commentParagraph"? =\

    Wednesday, April 10, 2019 6:14 PM
  • User475983607 posted

    What is dtaInfo?

    public virtual JsonResult GetFamilyInfoComment(int FamilyInformationID)
            {
                List<string> results = new List<string>();
                FamilyInformation Info = new FamilyInformation();
                if (FamilyInformationID > 0)
                {
                    try
                    {
                        Info = Manager.GetFamilyInformationById(FamilyInformationID);
                        results.Add(dtaInfo.Comment);
                    }

    Wednesday, April 10, 2019 6:28 PM
  • User585630792 posted

    Oops, I'm editing out certain sensitive information pertaining to my app.

    List<string> results = new List<string>();
                FamilyInformation dtaInfo = new FamilyInformation();
                if (FamilyInformationID > 0)
                {
                    try
                    {
                        dtaInfo = Manager.GetFamilyInformationById(FamilyInformationID);
                        results.Add(dtaInfo.Comment);
                    }
                    catch
                    {
                        results.Add("An error occured comment for " + FamilyInformationID);
                        return Json(results);
                    }
                }
                else
                {
                    results.Add("An error occured comment");
                    return Json(results);
                }
                return Json(dtaInfo);

    Also, I'm not hitting breakpoints on this section of code. So there's something messed up with my ajax call, though I don't know whether it's the call itself (it says the breakpoints won't be hit in " $(document).ready(function () {"). I'm calling another javascript file that I created at the top, could that impact anything?

    Wednesday, April 10, 2019 6:38 PM
  • User475983607 posted

    secretclean

    Oops, I'm editing out certain sensitive information pertaining to my app.

    It's difficult to provide assistance when the provided source code does not compile.  

    secretclean

    Also, I'm not hitting breakpoints on this section of code. So there's something messed up with my ajax call, though I don't know whether it's the call itself (it says the breakpoints won't be hit in " $(document).ready(function () {"). I'm calling another javascript file that I created at the top, could that impact anything?

    The latest AJAX function passes a complex type.

                $.ajax({
                    type: "POST",
                    url: "/Family/GetFamilyInfoComment",
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    data: JSON.stringify({
                        FamilyInformationID: $(this).data("FamilyInformationID"),
                        Comment: $(this).data("Comment")}),
                    success: function (data) {
                        if (validOpen) {
                            $("#commentDialog").dialog('open'); // open
                            $("#commentParagraph").attr('text', data.Comment);
                        }
                    }
                });

    But the Action takes an int input parameter.

    public virtual JsonResult GetFamilyInfoComment(int FamilyInformationID)
    {

    You should be seeing an error in the browser's Dev Tools (F12)- Console View.  Can you explain why the end point is "virtual"?  

    The original markup shows the dialog in a <td>.

    <td id="comments">
        @if (Model.Referrals.Select(x => x.Comment) != null || Model.DTAReferrals.Select(x => x.Comment).ToString() != "")
        {
             <img class="comment" data-id="@Model.Referrals.Select(x => x.Comment)" src="~/Images/Comment.png" />
        }
        <div id="commentDialog" style="display:none" title="Comment">
            <p id="commentParagraph" style="margin:10px; border:1px solid black"></p>
        </div>
    </td>

    This is problematic if the rows are generated in a loop as the "id" will repeat (invalid markup) and I believe the jQuery selector will find the first id.   

    Wednesday, April 10, 2019 6:50 PM
  • User585630792 posted

    secretclean

    Oops, I'm editing out certain sensitive information pertaining to my app.

    It's difficult to provide assistance when the provided source code does not compile.  

    secretclean

    Also, I'm not hitting breakpoints on this section of code. So there's something messed up with my ajax call, though I don't know whether it's the call itself (it says the breakpoints won't be hit in " $(document).ready(function () {"). I'm calling another javascript file that I created at the top, could that impact anything?

    The latest AJAX function passes a complex type.

                $.ajax({
                    type: "POST",
                    url: "/Family/GetFamilyInfoComment",
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    data: JSON.stringify({
                        FamilyInformationID: $(this).data("FamilyInformationID"),
                        Comment: $(this).data("Comment")}),
                    success: function (data) {
                        if (validOpen) {
                            $("#commentDialog").dialog('open'); // open
                            $("#commentParagraph").attr('text', data.Comment);
                        }
                    }
                });

    But the Action takes an int input parameter.

    public virtual JsonResult GetFamilyInfoComment(int FamilyInformationID)
    {

    You should be seeing an error in the browser's Dev Tools (F12)- Console View.  Can you explain why the end point is "virtual"?  

    The original markup shows the dialog in a <td>.

    <td id="comments">
        @if (Model.Referrals.Select(x => x.Comment) != null || Model.DTAReferrals.Select(x => x.Comment).ToString() != "")
        {
             <img class="comment" data-id="@Model.Referrals.Select(x => x.Comment)" src="~/Images/Comment.png" />
        }
        <div id="commentDialog" style="display:none" title="Comment">
            <p id="commentParagraph" style="margin:10px; border:1px solid black"></p>
        </div>
    </td>

    This is problematic if the rows are generated in a loop as the "id" will repeat (invalid markup) and I believe the jQuery selector will find the first id.   

    Thanks for pointing some of these things out. It was all a bit beyond me and time was a factor. Ended up removing the ajax altogether and directly cycling through the values from a procedure in the database. But I'd be interested in knowing if there's a way to factor this more abstractly to make it work.

    Friday, April 12, 2019 1:18 PM