Question

I have a custom web control *.ascx file. I am trying to simulate the user clicking the update button in a gridview using a java script. I have this script at the top of my .ascx page :

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">

        $(document).keypress(function (e) {
            if (e.which == 13) {
                document.getElementById("LinkButton1").click();
            }
        });

    </script>

The “LinkButton1” is located in this template field:

  <asp:TemplateField ShowHeader="False">
                      <EditItemTemplate>
                          <asp:LinkButton ID="LinkButton1" runat="server" onKeyPress="" UseSubmitBehavior="True" CausesValidation="True" 
                              CommandName="Update" TabIndex="13" Text="Update"  ></asp:LinkButton>
                          &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" 
                              CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                      </EditItemTemplate>
                      <ItemTemplate>

What am I missing or doing wrong?

Answer 1

That won’t work because the click only works for attached events not for an anchor which is what a linkbutton is rendered as.

You can use this ..

$(document).keypress(function (e) {
        if (e.which == 13) {
    simulate(document.getElementById("LinkButton1"), "click");

        }
    });

function simulate(element, eventName) {
var options = extend(defaultOptions, arguments[2] || {});
var oEvent, eventType = null;

for (var name in eventMatchers) {
    if (eventMatchers[name].test(eventName)) { eventType = name; break; }
}

if (!eventType)
    throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

if (document.createEvent) {
    oEvent = document.createEvent(eventType);
    if (eventType == 'HTMLEvents') {
        oEvent.initEvent(eventName, options.bubbles, options.cancelable);
    }
    else {
        oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
          options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
          options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
    }
    element.dispatchEvent(oEvent);
}
else {
    options.clientX = options.pointerX;
    options.clientY = options.pointerY;
    var evt = document.createEventObject();
    oEvent = extend(evt, options);
    element.fireEvent('on' + eventName, oEvent);
}
return element;

}

function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}

var eventMatchers = {
‘HTMLEvents’: /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
‘MouseEvents’: /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
};

var defaultOptions = {
pointerX: 0,
pointerY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
bubbles: true,
cancelable: true
};