locked
call a function in <a href> jquery RRS feed

  • Question

  • User-173333858 posted

    I need to have alert displayed on clicking a hyperlink. The function will determine if the hyperlink should go thru, i.e take the user to the next page, or remain there, after the user presses 'ok' on the alert.

    return $("<a href =" + "Pharm_AuditForm.aspx?auditid=" + id + "onclick=CheckIfEDEPOpen();" + ">" + "<u><span class = text-center text-primary>" + data + "</span ></u ></a >") 

    function CheckIfEDEPOpen() {
                alert("reached here"); 
                if (newWindow != null && !(newWindow.closed)) {
                    alert('The Review Tool is open in another tab. Please close it prior to beginning Audit');
                    return false;
                }
                else
                    return true;    
            }

    My tags are not formed correctly for the a href, since it does not reach my function. It also goes to the Pharm_AuditForm page , without showing the alert. Please let me know if you know what is wrong here.

    Thanks!

    Monday, September 21, 2020 11:01 PM

Answers

  • User-1330468790 posted

    Hi RDesh,

     

    The problem locates in below string which is used for creating the anchor element.

    "<a href =" + "Pharm_AuditForm.aspx?auditid=" + id + "onclick=CheckIfEDEPOpen();" + ">" + "<u><span class = text-center text-primary>" + data + "</span ></u ></a >"

     If the variable "auditidd" is "111" and the variable "data" is "222", the generated element would be as below which is obviously incorrect:

    <a href="Pharm_AuditForm.aspx?auditid=111onclick=CheckIfEDEPOpen();"><u><span class="text-center" text-primary="">222</span></u></a>

    The correct way should be as below:

    '<a href ="Pharm_AuditForm.aspx?auditid=' + id + '" onclick="CheckIfEDEPOpen(event);" > <u><span class = "text-center text-primary">' + data + '</span ></u ></a >'

    You could use dev tools in browsers (Press F12) to check the element. 

      

    There is another problem that you should use "event.preventDefault()" to stop the hyperlink jumping to the target page.

    I constructed a demo for your reference:

    Hyper Link aspx Page:

      <form id="form1" runat="server">
            Id:
            <input type="text" id="idText" /><br />
            Data:
            <input type="text" id="dataText" /><br />
            Exists New Windows: 
            <input type="checkbox" id="simulateNewWindow" /><br />
            <input type="button" id="addHyperLink" value="Click To Add Link" />
            <div id="LinkArea">
            </div>
        </form>
    
        
    
        <script type="text/javascript">
            var newWindow = null;
            $(function () {
                $("#addHyperLink").on("click", addLink);
            })
    
            function addLink() {
                var id = $("#idText").val();
                var data = $("#dataText").val();
                
                $("#LinkArea").html('<a href ="Pharm_AuditForm.aspx?auditid=' + id + '" onclick="CheckIfEDEPOpen(event);" > <u><span class = "text-center text-primary">' + data + '</span ></u ></a >');
            }
    
            function CheckIfEDEPOpen(event) {
    
                newWindow = $("#simulateNewWindow").is(":checked") ? "NotNull" : null;
    
                alert("reached here");
                if (newWindow != null && !(newWindow.closed)) {
                    alert('The Review Tool is open in another tab. Please close it prior to beginning Audit');
                    console.log(event);
                    event.preventDefault();
                    return false;
                }
                else
                    return true;
            }
        </script>

    Target page (Pharm_AuditForm.aspx):

     <form id="form1" runat="server">
            <div>
                <h1>The ID is : <label id="displayLbl" runat="server"></label></h1>
            </div>
        </form>

    Target Page Code Behind:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (Request.QueryString["auditid"] != null)
                {
                    displayLbl.InnerText = Request.QueryString["auditid"];
                }
            }

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 22, 2020 2:52 AM

All replies

  • User-1330468790 posted

    Hi RDesh,

     

    The problem locates in below string which is used for creating the anchor element.

    "<a href =" + "Pharm_AuditForm.aspx?auditid=" + id + "onclick=CheckIfEDEPOpen();" + ">" + "<u><span class = text-center text-primary>" + data + "</span ></u ></a >"

     If the variable "auditidd" is "111" and the variable "data" is "222", the generated element would be as below which is obviously incorrect:

    <a href="Pharm_AuditForm.aspx?auditid=111onclick=CheckIfEDEPOpen();"><u><span class="text-center" text-primary="">222</span></u></a>

    The correct way should be as below:

    '<a href ="Pharm_AuditForm.aspx?auditid=' + id + '" onclick="CheckIfEDEPOpen(event);" > <u><span class = "text-center text-primary">' + data + '</span ></u ></a >'

    You could use dev tools in browsers (Press F12) to check the element. 

      

    There is another problem that you should use "event.preventDefault()" to stop the hyperlink jumping to the target page.

    I constructed a demo for your reference:

    Hyper Link aspx Page:

      <form id="form1" runat="server">
            Id:
            <input type="text" id="idText" /><br />
            Data:
            <input type="text" id="dataText" /><br />
            Exists New Windows: 
            <input type="checkbox" id="simulateNewWindow" /><br />
            <input type="button" id="addHyperLink" value="Click To Add Link" />
            <div id="LinkArea">
            </div>
        </form>
    
        
    
        <script type="text/javascript">
            var newWindow = null;
            $(function () {
                $("#addHyperLink").on("click", addLink);
            })
    
            function addLink() {
                var id = $("#idText").val();
                var data = $("#dataText").val();
                
                $("#LinkArea").html('<a href ="Pharm_AuditForm.aspx?auditid=' + id + '" onclick="CheckIfEDEPOpen(event);" > <u><span class = "text-center text-primary">' + data + '</span ></u ></a >');
            }
    
            function CheckIfEDEPOpen(event) {
    
                newWindow = $("#simulateNewWindow").is(":checked") ? "NotNull" : null;
    
                alert("reached here");
                if (newWindow != null && !(newWindow.closed)) {
                    alert('The Review Tool is open in another tab. Please close it prior to beginning Audit');
                    console.log(event);
                    event.preventDefault();
                    return false;
                }
                else
                    return true;
            }
        </script>

    Target page (Pharm_AuditForm.aspx):

     <form id="form1" runat="server">
            <div>
                <h1>The ID is : <label id="displayLbl" runat="server"></label></h1>
            </div>
        </form>

    Target Page Code Behind:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (Request.QueryString["auditid"] != null)
                {
                    displayLbl.InnerText = Request.QueryString["auditid"];
                }
            }

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 22, 2020 2:52 AM
  • User-173333858 posted

    Hi Sean,

    Cannot thank you enough, that worked like a charm! I think I have a mental block against forming these tags :) . But thank you!

    -RDesh

    Tuesday, September 22, 2020 9:57 AM
  • User-1962730110 posted

    To style the "Hello" hyperlink needs to call it by class, right?

    Thursday, October 1, 2020 9:28 AM