I am developing a web bot using WinForms WebBrowser control. Everything is working fine except for the second click() call in following code:

function SaveRecordClick() {
    try {
        var menuButton = $('#s_at_m_4');
        menuButton.click();             //<-- This is working
        var x = $('#s_at_m_4-menu li')[5];
        var saveLink = $(x).find('a')[0];
        if (saveLink != null){
            saveLink.click();           //<-- This is not working

            return "1";
        }
    }
    catch (err) {
        alert(err.message);
    }
    return "0";
}

saveLink is not null. I know this because I placed an alert() call inside the condition.

Updated code with suggested solutions

function SaveRecordClick() {
    try {
        var menuButton = $('#s_at_m_4');
        menuButton.click();
        var x = $('#s_at_m_4-menu li').eq(5);
        var saveLink = x.find('a').eq(0);
        if (saveLink != null) {
            alert(saveLink.html());
            saveLink.click();

            return "1";
        }
    }
    catch (err) {
        alert(err.message);
    }
    return "0";
}

But still the same problem. 'alert()' is working fine but html() is showing inner text instead of HTML of the anchor.

HTML Code

<li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
<a href="javascript:void(0)" aria-disabled="false" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
</li>

ID of the anchor tag is dynamically generated.

Also, click() is triggering when the same code is executed from Google Chrome Console. So, could it be the issue with the WebBrowser control?

Update

I think guys its a problem with the webrowser control that inherits Internet Explorer. So now I am shifting to another browser control and testing the code on it. Will let you know if it works there.

I am developing a web bot using WinForms WebBrowser control. Everything is working fine except for the second click() call in following code:

function SaveRecordClick() {
    try {
        var menuButton = $('#s_at_m_4');
        menuButton.click();             //<-- This is working
        var x = $('#s_at_m_4-menu li')[5];
        var saveLink = $(x).find('a')[0];
        if (saveLink != null){
            saveLink.click();           //<-- This is not working

            return "1";
        }
    }
    catch (err) {
        alert(err.message);
    }
    return "0";
}

saveLink is not null. I know this because I placed an alert() call inside the condition.

Updated code with suggested solutions

function SaveRecordClick() {
    try {
        var menuButton = $('#s_at_m_4');
        menuButton.click();
        var x = $('#s_at_m_4-menu li').eq(5);
        var saveLink = x.find('a').eq(0);
        if (saveLink != null) {
            alert(saveLink.html());
            saveLink.click();

            return "1";
        }
    }
    catch (err) {
        alert(err.message);
    }
    return "0";
}

But still the same problem. 'alert()' is working fine but html() is showing inner text instead of HTML of the anchor.

HTML Code

<li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
<a href="javascript:void(0)" aria-disabled="false" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
</li>

ID of the anchor tag is dynamically generated.

Also, click() is triggering when the same code is executed from Google Chrome Console. So, could it be the issue with the WebBrowser control?

Update

I think guys its a problem with the webrowser control that inherits Internet Explorer. So now I am shifting to another browser control and testing the code on it. Will let you know if it works there.

• javascript
• c#
• jquery
• winforms

• What are you expecting saveLink.click() to do? Keep in mind, saveLink there is not a jQuery object. It is the Element since you did [0] instead of eq(0) and click() on a normal Element will not cause any click handlers bound with jQuery to execute. – Taplar Commented May 26, 2017 at 15:57
• To those saying you need to wrap the saveLink in $(). .click() is a DOM function, it is not a jQuery function, jQuery has .click(<eventhandler>) to bind an event handler to onclick, i.e. it is short for .on( "click", <eventhandler>) – Nick is tired Commented May 26, 2017 at 15:57
• @NickA api.jquery./click/#click The third option of click() does indeed exist in jQuery also. It's a short hand for trigger('click') – Taplar Commented May 26, 2017 at 16:00
• @Taplar except that all it does is call the DOM click function, so not really – Nick is tired Commented May 26, 2017 at 16:03
• Your statement said that jquery did not have a click() method without parameters. But it does. The users confusion about if they have an Element or a JQuery element is irrelivant to that. – Taplar Commented May 26, 2017 at 16:03

13 Answers 13

You have to wrap your object with jQuery in order to make it work:

var saveLink = $($(x).find('a')[0]);

Try with Below condition's:

1. trigger('click') instead of click
2. Change the if condition validation with if(saveLink) .Its validate both null,undefined all false statement
3. Return with number=> 0 instead of sting =>'0'
4. anchor tag redirection use with window.location.href and get the href value from anchor try with attr('href')

