Make div click run server-side code that will include info from clicked div?

Question

I have a DataList that looks like this:

<div>
    <asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
        <ItemTemplate>
        <div style="padding: 8px">
            <div style='width:195px;height:162px; background-image:url(<%# Eval("image_path","Styles/Images/{0}") %>)'>
                <div style="width: 195px; height: 22px;">
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>'></asp:Label>
                </div>
                <div style="width: 195px; height: 22px;">
                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label>
                </div>
            </div>
        </div>
        </ItemTemplate>
    </asp:DataList>
</div>

This looks great. But now, I need to be able to click on the div so that an event occurs (ie. a Click) and server-side code is invoked. All without altering the look of the div. Essentially, clicking inside the div will call some event handler, and this event-handler would have the information on the div that I clicked on.

So, for example, the datalist shows that one div has CookName as Joe and WaiterName as Mark. When that div is clicked, the server-side code will run and I will at that point that Joe & Mark are the two employees from that div.

Is this possible? I've searched, but I haven't found anything that may help.

Any help is appreciated.

Thanks.

score 1 · Answer 1 · answered Apr 19 '16 at 16:27

1

<div onclick="yourjavascriptfunction">
....
</div>

From there you'll need the JavaScript function to call the server side code and handle the response accordingly.

answered Apr 19 '16 at 16:27

C0deApe

36
3

But would I be able to know which div I clicked on? Can you give an example of what the javascript function would look like that calls server-side code? Thanks. – fdkgfosfskjdlsjdlkfsf Apr 19 '16 at 16:42

score 0 · Answer 2 · edited May 23 '17 at 11:45

If you can use jQuery, you can make an AJAX call like this:

 $("div").click(function() {
     $.ajax({
        url: '/myserversidescript',
        success: function(msg, status, xhr) {
            //do something
        },
        error: function() {  
         //do Something
        }
    });
 });

If you don't want to use jQuery, you can also do it with normal JavaScript: AJAX call with JavaScript

Make div click run server-side code that will include info from clicked div?

2 Answers2