To call the fancybox and server side function in javascript

See more:

ASP.NET

Javascript

Hi,

I called the javascript function. In that I have to process two process based on the button text. If button text is remove I need to call server side script if it edit I need to call fancybox.

<script type="text/javascript">

        function EditandRemove(e) {
            var tmp = document.getElementById(e);
            var tempvalue = tmp.value;
            var courseId = document.getElementById('<%=hidden1.ClientID %>').value
             
            if (tempvalue == "Remove") {
                var record_id = e;
                var tr_id = $(this).parents("#.record");
                alert(tr_id);
                // Ask user's confirmation before delete records
                if (confirm("Do you want to delete this record?")) {
                    $.ajax({
                        type: "POST",
                        //saantc-01.aspx is the page name and DeleteUser is the server side method to delete records in saantc-01.aspx.cs
                        url: "page-01.aspx/DeleteUserDetails",

                        //Pass the selected record id
                        data: "{'args': '" + record_id + "','args1': '" + courseId + "','args2': '" + deliveryId + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function () {
                            // Do some animation effect
                            tr_id.fadeOut(500, function () {
                                //Remove GridView row
                                tr_id.remove();
                            });
                        }
                    });

                }
                return false;
            }
            else {
                $(e).fancybox({
                    'type': 'iframe',
                    'titlePosition': 'over',
                    'titleShow': true,
                    'showCloseButton': true,
                    'scrolling': 'yes',
                    'autoScale': false,
                    'autoDimensions': false,
                    'helpers': { overlay: { closeClick: false} },
                    'width': 980,
                    'height': 200,
                    'margin': 0,
                    'padding': 0,
                    'overlayColor': '#000',
                    'overlayOpacity': 0.7,
                    'hideOnOverlayClick': false,
                    'href': '/page2.aspx ',
                    'onComplete': function () {
                        $('#fancybox-frame').load(function () {
                            $('#fancybox-content').height($(this).contents().find('body').height() + 20);
                            var heightPane = $(this).contents().find('#content').height();
                            $(this).contents().find('#fancybox-frame').css({
                                'height': heightPane + 'px'

                            })
                        });

                    }

                });
            }
        }
          
    </script>

The above script was not working. Please guide me

Button:

<input id='<%# Eval("userid_pk") %>' type="button" onclick="EditandRemove(this.id);return false;" value="<%= this.hdnButtonName.Value %>" />