Click anchor element using javascript function

Question

I know this has been covered elsewhere on this site, as well as many others, but I just can't seem to figure it out.

I have an anchor tag that I use to show a lightbox form:

<a id="aNoData" href="#divNoData" class="fancybox">No Data</a>

I want to click it using a javascript function:

function fnNoData()
{
    //  This line works
    alert("this line works");   
    //  Neither of these lines work
    $('#aNoData').click();
     document.getElementById('aNoData').click();
}

I'm calling the function from my code behind, like this:

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "fnNoData()", true);

When I do this, the first line (the alert box) shows fine. However, the other two lines (to click the anchor tag) do not. The non-working lines work great if I put them in my $(document).ready block (the anchor clicks on page load). So it seems that the lines to click my anchor work fine, just not in my function.

Can anyone see what I'm doing wrong?

_"work great if I put them in my $(document).ready block "_ if they work fine there, then where you are currently calling them is being called too soon, meaning the element does not exist yet, or the lightbox library hasn't had time to setup its own functionality for that element — Patrick Evans, Jul 07 '17 at 19:19
Try adding your function in a script at the bottom of the page. — Difster, Jul 07 '17 at 19:21
OK Patrick, thanks, and I did try putting the whole function inside my $(document).ready block, but it doesn't work at all there. Can you suggest a solution? — buckshot, Jul 07 '17 at 19:21
Putting the whole function inside the ready block would make it scoped to that block, so wouldn't be able to be called outside of that block (you would see a _"fnNoData is not a function error"_ message in the console.) — Patrick Evans, Jul 07 '17 at 19:25

score 0 · Answer 1 · answered Jul 07 '17 at 19:21

0

If you want to do click directly than you can use trigger

Check this hope this will helps you.

function fnNoData()
{
    //  This line works
    alert("this line works");   
    //trigger
    $('#aNoData').trigger('click');
    //document.getElementById('aNoData').click();
}

answered Jul 07 '17 at 19:21

Nirav Joshi

2,924
1
23
45

Thanks Nirav, that was one of the many, many things I tried. Same result. – buckshot Jul 07 '17 at 19:26

score 0 · Answer 2 · answered Jul 07 '17 at 19:25

0

jquery click event is expecting a function (not tested)

$('#aNoData').on("click", function() {
  console.log( "clicked the element with id aNoData );
});

in case you want to trigger the click(without the actual click), jquery has a function for that too: http://api.jquery.com/trigger/

answered Jul 07 '17 at 19:25

jpnazar

81
1
6

Thanks jpanzar. Same result. – buckshot Jul 07 '17 at 19:40

score 0 · Answer 3 · answered Jul 07 '17 at 19:53

Quote from your comment

OK Patrick, thanks, and I did try putting the whole function inside my $(document).ready block, but it doesn't work at all there

You should not define the whole function inside $(document).ready(), instead define it outside and call it from inside the ready() function

Your original function

function fnNoData(){
    //  This line works
    alert("this line works");   
    //  Neither of these lines work
    $('#aNoData').click(); 
}

Call it from ready()

jQuery(document).ready(function () {
    fnNoData();
});

Hope this helps!

Thank you James, and yes this will work, but I need to call my function from my code behind (see my original post). I was just putting stuff in my document.ready block to see if it works at all, which it does. The mystery, still unsolved, is why the code works there but not in my function. — buckshot, Jul 07 '17 at 20:01

score 0 · Accepted Answer · answered Jul 07 '17 at 21:42

It took hours, but I finally brute-forced a solution.

As some repliers suggested, my code behind was trying to use the DOM before all elements were fully loaded. I got around that by changing the line in my code behind to this:

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "$(window).load(function() {fnNoData();});", true);

Click anchor element using javascript function

4 Answers4