function SaveRecordClick() {
  try {
    var menuButton = $('#s_at_m_4');
    menuButton.trigger('click');
    var x = $('#s_at_m_4-menu li').eq(5);
    var saveLink = x.find('a').eq(0);
    if (saveLink) {
      alert(saveLink.html());
      window.location.href=saveLink.attr('href');
     return 1;
    }
  } catch (err) {
    alert(err.message);
  }
  return 0;
}

working example

function SaveRecordClick() {
  try {
    var menuButton = $('#s_at_m_4');
    menuButton.trigger('click');
    var x = $('#s_at_m_4-menu li').eq(5);
    var saveLink = x.find('a').eq(0);
    if (saveLink) {
      alert(saveLink.html());
      window.location.href=saveLink.attr('href');
     return 1;
    }
  } catch (err) {
    alert(err.message);
  }
  return 0;
}
SaveRecordClick()

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="s_at_m_4-menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
    <a href="https://example." aria-disabled="false" onclick="console.log('s')" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
  </li>
  <li></li>
</ul>

saveLink will never be null, since find/eq will always return a jQuery object, regardless of whether the element or elements exist or not.

Instead, try using the length property to check for existence:

if (saveLink.length)

function SaveRecordClick() {
    try {
        var menuButton = $('#s_at_m_4');
        menuButton.click();
        var x = $('#s_at_m_4-menu li').eq(5);
        var saveLink = x.find('a').eq(0);
        if (saveLink != null) {
            alert(saveLink.html());
            saveLink.live('click');//Use live click 

            return "1";
        }
    }
    catch (err) {
        alert(err.message);
    }
    return "0";
}

savelink should be dom element for null check

var saveLink = $(x).find('a:first')[0];

or

var saveLink = $(x).find('a').eq(0)[0];

or

var saveLink = $(x).find('a').first()[0];

I did not understand Do you need to click or add function in the click?

Add function :

jQuery('teste').click(function(){console.log('teste')});

Click:

jQuery('teste').trigger('click');

Teste utilized jQuery.

jQuery(saveLink).click(function(){
console.log('click!');
});

try this

$(document).on('click',$(saveLink),function(event){ ///your code })

Best way to fire an event from JavaScript

$( "#ID" ).trigger( "click" ); 

I hope it will work for you.

Your updated code with suggested solutions is good, but the .html() method gets the content of an HTML element. Thus, you need to use saveLink.parent().html() to get outer HTML of the anchor.
If there is other elements in the parent container, you could create temporary element to get only hiperlink HTML:

var anchorHTML = $('<div>').append(saveLink.clone()).html();

To click on saveLink using Javascript try to use x.find('a')[0].click() instead of saveLink.click().
I used URL of your profile in href attribute for visual clarity. If you run the snippet below, then user click on the link will be simulated and your profile page will be displayed.

function SaveRecordClick() {
  try {
    var x = $('#s_at_m_4-menu li').eq(5);
    var saveLink = x.find('a').eq(0);
    if (saveLink != null) {
      var anchorHTML = $('<div>').append(saveLink.clone()).html();
      alert(anchorHTML);
      saveLink[0].click();
      return "1";
    }
  } catch (err) {
    alert(err.message);
  }
  return "0";
}
console.log(SaveRecordClick());

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="s_at_m_4-menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
    <a href="https://stackoverflow./users/1124494/aishwarya-shiva" aria-disabled="false" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
  </li>
  <li></li>
</ul>

Remember one thing javascript and javascript frameworks are event driven,so please don't try to implement the functional programming concepts

$(document).ready(function(){
   $("#s_at_m_4").click(function(){
   // put your code here   
   });
});

What my theory about this is that the click function was not actually bound to the element. This can be due to the html was not yet in the page when the script or binding of click is executed. Try checking the binded click in saveLink.click();

try to make it in the format

$(body).delegate(saveLink, 'click', function() { //try alert here to check });

Thank you everyone for your answers and ments.

After spending a week in researching the third party website, today I finally found the solution to my problem. Actually the problem was not with JavaScript or HTML but the way the website validate the form I am trying to autofill using my bot.

I awarded bounty to the answer whose conversation in ments gave me some hints.

The click on saveLink was not firing because I was programmatically setting a value of a text box using .val() but for some reason the website was not saving values directly set using this function. But when I changed the value using a bo box that loads value for the textbox from the server (Although the value set from server or using val() function are exactly same.), then the click successfully fired after that.

I also used setTimeout() at various places because the code was executing too fast before the value can be set in some form fields.

So in future if someone faces a similar problem then make sure you study the behavior of the page or form you are trying to submit.