locked
Jquery append image src and button click RRS feed

  • Question

  • User457850011 posted

    I am trying to add image and button click to jquery dynamically. The image doesn't show. Below is my code.

    $('<div/>', { id: 'hide' }).append('<img src="/Content/Images/alert.png" style="margin-left: auto; margin-right: auto; display: block;" alt="" />')
                    .append('<button runat="server" autofocus id="myButton" type="button" style="margin-left: auto; margin-right: auto; display: block;">OK</button>');
                $("#myButton").click(function() {
                    $("#hide").hide();
                    }
    Friday, April 30, 2021 11:44 PM

Answers

  • User457850011 posted

    Hi

    Thanks for your response. I know how to do bootstrap modal but it will not work for my solution. I need to insert it in the html header in the _Layout. Anyway I have found a solution. Like what I was doing, redirect from the Glbal.asax Session_Start.  Mark some of the controllers [SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)] then in the Session_Start 

     if (!HttpContext.Current.Session.IsReadOnly)
                {
                    Response.Redirect("~/alert.html");
                   
                }

    This works for me now.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 3, 2021 3:44 PM

All replies

  • User-474980206 posted

    Couple issues. You never add the dynamic div to the dom, also runat=server is meaningless client side.

    Saturday, May 1, 2021 2:47 AM
  • User457850011 posted
    Hi Thanks
    I have changed the code to below but still . Maybe if I give you a ;little explanation of what I am doing it will help. I have tried your approach and it doesn't work. Maybe if I can explain what I am doing you can help me better. I need a popup image with some text to show up first thing when my page is loading. Something like a warning, users read it and click ok to dismiss and proceed. I was using session start in Global.asax which was working ok in windows server 2008 R2 but now not working in windows server 2019. I need the popup to come before the DOM loads so basically from the html header





    $("#hide")
    .append('<img src="/Content/Images/alert.png" style="margin-left: auto; margin-right: auto; display: block;" alt="" />')
    .append('<button autofocus id="myButton" type="button" style="margin-left: auto; margin-right: auto; display: block;">OK</button>');
    $("#myButton").click(function () {
    $("#hide").hide();
    });
    Saturday, May 1, 2021 2:53 AM
  • User-474980206 posted

    The script would need to come after the jquery script include and  <div id=“hide”>

    not sure why you need JavaScript to add html to the dom. The image would display faster if It was just plain html. You need to structure the html so the browser can render the image right away while loading the rest of the page. Also as it’s an addition network request, the page may be read before the image is downloaded. To make load better, divide the page into two divs. The first with the image and text. The second marked hidden containing all the page content. The ok button can hide the first div, and unhindered the second.

    Saturday, May 1, 2021 3:34 PM
  • User457850011 posted

    Hi

    I have  change the solution and now redirecting from  the Glabal.asax   Session_Start. The only issue now is on very event, the redirect is called. I just want the Redirect called one time when the user gets in the application. I am doing like below.

     public void Session_Start(object sender, EventArgs e)
            {
    if (Request.IsAuthenticated)
                {
                    Response.Redirect("~/alert.png", false);
                    Response.End();
                }
    }

    Monday, May 3, 2021 5:43 AM
  • User1686398519 posted

    Hi denkyira, 

    I wrote an example based on your description, you can refer to it.

    1. You can use bootstrap modal.
    2. You can learn about the selector of jquery, which can help you understand the demo I provided.
    @{
        ViewBag.Title = "Index";
        Layout = null;
    }
    <div id="hidediv" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
    
                </div>
                <div class="modal-footer">
                    
                </div>
            </div>
        </div>
    </div>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            $(".modal-body").append('<img src="/Content/Images/alert.png" style="margin-left: auto; margin-right: auto; display: block;" alt="" />');
            $(".modal-footer").append('<button type="button" id="myButton" class="btn btn-secondary" data-dismiss="modal">OK</button>');
            $("#hidediv").modal("show");
        });
    </script>

    Result:

    denkyira

    $("#myButton").click(function () {
    $("#hide").hide();
    });

    1. You should use delegated event handlers.
      • It has the advantage that they can process events from descendant elements that are added to the document at a later time. 
    2.         $("#hidediv").on("click", "#myButton", function () {
                  $("#hidediv").hide();
              });
    3. .on()

    I have  change the solution and now redirecting from  the Glabal.asax   Session_Start. 

    • Did you find another solution?

    Best Regards,

    YihuiSun

    Monday, May 3, 2021 7:50 AM
  • User457850011 posted

    Hi

    Thanks for your response. I know how to do bootstrap modal but it will not work for my solution. I need to insert it in the html header in the _Layout. Anyway I have found a solution. Like what I was doing, redirect from the Glbal.asax Session_Start.  Mark some of the controllers [SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)] then in the Session_Start 

     if (!HttpContext.Current.Session.IsReadOnly)
                {
                    Response.Redirect("~/alert.html");
                   
                }

    This works for me now.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 3, 2021 3:44 PM