Setting event via Javascript

Question

0.00/5 (No votes)

See more:

Attempting to set the click for an element via JavaScript but having some trouble. The event is to be set when an aspx web page loads. However, it's executing the event on page load rather than when the element is actually clicked. Lastly, the click event is not working after the page is loaded. I've tried setting the event using both the addEventListener and click methods but to no avail. Here's a sample of the code:

HTML

<a class="HelpContext" title="Help" id="NonModalHelpContext" style="removed30px;">?</a>

VB

ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "SetHelpContext", "setHelpContext('" & sPid & "');", True)

HTML

<script language="javascript" type="text/javascript">


    function setDefaultInvoice(aspCheckBoxID) {
        
        oRegExp = new RegExp(aspCheckBoxID)                        
        //window.alert(aspCheckBoxID)

        for (i = 0; i < document.forms[0].elements.length; i++) 
        {
            elm = document.forms[0].elements[i]
            if (elm.type == 'checkbox' && elm.id.indexOf('grdInvoiceTemplates') > -1) 
            {
                //window.alert(elm.id)
               // window.alert(elm.name)
                                
                if (oRegExp.test(elm.id)) {                
                    elm.checked = true;
                }
                else {
                    elm.checked = false;
                }    
            }
        }
    }


// Moved below
//    function setHelpContext(sUrl) {
//        var ctrl = window.parent.document.getElementById('NonModalHelpContext');
//        ctrl.addEventListener("click", window.open("HelpPage.aspx?" + sUrl, "HelpPage", "width=500,height=300,toolbar=no,scrollbars=yes,resizable=no,dependent=yes", false), false);
//    }
</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
......

</html>


<script language="javascript" >
    // Get a reference to the PageRequestManager.
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    // Using that prm reference, hook _initializeRequest
    // and _endRequest, to run our code at the begin and end
    // of any async postbacks that occur.
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    // Executed anytime an async postback occurs.
    function InitializeRequest(sender, args) {
        // Change the Container div's CSS class to .Progress.
        $get('InvoiceManagerContainer').className = 'Progress';

        // Get a reference to the element that raised the postback,
        //   and disables it.
        $get(args._postBackElement.id).disabled = true;
    }

    // Executed when the async postback completes.
    function EndRequest(sender, args) {
        if (sender._postBackSettings.sourceElement.id !== '') {
            // Change the Container div's class back to .Normal.
            $get('InvoiceManagerContainer').className = 'Normal';
            // Get a reference to the element that raised the postback
            //   which is completing, and enable it.
            $get(sender._postBackSettings.sourceElement.id).disabled = false;
        }
    }

function setHelpContext(sUrl) {
        var ctrl = window.parent.document.getElementById('NonModalHelpContext');
        ctrl.addEventListener("click", window.open("HelpPage.aspx?" + sUrl, "HelpPage", "width=500,height=300,toolbar=no,scrollbars=yes,resizable=no,dependent=yes", false), false);
    }

         
</script>

Any help is appreciated.

Posted 12-Nov-14 15:29pm

wrappingduke

Updated 13-Nov-14 9:07am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suraj Sahoo | Coding Passion · Answer 1 · 2014-11-12T16:46:00

Solution 1

Try and put the function Out of the document ready Or for JavaScript Window.load .
What happens here is the Dom element loads first and the function is present as the script loaded, so when element would be clicked function gets called.
I hope this helps.
Post back your queries if any.
Thanks.

Posted 12-Nov-14 16:46pm

Suraj Sahoo | Coding Passion

Comments

wrappingduke 12-Nov-14 23:32pm

Hi Suraj,

Thank you for your suggestion. It is appreciated. However, I am not sure I follow what your suggesting. Can you provide an example?

Your help is appreciated.

[no name] 13-Nov-14 2:05am

What I meant here is, when you load your page, the scripts gets loaded and everything inside the window.load or the document.ready gets loaded on the page load itself. So if the function you have written inside the window.load then it would not work out. So check and put that function outside if it is the case.
Thanks

wrappingduke 13-Nov-14 12:36pm

Hi Suraj,

Thanks for the reply. I appreciate it. I've tried placing the JavaScript function in two different places:

1. Before the <html> tag, which was the original location of the function. For example,

<script>
function setHelpContext(sUrl){
....
}
</script>

<html>
<head>

2. After the </html> tag, in which case the function can't be found when called from code-behind. For instance,

</html>
<script>
function setHelpContext(sUrl) {
.....
}
</script>

I've tried invoking the function from the Page_LoadComplete and Page_PreRender events, and the results were the function executes when it is located before the <html> tag and the function can't be found when located after </html> tag.

Help is appreciated.

[no name] 13-Nov-14 12:47pm

Did you check in the console for the error??
is it coming as setHelpContext() not found>?

wrappingduke 13-Nov-14 14:24pm

Hi Suraj,

Yep, here's the error "JavaScript runtime error: 'setHelpTopic' is undefined". Error occurs when function follows </html> tag.

[no name] 13-Nov-14 14:37pm

Can you just post me the entire code where you have your script. Update your question and post.
Thanks

wrappingduke 13-Nov-14 15:10pm

Hi Suraj,

Per your request, I have updated the post with the code of the javascript function in question. Thanks again for your help!

[no name] 13-Nov-14 15:35pm

why do you have two scripts my friend. Just have one script and put all the functions into one script tag.
No two tags are required. Put all the functions in one script tag, may it be before html or after, but for performance benefit, put at the bottom, add a debugger inside the click function and check in the developer tool if it hits.
Thanks

wrappingduke 13-Nov-14 16:47pm

I've stated on two separate occasions why there are two script tags. This is now the third. An error occurs that the function can't be found if the function is placed following the html. Placing a breakpoint inside click function to debug serves no purpose because the click function is not set. The purpose on the javascript is to set the click event.

[no name] 13-Nov-14 22:59pm

Please confirm that now you are having one script tag? And My friend why donot you add an onClick event to the Input tag/ or on which click event should fire. You are now rendering through script manager but how that solve the process. You simply can make an onClick event to the input.
Thanks

wrappingduke 14-Nov-14 13:07pm

Hi Suraj,

With the responses you've provided and the tone in some those responses, I'm inclined to believe that you're more impassioned or concerned with in engaging in circular thinking rather than resolving the issue. As a result, I'm going to have to disregard your responses.