Trigger asp.net event from html controls added by jquery

Question

In my WebApplication I have some code like this.

$('.form-content').append('<ul>' + 
    '<li runat="server" OnClick="SelectUser" value="1">User 1</li>' +
    '<li runat="server" OnClick="SelectUser" value="2">User 2</li>' +
    '<li runat="server" OnClick="SelectUser" value="3">User 3</li>' +
'</ul>');

But, when I select the list item, the Event doesn't trigger. Is there any way to bind ASP.NET event to html control which is dynamically generated by JQuery/Javascript ?

I tried using WebMethod. But, It cannot update the ASP.Net controls since the method is static.

You can try with WebMethod and call that WebMethod from $.ajax and obviously that $.ajax can be called for any HTML control.. :) — Sachin
– Sachin, Commented Apr 14, 2015 at 9:35
Yes... Its a server method. WebMethod doesn't help me, as I have lot of textboxes and gridviews to be filled by this function. I cannot set one by one by JQuery AJAX post result. WebMethod on the same page doesn't allow me to directly access the controls; — Yesudass Moses
– Yesudass Moses, Commented Apr 14, 2015 at 10:07

R4nc1d · Accepted Answer · 2015-04-14 09:59:17Z

1

If all else fails you can try this, add hidden asp:button on your page and make sure that you have an onclick event attached to it.

<asp:Button ID="btnSelectUser" runat="server" Text="" OnClick="btnSelectUser_OnClick" />

then in your javascript add click events to your li

$("li").click(function() {    
   $("#btnSelectUser").trigger("click")
});

that should fire the serverside event.

The other thing that you will need to keep in mind is that you will need to place hidden labels on the page to save the selected values of the li

$("li").click(function () {
    $("#hiddenLabel").val("Get value from attr")
    $("#btnSelectUser").trigger("click")
});

then those values should also be available on the server.

This is by now means the best why to-do it, but it will work.

answered Apr 14, 2015 at 9:59

R4nc1d

3,1533 gold badges29 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yesudass Moses Over a year ago

Hi, Its working... Still I am searching for a better solution. Thanks for the solution :)

Sukanya1991 · Accepted Answer · 2015-04-14 10:13:47Z

1

I have made a fiddle similar to your requirement.

$(document).ready(function () {
    $("#btnSubmit").on("click", function () {
        debugger
        addList();
        return false;
    });

    function addList() {
        $('.form-content').append('<ul>' +
            '<li runat="server"  value="1">User 1</li>' +
            '<li runat="server"  value="2">User 2</li>' +
            '<li runat="server"  value="3">User 3</li>' +

            '</ul>');
    }
    $(".form-content").on("click", "li", function () {
        SelectUser($(this));
    });



function SelectUser(obj) {
    alert("User Selected!");
    $.ajax({
        type: "POST",
        url: "./YourPage.aspx/SelectUser",
        data: ("ID=" + $(obj).prop("id")),
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        },
        success: function (result) {
            alert("success");
        }
    });
    return false;
}
});

You can do anything inside SelectUser(). Even Invoke the Serverside event.

edited Apr 14, 2015 at 10:13

answered Apr 14, 2015 at 10:02

Sukanya1991

7763 silver badges17 bronze badges

2 Comments

Sukanya1991 Over a year ago

You can call the SelectUser of server side from ajax. I have updated the code.

Yesudass Moses Over a year ago

Yes. Its possible with an ASP.NET WebMethod. But the problem here is: Since WebMethod is static, It cannot access any of the controls on my page. Hence; It's useless... If I use ajax result to populate the data, Its a heavy task for me.

Collectives™ on Stack Overflow

Trigger asp.net event from html controls added by jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related